3December #7-15: Neon world shader
How do I make an 3december #7-15: neon world shader?
Hypercool neon planet. A happy accident when I was trying to implement normal mapping to learn how all that fun shader stuff works.. What is a 3december #7-15: neon world shader? How do you make a 3december #7-15: neon world shader? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.
3December #7-15: Neon world shader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3December #7-15: Neon world shader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container" class="container"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js'></script> <script src="js/index.js"></script>
</body>
</html>
3December #7-15: Neon world shader - Script Codes CSS Codes
* { margin: 0; padding: 0;
}
.container { height: 100vh; width: 100%;
}
canvas { display: block;
}
3December #7-15: Neon world shader - Script Codes JS Codes
'use strict';
console.clear();
var renderer = undefined;
var camera = undefined;
var controls = undefined;
var scene = undefined;
var globe = undefined;
var NORMAL_MAP = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/venus-normal-4k-low.jpg';
function init() { var container = document.getElementsByClassName('container')[0]; var w = container.offsetWidth; var h = container.offsetHeight; renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true }); renderer.setSize(w, h); renderer.setClearColor(0x000000); renderer.setPixelRatio(window.devicePixelRatio); renderer.domElement.getContext('webgl').getExtension('OES_standard_derivatives'); container.appendChild(renderer.domElement); scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(45, w / h, 0.8, 1000); camera.position.set(6, 3, 0); camera.lookAt(scene.position); controls = new THREE.OrbitControls(camera, renderer.domElement); //controls.addEventListener( 'change', render ); // add this only if there is no animation loop (requestAnimationFrame) controls.enableDamping = true; controls.dampingFactor = 0.2; controls.rotateSpeed = 0.3; var hemilight = new THREE.HemisphereLight(0xFFFFFF, 0x444444, 1); scene.add(hemilight); scene.add(camera); loadTextures().then(createGlobe).then(render);
}
function createGlobe() { return new Promise(function (resolve, reject) { var globeGeo = new THREE.IcosahedronGeometry(2, 3); // globe.geometry.computeTangents(); // globeGeo.computeTangents(); console.log('globeGeo'); var globeMat = new THREE.ShaderMaterial({ uniforms: detailedVenusUniforms, vertexShader: detailedVenusVertShader, fragmentShader: detailedVenusFragShader }); globe = new THREE.Mesh(globeGeo, globeMat); globe.rotation.set(0, Math.PI - 1, 0); scene.add(globe); resolve(); });
}
function loadTextures() { return new Promise(function (resolve, reject) { var loader = new THREE.TextureLoader(); loader.setCrossOrigin("anonymous"); Promise.all([loadTexture(loader, NORMAL_MAP, detailedVenusUniforms.normalMap)]).then(function () { resolve(); }); });
}
function loadTexture(loader, textureUrl, uniform) { return new Promise(function (resolve, reject) { loader.load(textureUrl, function (texture) { uniform.value = texture; uniform.value.wrapS = THREE.RepeatWrapping; uniform.value.wrapT = THREE.RepeatWrapping; texture.needsUpdate = true; resolve(texture); }); });
}
var detailedVenusUniforms = { sunVector: { value: new THREE.Vector3(100, 0, 0) }, normalMap: { value: null }
};
var detailedVenusVertShader = '\nuniform vec3 sunVector;\n\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vSunVector;\n// varying mat3 tangentBinormal;\nvarying vec3 vViewPosition;\n\nvoid main() {\n vUv = uv;\n vNormal = normal;\n\n vec4 vertToLight = viewMatrix * vec4(sunVector, 1.0);\n vec4 modelviewPos = modelViewMatrix * vec4(position, 1.0);\n vViewPosition = -modelviewPos.xyz;\n vSunVector = normalize(vertToLight.xyz - modelviewPos.xyz);\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n';
var detailedVenusFragShader = '\n#extension GL_OES_standard_derivatives : enable\nuniform sampler2D normalMap;\n\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vSunVector;\nvarying mat3 tangentBinormal;\nvarying vec3 vViewPosition;\n\nvec3 perturbNormal2Arb( vec3 eye_pos, vec3 surf_norm ) {\n //http://pocket.gl/normal-maps/\n vec3 q0 = dFdx( eye_pos.xyz );\n vec3 q1 = dFdy( eye_pos.xyz );\n vec2 st0 = dFdx( vUv.st );\n vec2 st1 = dFdy( vUv.st );\n\n vec3 S = normalize( q0 * st1.t - q1 * st0.t );\n vec3 T = normalize( -q0 * st1.s + q1 * st0.s );\n vec3 N = normalize( surf_norm );\n\n vec3 mapN = texture2D( normalMap, vUv ).xyz * 2.0 - 1.0;\n mapN.xy = vec2(0.8, 0.8) * mapN.xy;\n mat3 tsn = mat3( S, T, N );\n return normalize( tsn * mapN );\n}\n\nvoid main() {\n\n vec3 normal = perturbNormal2Arb( -vViewPosition, vNormal );\n\n float lightIntensity = max(0.1, dot(normal, vSunVector));\n vec4 lighting = vec4(lightIntensity, lightIntensity, lightIntensity, 1.0);\n\n gl_FragColor = vec4(normal, 1.0);\n}\n';
function render() { globe.rotation.y += 0.003; // orbitLight(detailedVenusUniforms.sunVector.value); window.requestAnimationFrame(render); renderer.render(scene, camera); controls.update();
}
function orbitLight(lightPosition) { var center = new THREE.Vector3(0, 0, 0); var distance = 1000; var speed = 0.001; var time = Date.now(); lightPosition.x = (center.x + distance) * Math.sin(time * -speed); lightPosition.z = (center.z + distance) * Math.cos(time * speed);
}
init();
window.addEventListener('resize', function () { renderer.setSize(window.innerWidth, window.innerHeight); camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix();
}, false);
Developer | Eli Fitch |
Username | elifitch |
Uploaded | October 28, 2022 |
Rating | 4 |
Size | 5,746 Kb |
Views | 16,192 |
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 |
Animated SVG Hexagon | 3,470 Kb |
Flexslider thumbnail modification | 13,431 Kb |
Slanty Button Mixin | 4,109 Kb |
Canvas Hero Prototype | 3,070 Kb |
Node DC Animated SVG Logo | 4,055 Kb |
Diagonal gradient fill button | 4,860 Kb |
Batman Middle Finger | 3,152 Kb |
Gradient Borders Mixin | 3,394 Kb |
Cube of cubes | 6,112 Kb |
Vanilla JS sticky header | 1,944 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 |
Old calculator | Gnarfugh | 2,815 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Fluid Responsive Typography | Jonmilner | 4,205 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Text Looping Transition | Agelber | 5,619 Kb |
Lecture 1 | Law | 0 Kb |
Hc first draft | Stepfray | 5,104 Kb |
A Pen by Oliver Schafeld | Schafeld | 1,720 Kb |
Smoke Shader - Frame Buffer | Omarshe7ta | 2,672 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!