Graphics Reference
In-Depth Information
uniforms.scale = {type: 'f', value:
1.0};
In this code snippet, we first
merge
the standard uniforms that are by the
fragment shader we reuse, we set a texture, and the last two uniforms are
the ones we access in our own custom vertex shader, as we'll see later on.
3. Now, we can define
THREE.ShaderMaterial
and tell Three.js the shaders
that we want to use:
var defines = {};
defines[ "USE_MAP" ] = "";
var material = new
THREE.ShaderMaterial({
defines: defines,
uniforms: uniforms,
vertexShader: document
getElementById('sinusVertexShader').text,
fragmentShader:
basicShader.fragmentShader
});
In this code snippet, you can see that we reference the
uniform
value we
saw in step 2, as
fragmentShader
we use
basicShader
from step 1, and
for the
vertexShader
parameter, we reference our custom shader, which
we'll define in the next step. Note that we also provide a
defines
element;
this is needed to make sure Three.js shows our texture.
4. At this point, we can define our own custom vertex shader. We do this directly
in the HTML as follows:
<script id="sinusVertexShader"
type="x-shader/x-vertex">
varying vec2 vUv;
uniform float delta;
uniform float scale;
void main() {