Three.js使用framebuffer作为纹理

前端之家收集整理的这篇文章主要介绍了Three.js使用framebuffer作为纹理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在Three.js中使用canvas元素中的图像作为纹理,使用 JavaScript在画布上执行图像操作,然后在纹理上调用needsUpdate().这是有效的,但是相当慢.

我想在片段着色器中执行图像计算.我发现了很多例子,几乎这样做:

>着色器材料: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的美丽. 原文链接:https://www.f2er.com/js/151517.html

猜你在找的JavaScript相关文章