CODEWITHSUNDEEP
javascriptthree.js
ZoEM
ZoEM

Reputation: 852

Calling a shader color efficiently

I am working with shaders in Three.js for the first time and I can't tweak some of the code that is essential to it, other than just change the RGBA. For example I can't place it inside a .html() method. What I'm going for is applying 10 different shader colors. 

varying vec3 vNormal;
void main() {
  float intensity = pow( 0.4 - dot( vNormal, vec3( 0.0, 0.0, 1.0 ) ), 4.0 );
  gl_FragColor = vec4( 0, 0, 255, 1.0 ) * intensity; }
  //gl_FragColor = vec4( 0, 0, 255, 1.0 ) is the RGBA value
}

As of right now, I can't do anything with that line that I found but just to let it untouched so it'll work. I can only copy the ID on its script tag, tweak the RGBA code and refer it to different <script> elements. But I don't want to do that ten times. My code needs to be efficient.

The entire code necessary is inside this fiddle. How can and would you change that code so you can easily call a shader color?

Upvotes: 0

Views: 105

Answers (1)

2pha
2pha

Reputation: 10165

You need to add a uniform for the colour.
HERE you can see the first one I did when starting with Three.js shaders.
but basically it's something like...

HTML/shaders:

<script id="vertexShader" type="x-shader/x-vertex">
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 diffuse;
void main() {
  gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0);
}
</script>

Create the shader in JS...

var uniforms = {
  diffuse: { type: "c", value: new THREE.Color(0xeeeeee) }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial({
  uniforms : uniforms,
  vertexShader : vertexShader,
  fragmentShader : fragmentShader,
});

To change the color, change uniforms.diffuse.value.

My example does not include your vNormal and intensity, but you get the idea.
Also, I have my shaders in HTML, but they obviously could just be javascript variables/Strings.

Check this version of your fiddle

You may find THIS page of other experiments of mine interesting.

Upvotes: 1

Related Questions