Smoke Shader - Setup
How do I make an smoke shader - setup?
What is a smoke shader - setup? How do you make a smoke shader - setup? This script and codes were developed by Omar Shehata on 13 August 2022, Saturday.
Smoke Shader - Setup - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Smoke Shader - Setup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script id="fragShader" type="shader-code"> uniform vec2 res;//The width and height of our screen void main() { vec2 pixel = gl_FragCoord.xy / res.xy; gl_FragColor = vec4(0.0,0.0,0.0,1.0); } </script> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Smoke Shader - Setup - Script Codes CSS Codes
/* We want our scene to span the entire window */ body { margin: 0; }
Smoke Shader - Setup - Script Codes JS Codes
//@author Omar Shehata. 2015. //We are loading the Three.js library from the cdn here: http://cdnjs.com/libraries/three.js/ var scene; var camera; var renderer; function scene_setup(){ //This is the basic scene setup scene = new THREE.Scene(); var width = window.innerWidth; var height = window.innerHeight; //Note that we're using an orthographic camera here rather than a prespective camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 ); camera.position.z = 2; renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } //Initialize the Threejs scene scene_setup(); //Create our shader material var material = new THREE.ShaderMaterial({ uniforms: { res : {type: 'v2',value:new THREE.Vector2(window.innerWidth,window.innerHeight)}//Keeps the resolution }, fragmentShader: document.getElementById( 'fragShader' ).innerHTML }) var geometry = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight); var quad = new THREE.Mesh( geometry,material ); scene.add(quad); //Render everything! function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render();
Developer | Omar Shehata |
Username | omarshe7ta |
Uploaded | August 13, 2022 |
Rating | 3 |
Size | 2,339 Kb |
Views | 34,408 |
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!
Name | Size |
Framebuffer - Texture Render | 2,402 Kb |
Framebuffer - Final | 2,491 Kb |
Smoke Shader - Frame Buffer | 2,672 Kb |
Smoke Shader Algorithm Demo | 14,358 Kb |
Simple Lighting Model | 3,365 Kb |
Ball Demo | 2,055 Kb |
Smoke Shader Complete | 3,451 Kb |
Pixijs.v3 Sending Data to Shader | 2,599 Kb |
Framebuffer - Basic Scene | 2,217 Kb |
Buggy Smoke | 3,213 Kb |
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!
Name | Username | Size |
Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
TheCalendar.js | The-teacher | 6,330 Kb |
Image Stack Test SCSS | CalvinMorett | 2,799 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Starfield old school style | Bolloxim | 5,214 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Count up | Alanshortis | 2,391 Kb |
CSS Donut Charts | Seanstopnik | 2,908 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!