-
-
Save nbriz/53419c61260c1591b500 to your computer and use it in GitHub Desktop.
dither or 'dotted' shading, for threejs_playGnd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------- 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="http://brangerbriz.net/labs/threejs_playGnd/js/ShaderToon.js"></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
here's my code wish u can check it if theres anything wrong,thanks!!!
<style> body { background-color: #ffffff; margin: 0; overflow: hidden; } </style>