Three.js
文章平均质量分 51
主要记录工作中three.js的使用的经验
Webglzhang
Three.js Contributor!努力奋斗的programmer !
展开
-
WebGPU NDC 标准设备坐标系
看了挺长时间的WebGPU了,会开始记录一些散点的问题,这部分目前没有在WebGPU Spec体现出来。今天先来讨论一个问题WebGPU的标准设备坐标(Normalized Device Coordinate )是什么样的。webgl的ndc大家已经很熟悉了是一个位于中心点(0,0,0)xyz为2✖️2✖️2的空间,webgl程序中矩阵变换的目的,就是把想看的物体都变换到这个坐标系下。webgpu的ndc是中心点位于(0,0,0.5)的xyz为2✖️2✖️1的空间。这...原创 2022-04-10 22:47:36 · 1572 阅读 · 0 评论 -
WebGPU 初探 - Windows10上Chorme运行WebGPU程序
WebGPU是最新的Web 3D图形API,浏览器封装了现代图形API(Dx12、Vulkan、Metal),这才是未来的标准,不像 WebGL2.0 苹果直接不支持,好,开始今天的分享;点击链接查看是否支持WebGPU首先分享链接:W3C WebGPU组织WebGPU 目前的进展 可以查看WebGPU最新的进展和平台支持情况WebGPU文档 WebGPU的官方介绍,说明比较详细Web...原创 2020-01-15 22:57:01 · 9708 阅读 · 0 评论 -
WebGL 由gl_FragCoord在FS中计算世界坐标(渲染流水线矩阵变化的逆推)
今天有群友在交流群里问,如何根据gl_FragCoord在片元坐标中计算当前片元的世界坐标,因为能从顶点着色器传递到片元着色器,大家都没有在意这件事情,晚上正好无事也进行了一番探索,这是一个矩阵变换的逆过程。渲染管线中矩阵变换可参考我的这篇文章Webgl矩阵变换总结。 话不多说直接,上效果,估计有点蒙,解释一下,初始是红色立方体,然后过两秒,开始进行比对,gl_FragCoord在片元着色...原创 2020-01-06 23:32:39 · 1576 阅读 · 1 评论 -
Three .js 记录一次给 three.js 提 pr 的经历!!2020冲鸭!!
记一次给Three.js 提 pr 的经历!! 哈哈 在 Three.js r110的版本中,mrdoob 添加了InstancedMesh,在一次issue的讨论中,有人提到想知道它具体的是哪个实例, 有人建议gpu pick,也就是基于颜色编码去做。哈哈,巧了,最近一直在读Three…js 的源码,正好包含raycast部分,我就尝试着去实现InstancedMesh.raycast,也在...原创 2020-01-05 19:13:01 · 739 阅读 · 2 评论 -
Three.js BIM模型轻量化 FPS渲染速率优化 多 实例渲染[Instance]+顶点合并[Merge]
BIM模型不经过处理,直接加载到Three.js 创建的场景中,很大可能会很使fps帧率下降,原因在于模型的个数太多,有的模型是多材质的话还需要在Three.js中绘制两次,这样会导致drawcall过载,虽然在开启视椎体剪裁的情况下,Three.js中已经进行了模型剔除的处理,但仍然很难解决drawcall过载的问题,可以F12 打开devtool看下cpu使用率。 ...原创 2019-09-08 11:52:53 · 4827 阅读 · 1 评论 -
Three.js项目实战之Dijkstra寻路效果、 A*寻路效果
分享两个基于Three.js结合寻路算法实现的项目效果;第一个是用Dijkstra实现的,是我大学的毕业设计,熟悉蜂鸟视图产品的同志,可能会感觉很相似哈,就简单截个图了哈。 上面当然会有些缺陷了哈,路径不够平滑,其实在得到最短路径之后,我们是可以用贝塞尔曲线或者B样条做曲线拟合的生成光滑的路径点,所以呢,在我实习的时候,遇到了类似的需求我就在得到最短路径后利用Thre...原创 2019-04-17 22:25:16 · 3365 阅读 · 2 评论 -
Three.js 拾取之GPU Picking的理解和思考
今天,分享的是项目中真实会用到的东西,Three.js GPU Picking,这是什么意思呢,不同于Three.js 的Raycaster,它是利用颜色的6位16进制表示,以颜色作为ID,在后台渲染出纹理后,根据鼠标坐标下的纹理颜色,进行ID的查询进行拾取操作,哈哈,如果你不是很了解,应该不明白我在说什么,下面我们一步一步来说明这个所谓的GPU Picking。 在Th...原创 2019-03-27 00:00:52 · 4406 阅读 · 2 评论 -
Three.js 项目实战之在线3D纸箱包装DIY设计
这个项目是在大学的时候做的,做了没多久就移交给下届的同学继续做了,那我今天分享一下这个项目,主要是是给纸箱厂做一个3D在线包装设计,增加包装纸厂的客户流量,并且也能过让用户得到更好的体验,下面展示的是客户端,后台在我同学那边,我就展示一下客户端。主界面:登录和注册页面:核心纸箱3D展示、编辑界面1.纸箱纹理编辑2.纸箱平面图展开与折叠3.平面图展开...原创 2019-03-25 22:17:47 · 3412 阅读 · 1 评论 -
Three.js Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix和.parent、.children属性的深入理解
工作中,在涉及对模型一些矩阵变换操作的时候,都会看到这样的代码注释,获取AAA的矩阵,向量BBB applyAAA矩阵,变换到AAA的空间。今天,分享的是对于THREE.Object3D矩阵属性的一些理解,并附上工作时使用的感受。下面开始吧。 我们先来讨论Obejct3D.matrix、.matrixWorld、.modelViewMatrix、.normalMatrix的属性,先...原创 2019-03-24 23:29:14 · 4486 阅读 · 1 评论 -
Three.js着色器构成剖析和MeshStandardMaterial(PBR)shader着色器实现分析
哈哈!今天要分享的是在工作碰到的需求,项目中部分模型需要通过Instance方式进行渲染优化,主要是减少drawcall次数和顶点数量。然而项目中的使用的是MeshStandardMaterial,这种材质是一种基于物理的标准材质(PBR),然而Three.js并没有将Instance封装到着色器中,需要我们在代码里重写THREE.ShaderLib.physical并将Instan...原创 2019-03-24 21:52:32 · 6765 阅读 · 0 评论