@anov/3d 0.0.4-alpha.1 → 0.0.4-alpha13

package/examples/jsm/cameras/CinematicCamera.js

@@ -1,208 +0,0 @@
-import {
-	Mesh,
-	OrthographicCamera,
-	PerspectiveCamera,
-	PlaneGeometry,
-	Scene,
-	ShaderMaterial,
-	UniformsUtils,
-	WebGLRenderTarget
-} from 'three';
-
-import { BokehShader, BokehDepthShader } from '../shaders/BokehShader2.js';
-
-class CinematicCamera extends PerspectiveCamera {
-
-	constructor( fov, aspect, near, far ) {
-
-		super( fov, aspect, near, far );
-
-		this.type = 'CinematicCamera';
-
-		this.postprocessing = { enabled: true };
-		this.shaderSettings = {
-			rings: 3,
-			samples: 4
-		};
-
-		const depthShader = BokehDepthShader;
-
-		this.materialDepth = new ShaderMaterial( {
-			uniforms: depthShader.uniforms,
-			vertexShader: depthShader.vertexShader,
-			fragmentShader: depthShader.fragmentShader
-		} );
-
-		this.materialDepth.uniforms[ 'mNear' ].value = near;
-		this.materialDepth.uniforms[ 'mFar' ].value = far;
-
-		// In case of cinematicCamera, having a default lens set is important
-		this.setLens();
-
-		this.initPostProcessing();
-
-	}
-
-	// providing fnumber and coc(Circle of Confusion) as extra arguments
-	// In case of cinematicCamera, having a default lens set is important
-	// if fnumber and coc are not provided, cinematicCamera tries to act as a basic PerspectiveCamera
-	setLens( focalLength = 35, filmGauge = 35, fNumber = 8, coc = 0.019 ) {
-
-		this.filmGauge = filmGauge;
-
-		this.setFocalLength( focalLength );
-
-		this.fNumber = fNumber;
-		this.coc = coc;
-
-		// fNumber is focalLength by aperture
-		this.aperture = focalLength / this.fNumber;
-
-		// hyperFocal is required to calculate depthOfField when a lens tries to focus at a distance with given fNumber and focalLength
-		this.hyperFocal = ( focalLength * focalLength ) / ( this.aperture * this.coc );
-
-	}
-
-	linearize( depth ) {
-
-		const zfar = this.far;
-		const znear = this.near;
-		return - zfar * znear / ( depth * ( zfar - znear ) - zfar );
-
-	}
-
-	smoothstep( near, far, depth ) {
-
-		const x = this.saturate( ( depth - near ) / ( far - near ) );
-		return x * x * ( 3 - 2 * x );
-
-	}
-
-	saturate( x ) {
-
-		return Math.max( 0, Math.min( 1, x ) );
-
-	}
-
-	// function for focusing at a distance from the camera
-	focusAt( focusDistance = 20 ) {
-
-		const focalLength = this.getFocalLength();
-
-		// distance from the camera (normal to frustrum) to focus on
-		this.focus = focusDistance;
-
-		// the nearest point from the camera which is in focus (unused)
-		this.nearPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal + ( this.focus - focalLength ) );
-
-		// the farthest point from the camera which is in focus (unused)
-		this.farPoint = ( this.hyperFocal * this.focus ) / ( this.hyperFocal - ( this.focus - focalLength ) );
-
-		// the gap or width of the space in which is everything is in focus (unused)
-		this.depthOfField = this.farPoint - this.nearPoint;
-
-		// Considering minimum distance of focus for a standard lens (unused)
-		if ( this.depthOfField < 0 ) this.depthOfField = 0;
-
-		this.sdistance = this.smoothstep( this.near, this.far, this.focus );
-
-		this.ldistance = this.linearize( 1 -	this.sdistance );
-
-		this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = this.ldistance;
-
-	}
-
-	initPostProcessing() {
-
-		if ( this.postprocessing.enabled ) {
-
-			this.postprocessing.scene = new Scene();
-
-			this.postprocessing.camera = new OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,	window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
-
-			this.postprocessing.scene.add( this.postprocessing.camera );
-
-			this.postprocessing.rtTextureDepth = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-			this.postprocessing.rtTextureColor = new WebGLRenderTarget( window.innerWidth, window.innerHeight );
-
-			const bokeh_shader = BokehShader;
-
-			this.postprocessing.bokeh_uniforms = UniformsUtils.clone( bokeh_shader.uniforms );
-
-			this.postprocessing.bokeh_uniforms[ 'tColor' ].value = this.postprocessing.rtTextureColor.texture;
-			this.postprocessing.bokeh_uniforms[ 'tDepth' ].value = this.postprocessing.rtTextureDepth.texture;
-
-			this.postprocessing.bokeh_uniforms[ 'manualdof' ].value = 0;
-			this.postprocessing.bokeh_uniforms[ 'shaderFocus' ].value = 0;
-
-			this.postprocessing.bokeh_uniforms[ 'fstop' ].value = 2.8;
-
-			this.postprocessing.bokeh_uniforms[ 'showFocus' ].value = 1;
-
-			this.postprocessing.bokeh_uniforms[ 'focalDepth' ].value = 0.1;
-
-			//console.log( this.postprocessing.bokeh_uniforms[ "focalDepth" ].value );
-
-			this.postprocessing.bokeh_uniforms[ 'znear' ].value = this.near;
-			this.postprocessing.bokeh_uniforms[ 'zfar' ].value = this.near;
-
-
-			this.postprocessing.bokeh_uniforms[ 'textureWidth' ].value = window.innerWidth;
-
-			this.postprocessing.bokeh_uniforms[ 'textureHeight' ].value = window.innerHeight;
-
-			this.postprocessing.materialBokeh = new ShaderMaterial( {
-				uniforms: this.postprocessing.bokeh_uniforms,
-				vertexShader: bokeh_shader.vertexShader,
-				fragmentShader: bokeh_shader.fragmentShader,
-				defines: {
-					RINGS: this.shaderSettings.rings,
-					SAMPLES: this.shaderSettings.samples,
-					DEPTH_PACKING: 1
-				}
-			} );
-
-			this.postprocessing.quad = new Mesh( new PlaneGeometry( window.innerWidth, window.innerHeight ), this.postprocessing.materialBokeh );
-			this.postprocessing.quad.position.z = - 500;
-			this.postprocessing.scene.add( this.postprocessing.quad );
-
-		}
-
-	}
-
-	renderCinematic( scene, renderer ) {
-
-		if ( this.postprocessing.enabled ) {
-
-			const currentRenderTarget = renderer.getRenderTarget();
-
-			renderer.clear();
-
-			// Render scene into texture
-
-			scene.overrideMaterial = null;
-			renderer.setRenderTarget( this.postprocessing.rtTextureColor );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render depth into texture
-
-			scene.overrideMaterial = this.materialDepth;
-			renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
-			renderer.clear();
-			renderer.render( scene, this );
-
-			// Render bokeh composite
-
-			renderer.setRenderTarget( null );
-			renderer.render( this.postprocessing.scene, this.postprocessing.camera );
-
-			renderer.setRenderTarget( currentRenderTarget );
-
-		}
-
-	}
-
-}
-
-export { CinematicCamera };

