Published
Edited
Apr 25, 2020
kernelRadius = 10
composer = {
const renderer = new THREE.WebGLRenderer();
const controls = new THREE.OrbitControls(camera, renderer.domElement);
let fxaaPass;
invalidation.then(() => (controls.dispose(), renderer.dispose()));
renderer.setSize(width, height);
renderer.setPixelRatio(devicePixelRatio);
controls.addEventListener("change", () => composer.render());
const composer = new THREE.EffectComposer(renderer);
let renderPass = new THREE.RenderPass( scene, camera );
composer.addPass( renderPass );
/* SAOPASS: (WORKS) */
let ssaoPass = new THREE.SSAOPass( scene, camera);
ssaoPass.kernelRadius = kernelRadius;
ssaoPass.output = THREE.SSAOPass.OUTPUT.Default;
composer.addPass( ssaoPass );
/* */
/* Init gui
var gui = new GUI.GUI();
gui.add( ssaoPass, 'output', {
'Default': THREE.SSAOPass.OUTPUT.Default,
'SSAO Only': THREE.SSAOPass.OUTPUT.SSAO,
'SSAO Only + Blur': THREE.SSAOPass.OUTPUT.Blur,
'Beauty': THREE.SSAOPass.OUTPUT.Beauty,
'Depth': THREE.SSAOPass.OUTPUT.Depth,
'Normal': THREE.SSAOPass.OUTPUT.Normal
} ).onChange( function ( value ) {
ssaoPass.output = parseInt( value );
} );
*/
/* */
/* BLOOMPASS (WORKS)
const ssaaRenderPass = new THREE.SSAARenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(width, height), 5, 0.1, 0);
composer.addPass(ssaaRenderPass);
composer.addPass(bloomPass);
/* */
fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
console.log(fxaaPass);
var pixelRatio = renderer.getPixelRatio();
fxaaPass.material.uniforms[ 'resolution' ].value.x = 0.001; //1 / ( 50 * pixelRatio );
fxaaPass.material.uniforms[ 'resolution' ].value.y = 0.001; //1 / ( 50 * pixelRatio );
composer.addPass( fxaaPass );
return composer;
}
secondLight = {
const light = new THREE.DirectionalLight(0xffffff, 3.0);
light.position.set(-10, 10, -10);
return light;
}
b3dmurl = 'https://beta.geodan.nl/data/buildingtiles_velsen_3857/tiles/215.b3dm'
GUI = import('https://unpkg.com/three@0.115.0/examples/jsm/libs/dat.gui.module.js?module')
THREE = {
const THREE = window.THREE = await require("three@0.115.0/build/three.min.js");
await require('https://unpkg.com/three@0.115.0/examples/js/libs/dat.gui.min.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/controls/OrbitControls.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/loaders/GLTFLoader.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/postprocessing/EffectComposer.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/shaders/CopyShader.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/shaders/SSAOShader.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/shaders/FXAAShader.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/postprocessing/ShaderPass.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/postprocessing/RenderPass.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/shaders/DepthLimitedBlurShader.js').catch(() => {});
await require('three@0.115.0/examples/js/shaders/UnpackDepthRGBAShader.js').catch(() => {});
await require('three@0.115.0/examples/js/postprocessing/SAOPass.js').catch(() => {});
await require('https://unpkg.com/three@0.115.0/examples/js/math/SimplexNoise.js').catch((e) => {console.log(e)});
await require('three@0.115.0/examples/js/postprocessing/SSAOPass.js').catch((e) => {console.log(e)});
await require("three@0.115.0/examples/js/postprocessing/SSAARenderPass.js").catch(() => {});
await require("three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js").catch(() => {});
await require("three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js").catch(() => {});
return THREE;
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
