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 |
Neon slicey cube | 5,020 Kb |
Slanty Button Mixin | 4,109 Kb |
Diagonal gradient fill button | 4,860 Kb |
Animated multi-line underline | 3,247 Kb |
Goodbye 2016 | 5,786 Kb |
3D Retro Wave Spin | 5,825 Kb |
Animated SVG Hexagon | 3,470 Kb |
Vanilla JS sticky header | 1,944 Kb |
Smiley guy | 3,845 Kb |
Canvas Hero Prototype | 3,070 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 |
LDE old privacy page | Jasonangle | 2,339 Kb |
Personal Logo Animation | Lloydwheeler | 3,795 Kb |
Css Rotating 3d cubes different speed | Dghez | 2,364 Kb |
Mario | Takaneichinose | 3,902 Kb |
Elephants Full screen site | Orrinward | 3,981 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Simple Accordion | Wearebold | 3,683 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!