Some hints on getting ShaderFrog shaders into the framework

ShaderFrog is an online editor for creating shaders. It is one of many that exist. It has some particularly nice features in that it allows you to create new shaders by putting existing ones together. It also has a gallery of shaders that other people made.

This page gives you some hints on converting ShaderFrog shaders to work in the class software environment and THREE. We intend this to be an example of how to think about doing the conversion, rather than a specific endorsement of ShaderFrog.

Other shader development evironments, like ShaderToy focus on fragment shaders. With these, you need to provide your own fragment shader. Typically, these take a 2D point as their only input - so connect these to your varying of uv.

These hints are based on notes from Haochen Shi and Jerry Kou (the CS559 Peer Mentors).

Note: you are required to adapt a shader for part of Workbook 11. However, do not take shaders from other sources for the shaders you are supposed to write yourself.

Getting Shaders Out of ShaderFrog

Use the export to THREE feature in ShaderFrog to get a shader out of ShaderFrog. We have never tried using the “Include Three.js lighting information” option (since you need a paid account). Many of the ShaderFrog shaders provide simple lights where the configuration is provided as uniforms, which is sufficient for class things.

When you export a shader from ShaderFrog it puts it into a .json file. This contains everything: the list of uniforms, the attribution information, and the source code for the shaders.

ShaderFrog provides a library for reading in these JSON files, however we don’t recommend it: it’s for an old version of THREE, and you will probably need to tweak the shaders anyway. Instead, we’ll manually pull the shaders out of this JSON file.

Open the .json file and have a look.

To get the shader source code, copy the string from the JSON file. Note that it replaces the line breaks with “\n”. You need to convert these to newlines. One way to do this is to print the string in the browser console. For example:

console.log("line1\nline2\nline3");
line1
line2
line3

Put the string of the shader source instead of line1, …

You can then copy the program text into files that you can load in your program.

Note: it is important to get the shaders into “human readable” form (with newlines) since you will need to read and edit them.

Adapt the Shader for the Framework

ShaderFrog’s shaders are designed to work with THREE - so the conversion is relatively straightforward.

The biggest aspect of conversion is the connection to the JavaScript program: the uniforms and attributes.

Look at the shaders and see what uniforms and attributes you need.

Observe which attributes and uniforms are provided by THREE. Look at the THREE docs. Some of the things that THREE provides are automatically declared (such as modelViewMatrix). Some of the things you need to declare yourself (most things in the fragment shader). Be warned: many things that THREE declares are only declared in the vertex shader - if you want them in the fragment shader you need to declare them yourself.

Make sure that the shaders declare the uniforms and attributes they use - unless THREE automatically adds the declaration for you.

Declare the uniforms in JavaScript

For the uniforms that are not provided by THREE, you will need to pass them from JavaScript using the uniforms property of the ShaderMaterial. The .json file from THREE provides this information in a pretty convenient form that is compatible with THREE. However, you probably need to adjust things. Copy over the uniforms from the .json as a starting point.

For some of the uniforms, you will need to come up with proper values. For example, if there is a time parameter, you will need to set it from your object’s tick function.

For uniforms that are textures, you will need to set these up. You’ll have to write load the texture and assign it to the values.

Getting the texture files from ShaderFrog

Unfortunately, ShaderFrog doesn’t export the image files for textures. To get the image, you’ll need to download it. We didn’t find any easy way.

One thing that works: use the browser’s tracing tools on ShaderFrog and see what ShaderFrog loads. Open the Chrome developer tools, pick the “Network” tab (that shows you all the files a page loads), and reload the ShaderFrog page with the shader on it. You’ll see jpeg and png images. If you click on them, you can preview it to check that you’ve found the right one. In the preview, you can right click to “save”.

Once you have the images, you need to have your JavaScript program load the image as a texture, and assign it to a uniform.

Some other catches

If the vertex shader moves vertices around, make sure your object has enough vertices. For example, if you are applying a displacement map shader to a sphere, make sure the sphere is subdivided into enough small triangles.

You may want to add sliders or other ways to control the uniforms.