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() {
Search WWH ::




Custom Search