script.js

var objMesh; var sphere; let start_time = Date.now(); var group = null; var fxaa = null; ///////////////////////////////////////////////////////////////// // add: floor ///////////////////////////////////////////////////////////////// function addFloor(scene) { const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x990033 } ); const floor = new THREE.Mesh( new THREE.CubeGeometry( 1000, 2, 1000 ), floorMaterial ); floor.position.y = 0; floor.receiveShadow = true; scene.add(floor); } ///////////////////////////////////////////////////////////////// // boilerplate code ///////////////////////////////////////////////////////////////// function init () { const scene = window.scene = new THREE.Scene(); group = new THREE.Object3D(); scene.add( group ); const camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight ) camera.near = 1; camera.far = 1000.0; camera.position.z = 10; camera.lookAt( scene.position ); var controls = new THREE.OrbitControls( camera ); controls.enableDamping = true; controls.rotateSpeed = 0.08; controls.autoRotateSpeed = 0.08; controls.zoomSpeed = 2.0; controls.maxPolarAngle = Math.PI / 2.1; controls.minPolarAngle = 0.0; camera.position.set(-20,30,20); camera.lookAt(new THREE.Vector3(0,0,0)); ////////////////////////////////////////////////// // setup renderer ////////////////////////////////////////////////// const render = initRenderer(scene, camera); ////////////////////////////////////////////////// // setup lights ////////////////////////////////////////////////// const lights = initLights(scene); const manager = new THREE.LoadingManager(); const loader = new THREE.OBJLoader( manager ); var addObjToScene = function( object ){ objMesh = object; objMesh.rotation.x = Math.PI/2; objMesh.position.y = 5; objMesh.scale.set( 2, 2, 2); object.traverse( function ( child ) { if(child instanceof THREE.Mesh){ child.material = new THREE.MeshStandardMaterial( { color: 0xF1F1F1, roughness:0.3, metalness:0.7 } ); child.geometry.computeVertexNormals(); child.castShadow = true; } }); var geometry = new THREE.SphereBufferGeometry( 6, 32, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); sphere = new THREE.Mesh( geometry, material ); scene.add( sphere ); scene.add(objMesh); }; loader.load( 'https://gitcdn.xyz/repo/prinzipiell/codepen/master/geometry/subdivisionMesh01.obj', addObjToScene); ////////////////////////////////////////////////// // add floor ////////////////////////////////////////////////// addFloor(scene); requestAnimationFrame(function loop(time) { if( sphere ) { sphere.position.y = 3 * Math.sin(Date.now()*0.001); } render(scene, camera); requestAnimationFrame(loop); }); } ///////////////////////////////////////////////////////////////// // initialize: lights ///////////////////////////////////////////////////////////////// function initLights(scene) { /////////////////////////////////////////////// // add: point light(s) /////////////////////////////////////////////// const c = 0xffffff; /////////////////////////////////////////////// // add: light nr 1 /////////////////////////////////////////////// const _pointLight1 = new THREE.PointLight( c, 1.15, 40, 2 ); _pointLight1.position.y = 15; _pointLight1.castShadow = true; scene.add( _pointLight1 ); /////////////////////////////////////////////// // add: light nr 2 /////////////////////////////////////////////// const _pointLight2 = new THREE.PointLight( c, 1.5, 40, 2 ); _pointLight2.position.x = 20; _pointLight2.position.y = 20; _pointLight2.castShadow = true; scene.add( _pointLight2 ); /////////////////////////////////////////////// // add: light nr 2 /////////////////////////////////////////////// const _pointLight3 = new THREE.PointLight( c, 1.5, 40, 2 ); _pointLight3.position.z = -25; _pointLight3.position.y = 25; _pointLight3.castShadow = true; scene.add( _pointLight3 ); var ambientLight = new THREE.AmbientLight(0x400040, 0.7); scene.add(ambientLight); scene.fog = new THREE.FogExp2(0x000000, .008); } ///////////////////////////////////////////////////////////////// // initialize: renderer ///////////////////////////////////////////////////////////////// function initRenderer(scene, camera) { const width = window.innerWidth; const height = window.innerHeight; const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.setSize(width, height); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Setup render pass const renderPass = new THREE.RenderPass(scene, camera); const fxaaPass = new THREE.ShaderPass( FXAAShader ); fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight ); const bloom = new THREE.UnrealBloomPass(new THREE.Vector2(width,height), 2.0, 0.3, 0.75 ); const raysPass = new THREE.ShaderPass(RaysShader); raysPass.renderToScreen = true; const effectComposer = new THREE.EffectComposer(renderer); effectComposer.addPass(renderPass); effectComposer.addPass(fxaaPass); effectComposer.addPass(bloom); effectComposer.addPass(raysPass); document.body.appendChild(renderer.domElement); window.addEventListener('resize', () => { const width = window.innerWidth; const height = window.innerHeight; const pixelRatio = renderer.getPixelRatio(); const newWidth = Math.floor(width / pixelRatio); const newHeight = Math.floor(height / pixelRatio); camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); if( fxaaPass ) { fxaaPass.uniforms['resolution'].value.set(1 / window.innerWidth, 1 / window.innerHeight ); } effectComposer.setSize(newWidth, newHeight); }); const render = (scene, camera) => { effectComposer.render(scene, camera); //renderer.render( scene, camera ); }; render.renderer = renderer; return render; } ///////////////////////////////////////////////////////////////// // minimalistic dependency-loader using rawgit to fetch // javascript-files from github. // origin-author & taken from: @Martin Schuhfuss ///////////////////////////////////////////////////////////////// function loadDeps(deps) { const githubUrl = (project, file) => `https://cdn.rawgit.com/${project}/master/${file}`; function loadScripts(scripts) { return Promise.all(scripts.map( src => new Promise(resolve => { const s = document.createElement('script'); s.onload = resolve; s.src = src; document.body.appendChild(s); }) )); } const urls = []; Object.keys(deps).forEach(project => { urls.push(...deps[project].map(githubUrl.bind(null, project))); }); return loadScripts(urls); } const deps = { 'mrdoob/three.js': [ 'controls/OrbitControls', 'utils/ShadowMapViewer', 'shaders/CopyShader', 'shaders/LuminosityHighPassShader', 'postprocessing/EffectComposer', 'postprocessing/RenderPass', 'postprocessing/ShaderPass', 'postprocessing/UnrealBloomPass' ].map(module => `examples/js/${module}.js`) }; loadDeps(deps).then(init); ///////////////////////////////////////////////////////////////// // basic rays shader // author: @Frank Reitberger ///////////////////////////////////////////////////////////////// const RaysShader = { uniforms: { "tDiffuse": { value: null }, }, vertexShader:` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `, fragmentShader: ` uniform sampler2D tDiffuse; varying vec2 vUv; void main() { vec4 cTextureScreen = texture2D( tDiffuse, vUv ); vec2 custom_glFragCoord = vUv; vec2 position = custom_glFragCoord / 2.0; vec2 temp_position = position; vec3 accumulation = vec3(0.0); int iterations = 128; float contrast = 0.8; vec2 movement = vec2(1.0); float fadefactor = 1.0/float(iterations); float multiplier = 1.4; for( int i=0; i<128; i++ ) { vec3 texturesample = texture2D(tDiffuse,position+temp_position).xyz; accumulation += multiplier*smoothstep(0.1,1.0,texturesample*texturesample); multiplier *= 1.0-fadefactor; temp_position += ((movement*0.25)-position)/float(iterations); }; accumulation /= float(iterations); vec3 color = texture2D(tDiffuse,custom_glFragCoord).rgb+(accumulation*(contrast/(1.0+dot(position,position)))); gl_FragColor = vec4( color, cTextureScreen.a ); } ` }; /** * @author alteredq / http://alteredqualia.com/ * @author davidedc / http://www.sketchpatch.net/ * * NVIDIA FXAA by Timothy Lottes * http://timothylottes.blogspot.com/2011/06/fxaa3-source-released.html * - WebGL port by @supereggbert * http://www.glge.org/demos/fxaa/ */ const FXAAShader = { uniforms: { "tDiffuse": { value: null }, "resolution": { value: new THREE.Vector2( 1 / 1024, 1 / 512 ) } }, vertexShader:` void main() { gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); } `, fragmentShader:` uniform sampler2D tDiffuse; uniform vec2 resolution; #define FXAA_REDUCE_MIN (1.0/128.0) #define FXAA_REDUCE_MUL (1.0/8.0) #define FXAA_SPAN_MAX 8.0 void main() { vec3 rgbNW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, -1.0 ) ) * resolution ).xyz; vec3 rgbNE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, -1.0 ) ) * resolution ).xyz; vec3 rgbSW = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( -1.0, 1.0 ) ) * resolution ).xyz; vec3 rgbSE = texture2D( tDiffuse, ( gl_FragCoord.xy + vec2( 1.0, 1.0 ) ) * resolution ).xyz; vec4 rgbaM = texture2D( tDiffuse, gl_FragCoord.xy * resolution ); vec3 rgbM = rgbaM.xyz; vec3 luma = vec3( 0.299, 0.587, 0.114 ); float lumaNW = dot( rgbNW, luma ); float lumaNE = dot( rgbNE, luma ); float lumaSW = dot( rgbSW, luma ); float lumaSE = dot( rgbSE, luma ); float lumaM = dot( rgbM, luma ); float lumaMin = min( lumaM, min( min( lumaNW, lumaNE ), min( lumaSW, lumaSE ) ) ); float lumaMax = max( lumaM, max( max( lumaNW, lumaNE) , max( lumaSW, lumaSE ) ) ); vec2 dir; dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE)); dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE)); float dirReduce = max( ( lumaNW + lumaNE + lumaSW + lumaSE ) * ( 0.25 * FXAA_REDUCE_MUL ), FXAA_REDUCE_MIN ); float rcpDirMin = 1.0 / ( min( abs( dir.x ), abs( dir.y ) ) + dirReduce ); dir = min( vec2( FXAA_SPAN_MAX, FXAA_SPAN_MAX), max( vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX), dir * rcpDirMin)) * resolution; vec4 rgbA = (1.0/2.0) * ( texture2D(tDiffuse, gl_FragCoord.xy * resolution + dir * (1.0/3.0 - 0.5)) + texture2D(tDiffuse, gl_FragCoord.xy * resolution + dir * (2.0/3.0 - 0.5))); vec4 rgbB = rgbA * (1.0/2.0) + (1.0/4.0) * ( texture2D(tDiffuse, gl_FragCoord.xy * resolution + dir * (0.0/3.0 - 0.5)) + texture2D(tDiffuse, gl_FragCoord.xy * resolution + dir * (3.0/3.0 - 0.5))); float lumaB = dot(rgbB, vec4(luma, 0.0)); if ( ( lumaB < lumaMin ) || ( lumaB > lumaMax ) ) { gl_FragColor = rgbA; } else { gl_FragColor = rgbB; } } ` };