123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>three.js webgpu - coffee smoke</title>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <link type="text/css" rel="stylesheet" href="main.css">
- </head>
- <body>
- <div id="info">
- <a href="https://threejs.org" target="_blank" rel="noopener">three.js webgpu</a> - coffee smoke
- <br>
- 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>
- </div>
- <script type="importmap">
- {
- "imports": {
- "three": "../build/three.webgpu.js",
- "three/tsl": "../build/three.webgpu.js",
- "three/addons/": "./jsm/"
- }
- }
- </script>
- <script type="module">
- import * as THREE from 'three';
- import { mix, mul, oneMinus, positionLocal, smoothstep, texture, timerLocal, rotateUV, Fn, uv, vec2, vec3, vec4 } from 'three/tsl';
- import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
- import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
- let camera, scene, renderer, controls;
- init();
- function init() {
- camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 0.1, 100 );
- camera.position.set( 8, 10, 12 );
- scene = new THREE.Scene();
- // Loaders
- const gltfLoader = new GLTFLoader();
- const textureLoader = new THREE.TextureLoader();
- // 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 } );
- const time = timerLocal();
- // 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 );
- document.body.appendChild( renderer.domElement );
- // controls
- controls = new OrbitControls( camera, renderer.domElement );
- controls.enableDamping = true;
- controls.minDistance = 0.1;
- controls.maxDistance = 50;
- controls.target.y = 3;
- 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();
- renderer.render( scene, camera );
- }
- </script>
- </body>
- </html>
|