3December #7-15: Neon world shader

Developer
Size
5,746 Kb
Views
16,192

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 Previews

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);
3December #7-15: Neon world shader - Script Codes
3December #7-15: Neon world shader - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4
Size 5,746 Kb
Views 16,192
Do you need developer help for 3December #7-15: Neon world shader?

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!

Eli Fitch (elifitch) Script Codes
Create amazing SEO content 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!