ShaderFrog.com Runtime Demo

Runtime demo for ShaderFrog.com online WebGL shader editor. View source of this page or see example.js.

Repository: Github source

Relevant Source

// Load multiple ShaderFrog shaders
runtime.load([
    'Reflection_Cube_Map.json',
    'Water_or_Oil.json'
], function( shaders ) {

    // `shaders` will be an array with the material data in the same order you
    // specified when calling `load

    // Get the Three.js material you can assign to your objects
    // ShaderFrog shader 1 (reflection effect)
    var materialTop = runtime.get( shaders[ 0 ].name );

    // You set uniforms the same way as a regular THREE.js shader. In this
    // case, the shader uses a cube camera for reflection, so we have to set
    // its value to the renderTarget of a cubeCamera we create
    materialTop.uniforms.reflectionSampler.value = cubeCamera.renderTarget;
    meshTop.material = materialTop;

    // ShaderFrog shader 2 (oily effect)
    var materialBottom = runtime.get( shaders[ 1 ].name );
    meshBottom.material = materialBottom;
});