I have tested out both Three.js and Babylon.js for generating simple WebGL scenes. So it is time to share some Babylon.js related examples.

Simple pixel shader

When I want simple shader, I do not mean one color dot. I usually want both UV coordinates + some kind of time to be feeded to the shaders.

Following image is a still picture from running shader that animates noise with pixel / fragment shader Shader still

And you can test out the scene in your browser, but it seems it does not render correctly with mobile devices.

Notes

  • Vertex shader is defined in vertexShaderCode and it does not do anything special, it just forwards the UV coordinates to Pixel shader
  • Pixel shader is defined in fragmentShaderCode. It has a float rand(float n) function for generating not so random floating point values. Also Pixel shader takes time as a input, and it is used to animate the noise.
  • Babylon.js scene creation part just adds a camera, creates the shadermaterial, creates a cube/box, joins the shadermaterial to cube/box and makes an animation function that increases time before scene is rendered

Using separate script sections for shaders is not the only way to do this. You can also use separate files for shaders or something that is called BABYLON.Effect.ShadersStore. If you want more info about this then check out Shader Material part from Babylon.js guide.

Source code

Below is full source code for the sample. You need working internet connection for testing since scripts hand.minified-1.2.js and babylon.js live in babylonjs.com