WebGL
文章平均质量分 69
主要记录WebGL底层知识,包括webgl底层api、线性代数、图形算法等等
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 · 1603 阅读 · 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 · 9769 阅读 · 0 评论 -
WebGL 中的 gl.drawArrays()与gl.drawElements() 你真的懂吗?
哈哈,今天群友又问了一个很有意思的问题,问gl.drawElements()如何使用,如何制定绘制的范围,哈哈,很基础的问题,但也难住了很多人,你也可以思考一下如何去实现,Three.js源码拆分几何体地时候就会用到这些api技巧,但是我之前并没有深入去学习,OK,带着问题我们开始吧。 先来看一下 gl.drawArrays()的ts声明:drawArrays(mode: number,...原创 2020-01-10 23:04:42 · 2196 阅读 · 0 评论 -
WebGL 由gl_FragCoord在FS中计算世界坐标(渲染流水线矩阵变化的逆推)
今天有群友在交流群里问,如何根据gl_FragCoord在片元坐标中计算当前片元的世界坐标,因为能从顶点着色器传递到片元着色器,大家都没有在意这件事情,晚上正好无事也进行了一番探索,这是一个矩阵变换的逆过程。渲染管线中矩阵变换可参考我的这篇文章Webgl矩阵变换总结。 话不多说直接,上效果,估计有点蒙,解释一下,初始是红色立方体,然后过两秒,开始进行比对,gl_FragCoord在片元着色...原创 2020-01-06 23:32:39 · 1607 阅读 · 1 评论 -
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 · 4894 阅读 · 1 评论 -
顶点着色器插值输出到片元着色器的三种方式—— flat、noperspective 、smooth(透视矫正)
以OpenGL为例,在https://www.khronos.org/opengl/wiki/Type_Qualifier_(GLSL)上,可以看到三种插值的方式。图片截图不是很清楚,就简单说一下这几种吧。1. flat 该值不会被差值2.noperspective该值将在窗口空间中线性插值3.smooth该值将以透视校正的方式进行插值,这也是默认的插值方式...原创 2019-09-08 10:05:08 · 1746 阅读 · 0 评论 -
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 · 4544 阅读 · 1 评论 -
WebGL 2.0实现Vertex Array Objects(VAO,顶点数组对象)
在WebGL 2.0中,终于把VAO转正了。在WebGL 1.0中,可以通过拓展实现。Babylon.js引擎默认情况下,每次渲染都使用VAO完成。简单介绍下VAO,下面截取自《OpenGLES 3.0 Programming Guide》。In OpenGL ES 3.0, a new feature was introduced to make using vertex a...原创 2018-08-06 19:52:45 · 2933 阅读 · 0 评论 -
WebGL 2.0实现FrameBuffer Objects And RenderBuffer Objects 实现渲染到纹理,离屏渲染
WebGL 2.0 FrameBuffer And RenderBuffer 在学习WebGL过程中,有一种技术叫渲染到纹理,就是把每一帧画面再次处理渲染,并最为纹理,它能做好多高级效果的实现,如边缘检测,高斯模糊,SSAO等。渲染到纹理技术中最重要的就是FBO和RBO,接下来,我们来看看什么是FBO和RBO。 FB...原创 2018-05-22 21:40:26 · 2828 阅读 · 0 评论 -
WebGL 2.0
学习WebGL 2.0有一段时间了,今天分享一些WebGL 2.0的一些学习心得和学习资料。 这是WebGL的一些介绍,包括WebGL 1.0,WebGL 2.0的规范和: WebGL是基于OpenGL ES的低级3D图形API的跨平台,免版税的Web标准。熟悉OpenGL ES 2.0的开发人员将使用GLSL将WebGL识别为基于Shader的API,...原创 2018-05-01 23:14:25 · 8351 阅读 · 2 评论 -
WebGL矩阵变换总结(模型矩阵,视图矩阵,投影矩阵)
矩阵变换总结(模型矩阵,视图矩阵,投影矩阵) 最近在开发项目的时候,常常用到Three.js,用起来很方便。可是,当引擎迭代升级的时候,以前的很多的技巧,并不一定使用最新的引擎。我认为应当对底层的原生API有很深入的认识并掌握3D开发相关的数学知识才能成为一个合格的3D开发人员。最近在参与编辑WebGL2.0的书籍,也趁着这个机会好好学习下计算及图形学。...原创 2018-04-04 00:13:44 · 6222 阅读 · 0 评论 -
WebGL实现卡通风格着色器及物体描边效果实现(非真实质感)
卡通风格着色器及描边效果实现(基于WebGL 2.0实现)在开发过程中,我们并不总是以真实效果作为追求,最近在学习的过程中,看到了一些非真实质感的开发实现。本次带来一个球体的卡通效果及描边的demo。 先看一下效果图:接下来,简单的阐述一下其中的原理吧。 1.卡通风格的开发,首先需要对物体进行普通的光照计算,得到物体各个区域的的结果光照强度,...原创 2018-04-15 23:21:45 · 3668 阅读 · 0 评论