Graphics Reference
In-Depth Information
"texSize": { type: "v2", value:
new THREE.Vector2( 50, 50 ) },
"center": { type: "v2", value:
new THREE.Vector2( 0.5, 0.5 ) },
},
vertexShader:
document.getElementById('hexagonVertexShader').text,
fragmentShader:
document.getElementById('hexagonFragmentShader').text
};
var effect = new THREE.ShaderPass(
customShader );
effect.renderToScreen = true;
composer.addPass( effect );
We pass in
customShader
as an argument to
THREE.ShaderPass
. This
customShader
object contains the configuration of our custom shader. The
uniforms
objects are the variables we pass into our custom shader, and
vertexShader
and
fragmentShader
point to our shader programs.
3. Let's first look at
vertexShader
from step 2:
<script id="hexagonVertexShader"
type="x-shader/x-vertex">
varying vec2 texCoord;
void main() {
texCoord = uv;
gl_Position = projectionMatrix *
modelViewMatrix * vec4( position, 1.0 );
}
</script>
This is a simple vertex shader that doesn't change anything related to the
output. The only thing to notice in this shader code is that we pass the
coordinate that we're working on (
uv
, which is automatically passed in by
Three.js) to the fragment shader as a
varying
value with the
texCoord
name.
