Create a gist now

Instantly share code, notes, and snippets.

@nbriz /ditherShader.js Secret
Last active Dec 18, 2015

What would you like to do?
dither or 'dotted' shading, for threejs_playGnd
/* ------------------- INSTRUCTIONS -----
to shade your scene 'dithered' or 'dotted'
you must first add this shader file to your HTML page
add the following tag belelow the Detector.js
which is on line 16
-------------------------------------- */
<script src=""></script>
/* --------------------------------------
then add the following createShaderMaterial() function
between your setup() function and your
draw() function
-------------------------------------- */
function createShaderMaterial( id, light, ambientLight ) {
var shader = THREE.ShaderToon[ id ];
var u = THREE.UniformsUtils.clone( shader.uniforms );
var vs = shader.vertexShader;
var fs = shader.fragmentShader;
var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
material.uniforms.uDirLightPos.value = light.position;
material.uniforms.uDirLightColor.value = light.color;
material.uniforms.uAmbientLightColor.value = ambientLight.color;
return material;
/* --------------------------------------
then create your mesh
and replace "material = new THREE.Mesh..."
with the code below
-------------------------------------- */
material = createShaderMaterial( "dotted", directionalLight, ambientLight );
material.uniforms.uBaseColor.value.setHex( 0x000000 );
material.uniforms.uLineColor1.value.setHex( 0xff00ff );
/* --------------------------------------
you can change the color of the dots by changing
the hex values of uBaseColor and uLineColor1
you can also change "dotted" to "hatching"
NOTE: this material requires lights, notice the code above
references two lights after "dotted"
make sure to include the lights (code below)
in your setup() function
-------------------------------------- */
directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set( 0.96, 1.78, 0 );
scene.add( directionalLight );
ambientLight = new THREE.AmbientLight( 0x080808 );
scene.add( ambientLight );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment