threejs custom shader example

by enbette

HTML

<script 
src="https://ajax.googleapis.com/ajax/libs/threejs">
</script>
<script id="vertShader" type="text/v-shader">
    varying vec2 vUv;
uniform float delta;
uniform float scale;
uniform float alpha;

void main()
{
    vUv = uv;
    vec3 p = position;
    p.z += sin(2.0 * p.y + delta) * 5.0;
    p.z += cos(2.0 * p.z + delta / 2.0) * 5.0;
    p.z += cos(2.0 * p.x + delta) * 5.0;
    p.x += sin(p.y + delta / 2.0) * 10.0;
    vec4 mvPosition = modelViewMatrix * vec4(scale * p, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
}
</script>

<script id="fragShader" type="text/f-shader">
#ifdef GL_ES
precision highp float;
#endif

uniform float delta;
uniform float alpha;
varying vec2 vUv;        

void main(void)
{
    vec2 position = vUv;
    float red = 1.0;
    float green = 0.25 + sin(delta) * 0.25;
    float blue = 0.0;
    vec3 rgb = vec3(red, green, blue);
    vec4 color = vec4(rgb, alpha);
        
    gl_FragColor = color;
}
</script>

JavaScript

var container, stats;

var camera, scene, renderer;

var cube, plane;


function init() {

    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 150;
    camera.position.z = 500;
    scene.add(camera);
    
    renderer = new THREE.WebGLRenderer({clearColor: 0x000000, clearAlpha: 0});
    renderer.setSize(window.innerWidth, window.innerHeight);

    //these should reference their respective shaders
    vertShader = document.getElementById('vertShader').innerHTML;
    fragShader = document.getElementById('fragShader').innerHTML;
    attributes = {};

    uniforms = {
        delta: {
            type: 'f',
            value: 0.0
        },
        scale: {
            type: 'f',
            value: 1.0
        },
        alpha: {
            type: 'f',
            value: 1.0
        }
    };

    material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        attributes: attributes,
        vertexShader: vertShader,
        fragmentShader: fragShader,
        transparent: true
    });

    //create sphere geometry and apply our new material
    var sphere = new THREE.Mesh(new THREE.SphereGeometry(3000, 20, 20), material);

    //update the delta value on an interval, 
    //we could also alter other values like alpha or scale

    function update() {
        uniforms.delta.value += 0.1;
        renderer.render(scene, camera);
    }

    //set the interval
    setInterval(update, 100);

}

init();