3December #22: Super detailed venus

Developer
Eli Fitch
Size
5,962 Kb
Views
16,192
  1. 3December #22: Super detailed venus Previews
  2. 3December #22: Super detailed venus HTML Codes
  3. 3December #22: Super detailed venus CSS Codes
  4. 3December #22: Super detailed venus JS Codes

How do I make an 3december #22: super detailed venus?

Implements normal mapping from scratch in the fragment shader. I wanted to learn how normal maps really work, so I figured this was the way to do it,. What is a 3december #22: super detailed venus? How do you make a 3december #22: super detailed venus? This script and codes were developed by Eli Fitch on 28 October 2022, Friday.

3December #22: Super detailed venus Previews
IQ Test

3December #22: Super detailed venus - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>3December #22: Super detailed venus</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 #22: Super detailed venus - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
.container { height: 100vh; width: 100%;
}
canvas { display: block;
}

3December #22: Super detailed venus - Script Codes JS Codes

'use strict';
console.clear();
var renderer = undefined;
var camera = undefined;
var controls = undefined;
var scene = undefined;
var globe = undefined;
// const DIFFUSE_MAP = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/venus-diffuse-4k-low.jpg?timestamp=${Date.now()}`;
// const NORMAL_MAP = `https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/venus-normal-4k-low.jpg?timestamp=${Date.now()}`;
var DIFFUSE_MAP = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/62921/venus-diffuse-4k-low.jpg';
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, 5); // 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, DIFFUSE_MAP, detailedVenusUniforms.diffuseMap), 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) }, diffuseMap: { value: null }, normalMap: { value: null }
};
var detailedVenusVertShader = '\n uniform vec3 sunVector;\n\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vSunVector;\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 + vViewPosition);\n\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n';
var detailedVenusFragShader = '\n#extension GL_OES_standard_derivatives : enable\nuniform sampler2D diffuseMap;\nuniform sampler2D normalMap;\n\nvarying vec2 vUv;\nvarying vec3 vNormal;\nvarying vec3 vSunVector;\nvarying mat3 tangentBinormal;\nvarying vec3 vViewPosition;\n\nvec3 normalMappy( vec3 eye_pos, vec3 surf_norm ) {\n //http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/\n\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.7, 0.7) * mapN.xy;\n mat3 tsn = mat3( S, T, N );\n return normalize( tsn * mapN );\n\n}\n\nvoid main() {\n\n vec3 normal = normalMappy( -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 = texture2D(diffuseMap, vUv) * lighting;\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 #22: Super detailed venus - Script Codes
3December #22: Super detailed venus - Script Codes
Home Page Home
Developer Eli Fitch
Username elifitch
Uploaded October 28, 2022
Rating 4
Size 5,962 Kb
Views 16,192
Do you need developer help for 3December #22: Super detailed venus?

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
Name
3D Retro Wave Spin
Neon slicey cube
Gradient Borders Mixin
Canvas Hero Prototype
Animated SVG Hexagon
Cube of cubes
Animated multi-line underline
Slanty Button Mixin
Vanilla JS sticky header
SVG hamburger menu button
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!