三个js - 用于后处理的基本着色器

我一直在试图编写一个简单的着色器来添加噪声。但我无法使用以下设置获取uv坐标。三个js - 用于后处理的基本着色器

片段着色器：

uniform float seed; 
uniform sampler2D pass; 

varying vec2 vUv; 

void main(){ 
    //noise 
    vec2 pos = gl_FragCoord.xy; 
    pos.x *= seed; 
    pos.y *= seed; 
    float lum=fract(sin(dot(pos ,vec2(12.9898,78.233))) * 434658.5453116487577816842168767168087910388737310); 

    vec4 tx = texture2D(pass, vUv); 

    gl_FragColor = vec4(tx.r*lum,tx.g*lum,tx.b*lum,1.0); 

}

顶点着色器：

varying vec2 vUv; 

void main(){ 
    vUv = uv; 
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); 
}

渲染：

OBJECT.material = OBJECT.mat.flat; // THREE MeshPhongMaterial ({color: 0xE40D59,shading:THREE.FlatShading}); 

RENDERER.render(SCENE,CAMERA,BEAUTY_PASS,false); 

OBJECT.material = OBJECT.mat.noise; // THREE ShaderMaterial 

RENDERER.render(SCENE,CAMERA);

我得到以下错误：

Error: WebGL: DrawElements: bound vertex attribute buffers do not have sufficient size for given indices from the bound element array @ http://threejs.org/build/three.min.js:439

我做了一些测试，我可以通过挑选同一坐标所有像素

vec4 tx = texture2D(pass, vec2(0.5,0.5));

与微红嘈杂的颜色显示我的对象运行它，但真空紫外可变工作完全正常，如果我删除第一渲染通过（RENDERER.render(SCENE,CAMERA,BEAUTY_PASS,False)）。

为什么我无法在第二个渲染上获得uv坐标？根据几个例子，我应该能够使用像这样的相同的场景和相机来呈现它example

来源

2013-05-27 Shake0

如果没有初始纹理，几何将不具有必要的烘焙WebGL UV缓冲区。

有几种解决方案，但最简单的方法是确保网格的第一个渲染具有纹理。一个简单的白色会做。

three.js r.58

来源

2013-05-27 05:08:19 WestLangley

谢谢！在第一次渲染中使用白色纹理，它实际上解决了问题并保持了uv坐标。但是现在我的二十面体是马铃薯。你认为这是由于原始的UV映射？ – Shake0

这可能是您的照明模型，与此问题无关。你能否为新的问题发表一个新帖子 – WestLangley

三个js - 用于后处理的基本着色器

回答

相关问题