samien
/
three.js
mirror of https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
							<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js webgpu - 3d luts</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<meta property="og:title" content="three.js webgpu - 3d luts">
		<meta property="og:type" content="website">
		<meta property="og:url" content="https://threejs.org/examples/webgpu_postprocessing_3dlut.html">
		<meta property="og:image" content="https://threejs.org/examples/screenshots/webgpu_postprocessing_3dlut.jpg">
		<link type="text/css" rel="stylesheet" href="example.css">
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org/" target="_blank" rel="noopener" class="logo-link"></a>

			<div class="title-wrapper">
				<a href="https://threejs.org/" target="_blank" rel="noopener">three.js</a><span>3D LUTs</span>
			</div>

			<small>
				3D Lookup-Tables for color grading, based on <a href="https://threejs-journey.com/lessons/coffee-smoke-shader" target="_blank" rel="noopener">Three.js Journey</a> lesson.<br />
				Perlin noise texture from <a href="http://kitfox.com/projects/perlinNoiseMaker/" target="_blank" rel="noopener">Perlin Noise Maker</a>, 
				LUTs from <a href="https://www.rocketstock.com/free-after-effects-templates/35-free-luts-for-color-grading-videos/">RocketStock</a>, <a href="https://www.freepresets.com/product/free-luts-cinematic/">FreePresets.com</a>.
			</small>
		</div>

		<script type="importmap">
			{
				"imports": {
					"three": "../build/three.webgpu.js",
					"three/webgpu": "../build/three.webgpu.js",
					"three/tsl": "../build/three.tsl.js",
					"three/addons/": "./jsm/"
				}
			}
		</script>

		<script type="module">

			import * as THREE from 'three/webgpu';
			import { mix, mul, oneMinus, positionLocal, smoothstep, texture, time, rotateUV, Fn, uv, vec2, vec3, vec4, pass, texture3D, uniform, renderOutput } from 'three/tsl';
			import { lut3D } from 'three/addons/tsl/display/Lut3DNode.js';

			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
			import { LUTCubeLoader } from 'three/addons/loaders/LUTCubeLoader.js';
			import { LUT3dlLoader } from 'three/addons/loaders/LUT3dlLoader.js';
			import { LUTImageLoader } from 'three/addons/loaders/LUTImageLoader.js';
			import { Inspector } from 'three/addons/inspector/Inspector.js';

			const params = {
				lut: 'Bourbon 64.CUBE',
				intensity: 1
			};

			const lutMap = {
				'Bourbon 64.CUBE': null,
				'Chemical 168.CUBE': null,
				'Clayton 33.CUBE': null,
				'Cubicle 99.CUBE': null,
				'Remy 24.CUBE': null,
				'Presetpro-Cinematic.3dl': null,
				'NeutralLUT': null,
				'B&WLUT': null,
				'NightLUT': null
			};

			let camera, scene, renderer, renderPipeline, controls, lutPass;

			init();

			async function init() {

				camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
				camera.position.set( 8, 10, 12 );

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x000000 );

				// Loaders

				const gltfLoader = new GLTFLoader();
				const textureLoader = new THREE.TextureLoader();

				// LUTs

				const lutCubeLoader = new LUTCubeLoader();
				const lutImageLoader = new LUTImageLoader();
				const lut3dlLoader = new LUT3dlLoader();

				for ( const name in lutMap ) {

					if ( /\.CUBE$/i.test( name ) ) {

						lutMap[ name ] = lutCubeLoader.loadAsync( 'luts/' + name );

					} else if ( /\LUT$/i.test( name ) ) {

						lutMap[ name ] = lutImageLoader.loadAsync( `luts/${name}.png` );

					} else {

						lutMap[ name ] = lut3dlLoader.loadAsync( 'luts/' + name );

					}

				}

				const pendings = Object.values( lutMap );
				await Promise.all( pendings );

				for ( const name in lutMap ) {

					lutMap[ name ] = await lutMap[ name ];

				}

				// baked model

				gltfLoader.load(
					'./models/gltf/coffeeMug.glb',
					( gltf ) => {

        				gltf.scene.getObjectByName( 'baked' ).material.map.anisotropy = 8;
						scene.add( gltf.scene );

					}
				);

				// geometry

				const smokeGeometry = new THREE.PlaneGeometry( 1, 1, 16, 64 );
				smokeGeometry.translate( 0, 0.5, 0 );
				smokeGeometry.scale( 1.5, 6, 1.5 );

				// texture

				const noiseTexture = textureLoader.load( './textures/noises/perlin/128x128.png' );
				noiseTexture.wrapS = THREE.RepeatWrapping;
				noiseTexture.wrapT = THREE.RepeatWrapping;

				// material

				const smokeMaterial = new THREE.MeshBasicNodeMaterial( { transparent: true, side: THREE.DoubleSide, depthWrite: false } );

				// position

				smokeMaterial.positionNode = Fn( () => {

					// twist

					const twistNoiseUv = vec2( 0.5, uv().y.mul( 0.2 ).sub( time.mul( 0.005 ) ).mod( 1 ) );
					const twist = texture( noiseTexture, twistNoiseUv ).r.mul( 10 );
					positionLocal.xz.assign( rotateUV( positionLocal.xz, twist, vec2( 0 ) ) );

					// wind

					const windOffset = vec2(
						texture( noiseTexture, vec2( 0.25, time.mul( 0.01 ) ).mod( 1 ) ).r.sub( 0.5 ),
						texture( noiseTexture, vec2( 0.75, time.mul( 0.01 ) ).mod( 1 ) ).r.sub( 0.5 ),
					).mul( uv().y.pow( 2 ).mul( 10 ) );
					positionLocal.addAssign( windOffset );

					return positionLocal;

				} )();

				// color

				smokeMaterial.colorNode = Fn( () => {

					// alpha

					const alphaNoiseUv = uv().mul( vec2( 0.5, 0.3 ) ).add( vec2( 0, time.mul( 0.03 ).negate() ) );
					const alpha = mul(

						// pattern
						texture( noiseTexture, alphaNoiseUv ).r.smoothstep( 0.4, 1 ),

						// edges fade
						smoothstep( 0, 0.1, uv().x ),
						smoothstep( 0, 0.1, oneMinus( uv().x ) ),
						smoothstep( 0, 0.1, uv().y ),
						smoothstep( 0, 0.1, oneMinus( uv().y ) )

					);

					// color

					const finalColor = mix( vec3( 0.6, 0.3, 0.2 ), vec3( 1, 1, 1 ), alpha.pow( 3 ) );

					return vec4( finalColor, alpha );

				} )();

				// mesh

				const smoke = new THREE.Mesh( smokeGeometry, smokeMaterial );
				smoke.position.y = 1.83;
				scene.add( smoke );

				// renderer

				renderer = new THREE.WebGPURenderer( { antialias: true } );
				renderer.setPixelRatio( window.devicePixelRatio );
				renderer.setSize( window.innerWidth, window.innerHeight );
				renderer.setAnimationLoop( animate );
				renderer.inspector = new Inspector();
				document.body.appendChild( renderer.domElement );

				// post processing

				renderPipeline = new THREE.RenderPipeline( renderer );

				// ignore default output color transform ( toneMapping and outputColorSpace )
				// use renderOutput() for control the sequence

				renderPipeline.outputColorTransform = false;

				// scene pass

				const scenePass = pass( scene, camera );
				const outputPass = renderOutput( scenePass );

				const lut = lutMap[ params.lut ];
				lutPass = lut3D( outputPass, texture3D( lut.texture3D ), lut.texture3D.image.width, uniform( 1 ) );

				renderPipeline.outputNode = lutPass;

				// controls

				controls = new OrbitControls( camera, renderer.domElement );
				controls.enableDamping = true;
				controls.minDistance = 0.1;
				controls.maxDistance = 50;
				controls.target.y = 3;

				// gui

				const gui = renderer.inspector.createParameters( 'Settings' );
				gui.add( params, 'lut', Object.keys( lutMap ) );
				gui.add( params, 'intensity', 0, 1 );

				window.addEventListener( 'resize', onWindowResize );

			}

			function onWindowResize() {

				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();

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

			}

			async function animate() {

				controls.update();

				lutPass.intensityNode.value = params.intensity;

				if ( lutMap[ params.lut ] ) {

					const lut = lutMap[ params.lut ];
					lutPass.lutNode.value = lut.texture3D;
					lutPass.size.value = lut.texture3D.image.width;

				}

				renderPipeline.render();

			}

		</script>
	</body>
</html>