我想在片段着色器中执行图像计算.我发现了很多例子,几乎这样做:
>着色器材料:http://mrdoob.github.io/three.js/examples/webgl_shader2.html此示例显示在片段着色器中执行的图像操作,但该着色器用作整个材质的片段着色器.我只想在纹理上使用着色器,然后使用纹理作为第二个材质的一个组件.
>渲染纹理:https://threejsdoc.appspot.com/doc/three.js/examples/webgl_rtt.html这将显示将整个场景渲染到WebGLRenderTarget,并将其用作素材中的纹理.我只想预处理一个图像,而不是渲染整个场景.
>效果作曲者:http://www.airtightinteractive.com/demos/js/shaders/preview/这将显示将着色器作为后期处理应用于整个场景.
编辑:另一个:
>渲染到另一个场景:http://relicweb.com/webgl/rt.html此示例在Three.js Retrieve data from WebGLRenderTarget (water sim)中引用,使用具有自己的正交相机的第二个场景将动态纹理呈现给WebGLRenderTarget,然后将其用作主场景中的纹理.我想这是上面列出的第一个“渲染到纹理”示例的特殊情况,可能适用于我,但似乎过于复杂.
据了解,理想情况下,我可以使用自己的片段着色器制作一个新的framebuffer对象,并将其作为另一个素材片段着色器的纹理统一使用.这可能吗?
编辑2:看起来我可能会问类似的事情:Shader Materials and GL Framebuffers in THREE.js …虽然这个问题似乎没有被解决.
解决方法
在vanilla WebGL中,您做这样的事情的方式是从头开始创建一个framebuffer对象(FBO),将纹理绑定到它,并使用您选择的着色器进行渲染.像“场景”和“摄像机”这样的概念不涉及,这是一个复杂的过程.这里有一个例子:
http://learningwebgl.com/blog/?p=1786
但是,当您使用相机渲染场景时,Three.js本质上也是这样:渲染器输出到帧缓冲区,其基本用法直接进入屏幕.所以如果你指示它渲染到一个新的WebGLRenderTarget,你可以使用任何相机看作为第二个材料的输入纹理.所有复杂的东西仍然在发生,但幕后,这是Three.js的美丽.