51 |
52 | Runtime demo for
ShaderFrog.com online WebGL shader editor. View source of this page or see
example.js.
53 |
Repository:
Github source
54 |
55 |
56 |
Relevant Source
57 |
// Load multiple ShaderFrog shaders
58 | runtime.load([
59 | 'Copy_of_Gems.json',
60 | 'Water_or_Oil.json'
61 | ], function( shaders ) {
62 |
63 | // `shaders` will be an array with the material data in the same order you
64 | // specified when calling `load
65 |
66 | // Get the Three.js material you can assign to your objects
67 | // ShaderFrog shader 1 (reflection effect)
68 | var materialTop = runtime.get( shaders[ 0 ].name );
69 |
70 | // You set uniforms the same way as a regular THREE.js shader. In this
71 | // case, the shader uses a cube camera for reflection, so we have to set
72 | // its value to the renderTarget of a cubeCamera we create
73 | materialTop.uniforms.reflectionSampler.value = cubeCamera.renderTarget;
74 | meshTop.material = materialTop;
75 |
76 | // ShaderFrog shader 2 (oily effect)
77 | var materialBottom = runtime.get( shaders[ 1 ].name );
78 | meshBottom.material = materialBottom;
79 | });
80 |