javascript
/
three.js
zrkadlo https://github.com/tazdij/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgl - raymarching - reflect</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style type="text/css">
			body {
				background-color: black;
				margin: 0;
				padding: 0;
			}

			a { color: skyblue }

			canvas {
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}

			#info {
				color: white;
				font-size: 13px;
				position: absolute;
				bottom: 10px;
				width: 100%;
				text-align: center;
				z-index: 100;
			}
		</style>
	</head>
	<body>

		<div id="info">
			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl raymarching example -
			reflect by <a href="https://github.com/gam0022" target="_blank" rel="noopener">gam0022</a> (<a href="http://qiita.com/gam0022/items/03699a07e4a4b5f2d41f" target="_blank" rel="noopener">article in Japanese</a>)
		</div>

		<script id="fragment_shader" type="x-shader/x-fragment">

			precision highp float;

			uniform vec2 resolution;

			uniform mat4 viewMatrix;
			uniform vec3 cameraPosition;

			uniform mat4 cameraWorldMatrix;
			uniform mat4 cameraProjectionMatrixInverse;

			const float EPS = 0.01;
			const float OFFSET = EPS * 100.0;
			const vec3 lightDir = vec3( -0.48666426339228763, 0.8111071056538127, -0.3244428422615251 );

			// distance functions
			vec3 opRep( vec3 p, float interval ) {

				vec2 q = mod( p.xz, interval ) - interval * 0.5;
				return vec3( q.x, p.y, q.y );

			}

			float sphereDist( vec3 p, float r ) {

				return length( opRep( p, 3.0 ) ) - r;

			}

			float floorDist( vec3 p ){

				return dot(p, vec3( 0.0, 1.0, 0.0 ) ) + 1.0;

			}

			vec4 minVec4( vec4 a, vec4 b ) {

				return ( a.a < b.a ) ? a : b;

			}

			float checkeredPattern( vec3 p ) {

				float u = 1.0 - floor( mod( p.x, 2.0 ) );
				float v = 1.0 - floor( mod( p.z, 2.0 ) );

				if ( ( u == 1.0 && v < 1.0 ) || ( u < 1.0 && v == 1.0 ) ) {

					return 0.2;

				} else {

					return 1.0;

				}

			}

			vec3 hsv2rgb( vec3 c ) {

				vec4 K = vec4( 1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0 );
				vec3 p = abs( fract( c.xxx + K.xyz ) * 6.0 - K.www );
				return c.z * mix( K.xxx, clamp( p - K.xxx, 0.0, 1.0 ), c.y );

			}

			float sceneDist( vec3 p ) {

				return min(
					sphereDist( p, 1.0 ),
					floorDist( p )
				);

			}

			vec4 sceneColor( vec3 p ) {

				return minVec4(
					// 3 * 6 / 2 = 9
					vec4( hsv2rgb(vec3( ( p.z + p.x ) / 9.0, 1.0, 1.0 ) ), sphereDist( p, 1.0 ) ),
					vec4( vec3( 0.5 ) * checkeredPattern( p ), floorDist( p ) )
				);

			}

			vec3 getNormal( vec3 p ) {

				return normalize(vec3(
					sceneDist(p + vec3( EPS, 0.0, 0.0 ) ) - sceneDist(p + vec3( -EPS, 0.0, 0.0 ) ),
					sceneDist(p + vec3( 0.0, EPS, 0.0 ) ) - sceneDist(p + vec3( 0.0, -EPS, 0.0 ) ),
					sceneDist(p + vec3( 0.0, 0.0, EPS ) ) - sceneDist(p + vec3( 0.0, 0.0, -EPS ) )
				));

			}

			float getShadow( vec3 ro, vec3 rd ) {

				float h = 0.0;
				float c = 0.0;
				float r = 1.0;
				float shadowCoef = 0.5;

				for ( float t = 0.0; t < 50.0; t++ ) {

					h = sceneDist( ro + rd * c );

					if ( h < EPS ) return shadowCoef;

					r = min( r, h * 16.0 / c );
					c += h;

				}

				return 1.0 - shadowCoef + r * shadowCoef;

			}

			vec3 getRayColor( vec3 origin, vec3 ray, out vec3 pos, out vec3 normal, out bool hit ) {

				// marching loop
				float dist;
				float depth = 0.0;
				pos = origin;

				for ( int i = 0; i < 64; i++ ){

					dist = sceneDist( pos );
					depth += dist;
					pos = origin + depth * ray;

					if ( abs(dist) < EPS ) break;

				}

				// hit check and calc color
				vec3 color;

				if ( abs(dist) < EPS ) {

					normal = getNormal( pos );
					float diffuse = clamp( dot( lightDir, normal ), 0.1, 1.0 );
					float specular = pow( clamp( dot( reflect( lightDir, normal ), ray ), 0.0, 1.0 ), 10.0 );
					float shadow = getShadow( pos + normal * OFFSET, lightDir );
					color = ( sceneColor( pos ).rgb * diffuse + vec3( 0.8 ) * specular ) * max( 0.5, shadow );

					hit = true;

				} else {

					color = vec3( 0.0 );

				}

				return color - pow( clamp( 0.05 * depth, 0.0, 0.6 ), 2.0 );

			}

			void main(void) {

				// screen position
				vec2 screenPos = ( gl_FragCoord.xy * 2.0 - resolution ) / resolution;

				// ray direction in normalized device coordinate
				vec4 ndcRay = vec4( screenPos.xy, 1.0, 1.0 );

				// convert ray direction from normalized device coordinate to world coordinate
				vec3 ray = ( cameraWorldMatrix * cameraProjectionMatrixInverse * ndcRay ).xyz;
				ray = normalize( ray );

				// camera position
				vec3 cPos = cameraPosition;

				// cast ray
				vec3 color = vec3( 0.0 );
				vec3 pos, normal;
				bool hit;
				float alpha = 1.0;

				for ( int i = 0; i < 3; i++ ) {

					color += alpha * getRayColor( cPos, ray, pos, normal, hit );
					alpha *= 0.3;
					ray = normalize( reflect( ray, normal ) );
					cPos = pos + normal * OFFSET;

					if ( !hit ) break;

				}

				gl_FragColor = vec4( color, 1.0 );

			}

		</script>

		<script id="vertex_shader" type="x-shader/x-vertex">

			attribute vec3 position;

			void main(void) {

				gl_Position = vec4(position, 1.0);

			}

		</script>

		<script src="../build/three.js"></script>
		<script src="js/controls/OrbitControls.js"></script>

		<script src="js/libs/stats.min.js"></script>
		<script src="js/libs/dat.gui.min.js"></script>

		<script>

			var camera, scene, controls, renderer;
			var geometry, material, mesh;
			var mouse = new THREE.Vector2( 0.5, 0.5 );
			var canvas;
			var stats;

			var clock = new THREE.Clock();

			var config = {
				saveImage: function () {

					renderer.render( scene, camera );
					window.open( canvas.toDataURL() );

				},
				orbitControls: false,
				resolution: '512'
			};

			init();
			render();

			function init() {

				renderer = new THREE.WebGLRenderer();
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( config.resolution, config.resolution );

				canvas = renderer.domElement;
				canvas.addEventListener( 'mousemove', onMouseMove );
				window.addEventListener( 'resize', onWindowResize );
				document.body.appendChild( canvas );

				// Scene
				scene = new THREE.Scene();

				camera = new THREE.PerspectiveCamera( 60, canvas.width / canvas.height, 1, 2000 );

				geometry = new THREE.PlaneBufferGeometry( 2.0, 2.0 );
				material = new THREE.RawShaderMaterial( {
					uniforms: {
						resolution: { value: new THREE.Vector2( canvas.width, canvas.height ) },
						cameraWorldMatrix: { value: camera.matrixWorld },
						cameraProjectionMatrixInverse: { value: new THREE.Matrix4().getInverse( camera.projectionMatrix ) }
					},
					vertexShader: document.getElementById( 'vertex_shader' ).textContent,
					fragmentShader: document.getElementById( 'fragment_shader' ).textContent
				} );
				mesh = new THREE.Mesh( geometry, material );
				mesh.frustumCulled = false;
				scene.add( mesh );

				// Controls
				controls = new THREE.OrbitControls( camera, canvas );

				// GUI
				var gui = new dat.GUI();
				gui.add( config, 'saveImage' ).name( 'Save Image' );
				gui.add( config, 'orbitControls' ).name( 'Orbit Controls' );
				gui.add( config, 'resolution', [ '256', '512', '800', 'full' ] ).name( 'Resolution' ).onChange( onWindowResize );

				stats = new Stats();
				document.body.appendChild( stats.dom );

			}

			function render( timestamp ) {

				var delta = clock.getDelta();

				stats.begin();

				if ( config.orbitControls ) {

					controls.update( delta );

				} else {

					camera.position.set( mouse.x * 2 - 1, mouse.y * 4, timestamp * 0.001 );
					camera.rotation.set( 0.25, - Math.PI, 0 );

				}

				renderer.render( scene, camera );

				stats.end();
				requestAnimationFrame( render );

			}

			function onMouseMove( e ) {

				mouse.x = e.clientX / window.innerWidth;
				mouse.y = e.clientY / window.innerHeight;

			}

			function onWindowResize( e ) {

				if ( config.resolution === 'full' ) {

					renderer.setSize( window.innerWidth, window.innerHeight );

				} else {

					renderer.setSize( config.resolution, config.resolution );

				}

				camera.aspect = canvas.width / canvas.height;
				camera.updateProjectionMatrix();

				material.uniforms.resolution.value.set( canvas.width, canvas.height );
				material.uniforms.cameraProjectionMatrixInverse.value.getInverse( camera.projectionMatrix );

			}

		</script>

	</body>
</html>