浅谈three.js中的needsUpdate的应用

2019-01-28 20:05:21王振洲

视频纹理
大部分纹理都是像上面那个case直接加载和传输一次图片就行了,但是对于视频纹理来说并不是,因为视频是一个图片流,每一帧要显示的画面都不一样,所以每一帧都需要将needsUpdate设为true来更新显卡中的纹理数据。
使用render buffer
render buffer是比较特殊的对象,一般的程序在整个场景绘制出来后都是直接flush到屏幕了,但是如果多了post processing或这screen based xxx(例如screen based ambient occlusion)的话,就需要将场景先绘制到一个render buffer上,这个buffer其实就是一张纹理,只不过是上一步绘制生成的,而不是从磁盘加载的。three.js中有一个专门的texture对象WebGLRenderTarget来初始化和保存renderbuffer, 这种纹理也需要在每一帧设置一下needsUpdate为true
Material的needsUpdate
材质在three.js中是通过THREE.Material来描述的,其实材质并没有什么数据要传输,但是为什么还要搞一个needsUpdate呢,这里还要说一下shader这个东西,shader直译过来是着色器,提供了在gpu中编程处理顶点和像素的可能性,在绘画中有个shading的术语来表示绘画的明暗法,GPU中的shading也类似,通过程序计算光照的明暗来表现物体的材质,ok, 既然shader是一段跑在GPU上的程序,那么像所有程序一样都需要进行一次编译链接的操作, WebGL中是在运行时对shader程序进行编译的,这当然需要消耗时间,因此也是最好能够一次编译就运行到程序结束。所以three.js中就在material初始化的时候就编译链接了shader程序并且缓存了编译链接后得到的program对象。一般一个material是不需要再去重新编译整个shader了,材质的调整只需要修改shader的uniform参数就行了。但是如果是替换了整个材质,比如将原来phong的shader替换成了一个lambert的shader,就需要将material.needsUpdate设置成true去重新做一次编译。不过这种情况不多见,更常见的是下面提到的一种情况。
添加和删除灯光
这个应该还是在场景中比较常见了的吧,可能很多刚开始用three.js的人都会掉进这个坑里,在给场景动态添加了一个灯光后发现这个灯光怎么不起作用,不过这是在用three.js内置的shader的情况下,例如phong, lambert,看renderer里的源代码就会发现three.js在内置的shader代码中使用#define来设置场景中灯光的个数,而这个#define的值是在每次更新材质的时候通过字符串拼接shader得到,代码如下

复制代码

"#define MAX_DIR_LIGHTS " + parameters.maxDirLights,
"#define MAX_POINT_LIGHTS " + parameters.maxPointLights,
"#define MAX_SPOT_LIGHTS " + parameters.maxSpotLights,
"#define MAX_HEMI_LIGHTS " + parameters.maxHemiLights,

确实这种写法能够有效的减少了gpu寄存器的使用,如果只有一盏灯光就可以只声明一个一盏灯光所需要的uniform变量,但是在每次灯光数量改变,特别是添加的时候就需要重新拼接编译链接一次shader,这时候也需要将所有材质的material.needsUpdate设为true;