CODEWITHSUNDEEP
three.jsglslshader
johnhckuo
johnhckuo

Reputation: 365

How to fit noise shader into my plane geometry

The following link is my pen:

https://codepen.io/johnhckuo/pen/RxrXxX

And here is my code in fragment shader:

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    vec3 worldtoEye = eye - worldPosition;
    vec3 eyeDirection = normalize(worldtoEye);
    vec3 pos = vec3(st.x*5.0, st.y*5.0, u_time*0.5);
    color = vec3(fbm(pos) + 1.0);
    //color = vec3(noise(pos)*0.5 + 1.0);

    vec3 sunLight = vec3(1., 1., 1.);
    color *= (diffuseLight(sunLight) + specularLight(eyeDirection));

    vec3 oceanBlue = vec3(0.109, 0.419, 0.627);
    gl_FragColor = vec4(oceanBlue * color, 1.0);

}

Here is the code of plane geometry:

  var plane_geometry = new THREE.PlaneBufferGeometry( 2000, 2000, 32 );
  var customMaterial = new THREE.ShaderMaterial( 
    {
      uniforms: uniforms,
      vertexShader:   document.getElementById( 'vertexShader'   ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent

    }   
  );
  customMaterial.side = THREE.DoubleSide;
  var surface = new THREE.Mesh( plane_geometry, customMaterial );
  surface.position.set(0,0,0);
  scene.add( surface );

I've created a shader and tried to apply it onto my plane.

But whenever I zoom in/out, the shader since to be fixed to the screen and not zooming in/out correspondingly.

Any suggestions is appreciated !

Upvotes: 0

Views: 822

Answers (1)

Andy Ray
Andy Ray

Reputation: 32076

Change this line:

vec2 st = gl_FragCoord.xy/u_resolution.xy;

to

vec2 st = uVu.xy* 2.0;

and fiddle with 2.0 (the resolution)

It's also easy to test out vert + frag shaders on ShaderFrog, as in: https://shaderfrog.com/app/view/1997

Upvotes: 1

Related Questions