Please file ShaderFrog.com bugs here!
The current ShaderFrog site and engine is in maintenence mode only. The core engine and compiler are buggy and I haven't actively developed on the current version of ShaderFrog in several years now. Due to buggy and fundamentally flawed core nature of ShaderFrog, I'm no longer actively working on it. I apologize for any frustration the bugs or lack of support have caused to your development process.
Instead, I'm working on a new version of the algorithm, Shaderfrog 2.0, starting with a ground up build of a GLSL compiler. I post updates when I have them as @andrewray on Twitter if you want to follow along. There is no ETA on a new launch date. As of October 2021, I've made significant progress on ShaderFrog 2.0, and I hope to keep posting regular updates and share demos as soon as I have them.
This is a utility library to load and update ShaderFrog.com shaders into your THREE.js scene or application.
Demo source found in the example/ folder.
npm install --save shaderfrog-runtime
var ShaderFrogRuntime = require( 'shaderfrog-runtime' ):
Download the built Javascript file and include it in your project after THREE.js:
<script src="shaderfrog-runtime.min.js"></script>
Instantiate a new runtime:
var runtime = new ShaderFrogRuntime();
Instantiate a new clock:
var clock = new THREE.Clock();
Load your desired shader, and assign it to a material:
runtime.load( 'Your_Shader.json', function( shaderData ) {
// Get the Three.js material you can assign to your objects
var material = runtime.get( shaderData.name );
// Assign it to your objects
mesh.material = material;
});
In your initialization code, register the main camera, which is the one that you call renderer.render( scene, camera ) with:
runtime.registerCamera( camera );
This tells the ShaderFrog runtime how to update the cameraPosition uniform, which some shaders use to calculate things based on the camera, like reflection.
In your animation loop, update the running shaders that the ShaderFrog runtime knows about:
runtime.updateShaders( clock.getElapsedTime() );
A full example can be found in the example/ folder.
Warning: This API is volatile and subject to change in future versions.
Tells the runtime to use this camera's position for the default cameraPosition uniform. This uniform is normally passed by default in THREE.js to shader materials, but ShaderFrog shaders use the RawSahderMaterial class.
Update uniform values for shaders, specifically float time, vec3 cameraPosition, and mat4 viewMatrix. The only uniform the runtime cannot define is time which should be provided by the elapsed time in milliseconds. THREE.Clock.getElapsedTime() provies this value.
Call this function with either:
runtime.load( 'material.json', function( material ) ) {
var shader = runtime.get( material.name ); ...
}
...for one material, or...
runtime.load( [ 'material1.json', 'material2.json' ], function( materials ) ) {
var shader = runtime.get( materials[ 0 ].name ); ...
}
Load the specified URLs and parse them into materials. If you pass in an array of URLs, the callback receives an array of materials in the same order you specified.
If your shader data is already loaded in JSON form by some other means, you can add it to the runtime's repository of known shaders with this method.
The ShaderFrog runtime stores materials by name. This function returns a new instance of the material you have loaded. You can assign this new material to your object, update uniforms on it, etc.
ShaderFrog requires a shader file format to transfer all neccessary shader data from the editor to the end user. A proposed JSON format is discussed in THREE_SHADER_FORMAT.md.
To install the dependencies:
git clone https://github.com/AndrewRayCode/ShaderFrog-Runtime
npm install
To build the distributable Javascript file:
npm run build