Skip to content

Instantly share code, notes, and snippets.

@nbriz
Last active May 19, 2020 15:38
Show Gist options
  • Save nbriz/53419c61260c1591b500 to your computer and use it in GitHub Desktop.
Save nbriz/53419c61260c1591b500 to your computer and use it in GitHub Desktop.
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="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 );
@daniel880420
Copy link

i followed the steps with this snippet but still not working . How can i get some helps?

@nbriz
Copy link
Author

nbriz commented May 19, 2020

@ daniel880420 are u getting any errors in ur JavaScript console in ur browser? it might just be the fact that this is pretty old now :/ there have been lots of updates to three.js since we made this project, it's probably worth a big update... one day... when there's time

@daniel880420
Copy link

@ daniel880420 are u getting any errors in ur JavaScript console in ur browser? it might just be the fact that this is pretty old now :/ there have been lots of updates to three.js since we made this project, it's probably worth a big update... one day... when there's time

here's my code wish u can check it if theres anything wrong,thanks!!!

<style> body { background-color: #ffffff; margin: 0; overflow: hidden; } </style>
	<script src="http://threejsplaygnd.brangerbriz.net/js/three.min.js"></script>
	<script src="http://threejsplaygnd.brangerbriz.net/js/Detector.js"></script>
	<script src="http://brangerbriz.net/labs/threejs_playGnd/js/ShaderToon.js"></script>
	<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
		
		var camera, scene, renderer;
		var geometry, material, mesh;

		function setup() {

			var W = window.innerWidth, H = window.innerHeight;
			renderer = new THREE.WebGLRenderer();
			renderer.setSize( W, H );
			document.body.appendChild( renderer.domElement );

			camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
			camera.position.z = 500;

			scene = new THREE.Scene();
			
			
			// paste your code from the geometryGUI here
			geometry = new THREE.CubeGeometry(200, 200, 200);
			material = createShaderMaterial( "dotted", directionalLight, ambientLight );
			material.uniforms.uBaseColor.value.setHex( 0x000000 );
			material.uniforms.uLineColor1.value.setHex( 0xff00ff );
			mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			directionalLight = new THREE.DirectionalLight(0xffffff);
			directionalLight.position.set( 0.96, 1.78, 0 );
			scene.add( directionalLight );

			ambientLight = new THREE.AmbientLight( 0x080808 );
			scene.add( ambientLight );

			

		}
		
		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;
			}

		function draw() {

			requestAnimationFrame( draw );
			
			// experiment with code from the snippets menu here

			renderer.render( scene, camera );

		}

		setup();
		draw();

	</script>
	
</body>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment