Three js - basic shader for postprocessing

Question

I have been trying to write a simple shader for adding noise. But I can't get the uv coordinates with the following settings.

Fragment Shader:

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);

}

Vertex Shader:

varying vec2 vUv;

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

Rendering:

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);

I get the following error:

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

I did some tests and I can run it by picking the same coordinate for all the pixel

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

which display my object with a reddish noisy color, however the vUv variable works perfectly fine if I remove the first rendering pass (RENDERER.render(SCENE,CAMERA,BEAUTY_PASS,False)).

Why I can't get the uv coordinate on the second render? According to several examples I should be able to render it using the same scene and camera like in this example

WestLangley · Accepted Answer · 2013-05-27 05:08:19Z

1

Without an initial texture, the geometry will not have the necessary baked-in WebGL UV buffers.

There are several solutions, but perhaps the easiest is to be sure that the first rendering of the mesh has a texture. A simple white one will do.

three.js r.58

answered May 27, 2013 at 5:08

WestLangley

105k11 gold badges288 silver badges285 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shake0 Over a year ago

Thanks! Using a white texture in the first render,it actually solves the problem and keeps the uv coordinates. However now my icosahedron is a potato. Do you think this is due to the original uv mapping?

WestLangley Over a year ago

It's likely your lighting model, and unrelated to this question. Can you make a new post for the new issue

Collectives™ on Stack Overflow

Three js - basic shader for postprocessing

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related