WebGL Smoke

Developer
Teo Litto
Size
3,126 Kb
Views
40,480
  1. WebGL Smoke Previews
  2. WebGL Smoke HTML Codes
  3. WebGL Smoke CSS Codes
  4. WebGL Smoke JS Codes

How do I make an webgl smoke?

Smoke particle system using an old vfx trick of scaled and rotating single sprite texture in WebGL, plus some additive blending for extra sass :). What is a webgl smoke? How do you make a webgl smoke? This script and codes were developed by Teo Litto on 21 August 2022, Sunday.

WebGL Smoke Previews
IQ Test

WebGL Smoke - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WebGL Smoke</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js'></script> <script src="js/index.js"></script>
</body>
</html>

WebGL Smoke - Script Codes CSS Codes

* { margin: 0; padding: 0; outline: 0;
}
html, body { width: 100%; height: 100%; overflow: hidden;
}

WebGL Smoke - Script Codes JS Codes

var camera, scene, renderer, geometry, material, mesh;
init();
animate();
function init() { stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); clock = new THREE.Clock(); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 1000; scene.add( camera ); geometry = new THREE.CubeGeometry( 200, 200, 200 ); material = new THREE.MeshLambertMaterial( { color: 0xaa6666, wireframe: false } ); mesh = new THREE.Mesh( geometry, material ); //scene.add( mesh ); cubeSineDriver = 0; textGeo = new THREE.PlaneGeometry(300,300); THREE.ImageUtils.crossOrigin = ''; //Need this to pull in crossdomain images from AWS textTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/quickText.png'); textMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff, opacity: 1, map: textTexture, transparent: true, blending: THREE.AdditiveBlending}) text = new THREE.Mesh(textGeo,textMaterial); text.position.z = 800; scene.add(text); light = new THREE.DirectionalLight(0xffffff,0.5); light.position.set(-1,0,1); scene.add(light); smokeTexture = THREE.ImageUtils.loadTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/95637/Smoke-Element.png'); smokeMaterial = new THREE.MeshLambertMaterial({color: 0x00dddd, map: smokeTexture, transparent: true}); smokeGeo = new THREE.PlaneGeometry(300,300); smokeParticles = []; for (p = 0; p < 150; p++) { var particle = new THREE.Mesh(smokeGeo,smokeMaterial); particle.position.set(Math.random()*500-250,Math.random()*500-250,Math.random()*1000-100); particle.rotation.z = Math.random() * 360; scene.add(particle); smokeParticles.push(particle); } document.body.appendChild( renderer.domElement );
}
function animate() { // note: three.js includes requestAnimationFrame shim stats.begin(); delta = clock.getDelta(); requestAnimationFrame( animate ); evolveSmoke(); render(); stats.end();
}
function evolveSmoke() { var sp = smokeParticles.length; while(sp--) { smokeParticles[sp].rotation.z += (delta * 0.2); }
}
function render() { mesh.rotation.x += 0.005; mesh.rotation.y += 0.01; cubeSineDriver += .01; mesh.position.z = 100 + (Math.sin(cubeSineDriver) * 500); renderer.render( scene, camera );
}
WebGL Smoke - Script Codes
WebGL Smoke - Script Codes
Home Page Home
Developer Teo Litto
Username teolitto
Uploaded August 21, 2022
Rating 4.5
Size 3,126 Kb
Views 40,480
Do you need developer help for WebGL Smoke?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Teo Litto (teolitto) Script Codes
Name
Liquid Loader
Starfall
Kitten Sniffer
Parallaxadise - Quick n dirty scrollytelling demo
Lock Picking in the DOM
Dreamforce.com 2017
Color morphing
Konami Code Easter Egg
Networked Paint with Patrick
Depth First Search Connectivity Test
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!