package/examples/jsm/capabilities/WebGL.js

@@ -1,91 +0,0 @@
-class WebGL {
-
-	static isWebGLAvailable() {
-
-		try {
-
-			const canvas = document.createElement( 'canvas' );
-			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
-
-		} catch ( e ) {
-
-			return false;
-
-		}
-
-	}
-
-	static isWebGL2Available() {
-
-		try {
-
-			const canvas = document.createElement( 'canvas' );
-			return !! ( window.WebGL2RenderingContext && canvas.getContext( 'webgl2' ) );
-
-		} catch ( e ) {
-
-			return false;
-
-		}
-
-	}
-
-	static getWebGLErrorMessage() {
-
-		return this.getErrorMessage( 1 );
-
-	}
-
-	static getWebGL2ErrorMessage() {
-
-		return this.getErrorMessage( 2 );
-
-	}
-
-	static getErrorMessage( version ) {
-
-		const names = {
-			1: 'WebGL',
-			2: 'WebGL 2'
-		};
-
-		const contexts = {
-			1: window.WebGLRenderingContext,
-			2: window.WebGL2RenderingContext
-		};
-
-		let message = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
-
-		const element = document.createElement( 'div' );
-		element.id = 'webglmessage';
-		element.style.fontFamily = 'monospace';
-		element.style.fontSize = '13px';
-		element.style.fontWeight = 'normal';
-		element.style.textAlign = 'center';
-		element.style.background = '#fff';
-		element.style.color = '#000';
-		element.style.padding = '1.5em';
-		element.style.width = '400px';
-		element.style.margin = '5em auto 0';
-
-		if ( contexts[ version ] ) {
-
-			message = message.replace( '$0', 'graphics card' );
-
-		} else {
-
-			message = message.replace( '$0', 'browser' );
-
-		}
-
-		message = message.replace( '$1', names[ version ] );
-
-		element.innerHTML = message;
-
-		return element;
-
-	}
-
-}
-
-export default WebGL;

package/examples/jsm/capabilities/WebGPU.js

@@ -1,53 +0,0 @@
-if ( window.GPUShaderStage === undefined ) {
-
-	window.GPUShaderStage = { VERTEX: 1, FRAGMENT: 2, COMPUTE: 4 };
-
-}
-
-let isAvailable = false;
-
-if ( navigator.gpu !== undefined ) {
-
-	const adapter = await navigator.gpu.requestAdapter();
-
-	if ( adapter !== null ) {
-
-		isAvailable = true;
-
-	}
-
-}
-
-class WebGPU {
-
-	static isAvailable() {
-
-		return isAvailable;
-
-	}
-
-	static getErrorMessage() {
-
-		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a> yet';
-
-		const element = document.createElement( 'div' );
-		element.id = 'webgpumessage';
-		element.style.fontFamily = 'monospace';
-		element.style.fontSize = '13px';
-		element.style.fontWeight = 'normal';
-		element.style.textAlign = 'center';
-		element.style.background = '#fff';
-		element.style.color = '#000';
-		element.style.padding = '1.5em';
-		element.style.maxWidth = '400px';
-		element.style.margin = '5em auto 0';
-
-		element.innerHTML = message;
-
-		return element;
-
-	}
-
-}
-
-export default WebGPU;