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的美丽.

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...