对 three.js webgl_clipping_stencil 例子的理解

three.js 中的官方例子 webgl_clipping_stencil 着实费解，我在不同的时间看了有三次以上，才逐渐理解。

概括的讲：这个例子是在说如何使用webgl stencil 模板缓存来对几何网格进行裁切。对几何网格进行裁切有三种方式了：

自己开发切割工具，对网格进行切割，对网格的顶点进行分割，在切割边缘处新增顶点和三角面
shader 中的片元着色器绘制几何体，在片元着色器中进行裁切，csg技术（Constructive Solid Geometry）
使用模板缓存，就是例子中的方法
第三种是最取巧的一种办法，没有像第一种实实在在的修改了几何网格，也没有像第二种涉及到片元着色器的编写。

这个例子中，有意思的一点是，隐藏网格还可以这样做：

baseMat.colorWrite = false;

就是修改材质，不让材质写入颜色缓存。

模板缓存位于屏幕空间，createPlaneStencilGroup 方法使用纽结几何网格对模板缓存进行写入，朝向相机的像素减去1，被向相机的像素加上1；

createPlaneStencilGroup 中的代码

mat0.clippingPlanes = [ plane ];

用平面切割纽结几何网格后，会有这样的像素，只背向当前相机，没有朝向相机，这时该像素对应的模板缓存的值为 1；另外，还有很多这样的像素，既朝向相机，又背对着相机，这时该像素对应的模板缓存是0；
想象一下，有很多光线，从相机位置发出，射向屏幕的各个像素，对于这些射线，有点穿过纽结几何网格两次，有的没有穿过纽结几何网格零次，有点正好只穿过纽结几何网格一次，只穿过一次这种，对应的屏幕像素的模板值就是 1 或者 -1

init方法中调用了 createPlaneStencilGroup() 之后，紧接着创建了平面网格，也是对模板缓存进行修改

const planeMat =new THREE.MeshStandardMaterial( {color: '#E91E63',metalness: 0.1,roughness: 0.75,clippingPlanes: planes.filter( p => p !== plane ),stencilWrite: true,stencilRef: 0,stencilFunc: THREE.NotEqualStencilFunc,stencilFail: THREE.ReplaceStencilOp,stencilZFail: THREE.ReplaceStencilOp,stencilZPass: THREE.ReplaceStencilOp,} );

stencilRef 和 stencilFunc 两个属性很重要，表示模板值不为0的通过测试，渲染到屏幕；平面网格如果始终把 1 写入模板，那么通常情况下，屏幕上显示出一个四边形（矩形投影到地面一般也是四边形）

渲染顺序在这里非常非常重要，一定要保证纽结几何网格先绘制，先修改模板缓存，平面网格后绘制，后修改模板缓存，这样相机始终可以看到纽结几何网格的截断面

如果，把代码中的

createPlaneStencilGroup( geometry, plane, i + 1 )

修改为

createPlaneStencilGroup( geometry, plane, i + 2 )

而

po.renderOrder = i + 1.1;

保持不变。
这样平面网格先修改模板缓存，纽结几何网格后修改模板缓存，显示的画面就完全乱套了

const clippedColorFront = new THREE.Mesh( geometry, material );clippedColorFront.castShadow = true;clippedColorFront.renderOrder = 6;object.add( clippedColorFront );

以上代码，注释掉后，只显示三个截断面

对 three.js webgl_clipping_stencil 例子的理解相关推荐

js回调函数的理解(轉)
js回调函数(callback)理解Mark!讲之前说一句function say(){alert(,,,,,,,,)}var say=function (){alert(,,,,,,,)}var s ...
Js面向对象的程序设计——理解对象
Js面向对象的程序设计 Js面向对象的程序设计理解对象属性类型 Js面向对象的程序设计理解对象示例 : var person=new Object(); person.name="N ...
Js模块化开发的理解
Js模块化开发的理解模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
西门子for循环例子_理解JavaScript中的循环缺陷和迭代协议
如果您已经用JavaScript或任何语言编程了一段时间,for-循环对你来说不应该陌生.您没有注意到许多编程语言,包括JavaScript,已经从使用for-循环使用迭代器-返回给定集合的下一项的对 ...
理解Babel是如何编译JS代码的及理解抽象语法树(AST）
Babel是如何编译JS代码的及理解抽象语法树(AST) 1. Babel的作用是? 很多浏览器目前还不支持ES6的代码,但是我们可以通过Babel将ES6的代码转译成ES5代码,让所有的浏览器 ...
JS中setter/getter理解
JS中setter/getter理解 JS对象属性 get/set和getter/setter 数据属性 Object.defineProperty() 访问器属性 getter/setter创建及删 ...
php正则换成js正则,php正则替换_php使用正则替换过滤掉js脚本例子
摘要腾兴网为您分享:php使用正则替换过滤掉js脚本例子,榛果民宿,掌上书院,夜读小说,学堂里等软件知识,以及中辉期货,车易行违章,孢子,必应壁纸app,鲁证期货,dota26.88,ip摄像头ap ...
Js函数function基础理解
正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法.因此,函数名实际上是指向函数对象的指针,不与某个函数绑定.在常见的两种定 ...
three.js webgl_tiled_forward 例子分析
three.js 中 webgl_tiled_forward 是比较难理解的一个官方样例,我第一次看时,看得一头雾水,看得快睡着了,比较枯燥... 这个例子,就是展示场景中有多个光源时,如何提升渲染 ...

对 three.js webgl_clipping_stencil 例子的理解

对 three.js webgl_clipping_stencil 例子的理解相关推荐

最新文章

热门文章