r131 (bis)

docs/api/en/materials/ShaderMaterial.html

@@ -110,7 +110,6 @@
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
 			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_parallaxmap webgl / materials / parallaxmap]<br />
-			[example:webgl_materials_shaders_fresnel webgl / materials / shaders / fresnel]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

docs/api/zh/materials/ShaderMaterial.html

@@ -100,7 +100,6 @@
 			[example:webgl_materials_envmaps webgl / materials / envmaps]<br />
 			[example:webgl_materials_lightmap webgl / materials / lightmap]<br />
 			[example:webgl_materials_parallaxmap webgl / materials / parallaxmap]<br />
-			[example:webgl_materials_shaders_fresnel webgl / materials / shaders / fresnel]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />

editor/js/Strings.js

@@ -734,7 +734,7 @@ function Strings( config ) {
 			'menubar/help/source_code': '源码',
 			'menubar/help/icons': '图标组件包',
 			'menubar/help/about': '关于',
-			'menubar/help/manual': 'Manual',
+			'menubar/help/manual': '手册',
 
 			'sidebar/animations': '动画',
 			'sidebar/animations/play': '播放',
@@ -899,16 +899,16 @@ function Strings( config ) {
 			'sidebar/material/depthPacking': '深度包装',
 			'sidebar/material/roughness': '粗糙度',
 			'sidebar/material/metalness': '金属度',
-			'sidebar/material/reflectivity': 'Reflectivity',
+			'sidebar/material/reflectivity': '反射率',
 			'sidebar/material/emissive': '自发光',
 			'sidebar/material/specular': '高光',
 			'sidebar/material/shininess': '高光大小',
 			'sidebar/material/clearcoat': '清漆',
 			'sidebar/material/clearcoatroughness': '清漆粗糙度',
-			'sidebar/material/transmission': 'Transmission',
-			'sidebar/material/attenuationDistance': 'Attenuation Distance',
-			'sidebar/material/attenuationTint': 'Attenuation Tint',
-			'sidebar/material/thickness': 'Thickness',
+			'sidebar/material/transmission': '透光',
+			'sidebar/material/attenuationDistance': '衰减距离',
+			'sidebar/material/attenuationTint': '衰减色彩',
+			'sidebar/material/thickness': '厚度',
 			'sidebar/material/vertexcolors': '顶点颜色',
 			'sidebar/material/matcap': '材质捕获',
 			'sidebar/material/map': '贴图',
@@ -928,7 +928,7 @@ function Strings( config ) {
 			'sidebar/material/side': '面',
 			'sidebar/material/size': '大小',
 			'sidebar/material/sizeAttenuation': '大小衰减',
-			'sidebar/material/flatShading': 'Flat Shading',
+			'sidebar/material/flatShading': '平面着色',
 			'sidebar/material/blending': '混合',
 			'sidebar/material/opacity': '透明度',
 			'sidebar/material/transparent': '透明性',

examples/files.json

@@ -152,7 +152,6 @@
 		"webgl_materials_physical_reflectivity",
 		"webgl_materials_physical_sheen",
 		"webgl_materials_physical_transmission",
-		"webgl_materials_shaders_fresnel",
 		"webgl_materials_standard",
 		"webgl_materials_subsurface_scattering",
 		"webgl_materials_texture_anisotropy",

examples/js/shaders/FresnelShader.js

@@ -1,81 +0,0 @@
-( function () {
-
-	/**
- * Based on Nvidia Cg tutorial
- */
-	const FresnelShader = {
-		uniforms: {
-			'mRefractionRatio': {
-				value: 1.02
-			},
-			'mFresnelBias': {
-				value: 0.1
-			},
-			'mFresnelPower': {
-				value: 2.0
-			},
-			'mFresnelScale': {
-				value: 1.0
-			},
-			'tCube': {
-				value: null
-			}
-		},
-		vertexShader:
-  /* glsl */
-  `
-
-		uniform float mRefractionRatio;
-		uniform float mFresnelBias;
-		uniform float mFresnelScale;
-		uniform float mFresnelPower;
-
-		varying vec3 vReflect;
-		varying vec3 vRefract[3];
-		varying float vReflectionFactor;
-
-		void main() {
-
-			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-			vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
-
-			vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
-
-			vec3 I = worldPosition.xyz - cameraPosition;
-
-			vReflect = reflect( I, worldNormal );
-			vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio );
-			vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 );
-			vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 );
-			vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mFresnelPower );
-
-			gl_Position = projectionMatrix * mvPosition;
-
-		}`,
-		fragmentShader:
-  /* glsl */
-  `
-
-		uniform samplerCube tCube;
-
-		varying vec3 vReflect;
-		varying vec3 vRefract[3];
-		varying float vReflectionFactor;
-
-		void main() {
-
-			vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
-			vec4 refractedColor = vec4( 1.0 );
-
-			refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;
-			refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;
-			refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;
-
-			gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
-
-		}`
-	};
-
-	THREE.FresnelShader = FresnelShader;
-
-} )();

examples/jsm/shaders/FresnelShader.js

@@ -1,70 +0,0 @@
-/**
- * Based on Nvidia Cg tutorial
- */
-
-const FresnelShader = {
-
-	uniforms: {
-
-		'mRefractionRatio': { value: 1.02 },
-		'mFresnelBias': { value: 0.1 },
-		'mFresnelPower': { value: 2.0 },
-		'mFresnelScale': { value: 1.0 },
-		'tCube': { value: null }
-
-	},
-
-	vertexShader: /* glsl */`
-
-		uniform float mRefractionRatio;
-		uniform float mFresnelBias;
-		uniform float mFresnelScale;
-		uniform float mFresnelPower;
-
-		varying vec3 vReflect;
-		varying vec3 vRefract[3];
-		varying float vReflectionFactor;
-
-		void main() {
-
-			vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
-			vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
-
-			vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
-
-			vec3 I = worldPosition.xyz - cameraPosition;
-
-			vReflect = reflect( I, worldNormal );
-			vRefract[0] = refract( normalize( I ), worldNormal, mRefractionRatio );
-			vRefract[1] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.99 );
-			vRefract[2] = refract( normalize( I ), worldNormal, mRefractionRatio * 0.98 );
-			vReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), mFresnelPower );
-
-			gl_Position = projectionMatrix * mvPosition;
-
-		}`,
-
-	fragmentShader: /* glsl */`
-
-		uniform samplerCube tCube;
-
-		varying vec3 vReflect;
-		varying vec3 vRefract[3];
-		varying float vReflectionFactor;
-
-		void main() {
-
-			vec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );
-			vec4 refractedColor = vec4( 1.0 );
-
-			refractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;
-			refractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;
-			refractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;
-
-			gl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );
-
-		}`
-
-};
-
-export { FresnelShader };

examples/tags.json

@@ -41,7 +41,6 @@
 	"webgl_materials_lightmap": [ "shadow" ],
 	"webgl_materials_physical_clearcoat": [ "anisotropy" ],
 	"webgl_materials_physical_transmission": [ "alpha" ],
-	"webgl_materials_shaders_fresnel": [ "refraction" ],
 	"webgl_materials_standard": [ "pbr" ],
 	"webgl_materials_texture_canvas": [ "paint" ],
 	"webgl_materials_texture_filters": [ "mipmap", "min", "mag" ],

examples/webgl_furnace_test.html

@@ -12,6 +12,8 @@
 			<div id="info">
 				<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> -
 				<a href="https://google.github.io/filament/Filament.md.html#toc4.7.2" target="_blank" rel="noopener">White Furnace</a> energy conservation test by <a href="https://jsantell.com/" target="_blank" rel="noopener">Jordan Santell</a>
+				<br>Rougnness increases left to right
+				<br>Metalness increases top to bottom
 			</div>
 		</div>
 
@@ -21,6 +23,10 @@
 
 			let scene, camera, renderer, radianceMap;
 
+			const frustumSize = 14;
+
+			const COLOR = 0xcccccc;
+
 			function init() {
 
 				const width = window.innerWidth;
@@ -34,13 +40,16 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				document.body.appendChild( renderer.domElement );
 
+				//renderer.outputEncoding = THREE.sRGBEncoding; // optional
+
 				window.addEventListener( 'resize', onWindowResize );
 
 				document.body.addEventListener( 'mouseover', function () {
 
 					scene.traverse( function ( child ) {
 
-						if ( child.isMesh ) child.material.color.setHex( 0xaaaaff );
+						if ( child.isMesh ) child.material.color.setHex( 0xccccff ); // tinted for visibility
+						render();
 
 					} );
 
@@ -51,6 +60,7 @@
 					scene.traverse( function ( child ) {
 
 						if ( child.isMesh ) child.material.color.setHex( 0xffffff );
+						render();
 
 					} );
 
@@ -62,14 +72,14 @@
 
 				// camera
 
-				camera = new THREE.PerspectiveCamera( 40, aspect, 1, 30 );
-				camera.position.set( 0, 0, 18 );
+				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 30 ); 
+				camera.position.set( 0, 0, 10 );
 
 			}
 
 			function createObjects() {
 
-				const geometry = new THREE.SphereGeometry( 0.4, 32, 32 );
+				const geometry = new THREE.SphereGeometry( 0.4, 32, 16 );
 
 				for ( let x = 0; x <= 10; x ++ ) {
 
@@ -81,7 +91,7 @@
 							color: 0xffffff,
 							envMap: radianceMap,
 							envMapIntensity: 1,
-							reflectivity: 1
+							reflectivity: 0.5
 						} );
 
 						const mesh = new THREE.Mesh( geometry, material );
@@ -100,13 +110,14 @@
 				return new Promise( function ( resolve ) {
 
 					const envScene = new THREE.Scene();
-					envScene.background = new THREE.Color( 0xcccccc );
+					envScene.background = new THREE.Color( COLOR ); // sRGB colorspace assumed, apparently
 
 					const pmremGenerator = new THREE.PMREMGenerator( renderer );
 					radianceMap = pmremGenerator.fromScene( envScene ).texture;
 					pmremGenerator.dispose();
 
-					scene.background = radianceMap;
+					scene.background = new THREE.Color( COLOR );
+					if ( renderer.outputEncoding !== THREE.sRGBEncoding ) scene.background.convertSRGBToLinear();
 
 					resolve();
 
@@ -116,19 +127,18 @@
 
 			function onWindowResize() {
 
-				const width = window.innerWidth;
-				const height = window.innerHeight;
-
-				camera.aspect = width / height;
-				camera.updateProjectionMatrix();
+				const aspect = window.innerWidth / window.innerHeight;
 
-				renderer.setSize( width, height );
+				camera.left = - frustumSize * aspect / 2;
+				camera.right = frustumSize * aspect / 2;
+				camera.top = frustumSize / 2;
+				camera.bottom = - frustumSize / 2;
 
-			}
+				camera.updateProjectionMatrix();
 
-			function animate() {
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.setAnimationLoop( render );
+				render();
 
 			}
 
@@ -142,7 +152,7 @@
 				.then( init )
 				.then( createEnvironment )
 				.then( createObjects )
-				.then( animate );
+				.then( render );
 
 		</script>
 	</body>

examples/webgl_loader_gltf_transmission.html

@@ -24,7 +24,7 @@
 
 			import { DRACOLoader } from './jsm/loaders/DRACOLoader.js';
 
-			let camera, scene, renderer, clock, mixer;
+			let camera, scene, renderer, controls, clock, mixer;
 
 			init();
 			animate();
@@ -53,17 +53,16 @@
 
 						// model
 
-						const loader = new GLTFLoader()
+						new GLTFLoader()
 							.setPath( 'models/gltf/' )
-							.setDRACOLoader( new DRACOLoader().setDecoderPath( 'js/libs/draco/gltf/' ) );
+							.setDRACOLoader( new DRACOLoader().setDecoderPath( 'js/libs/draco/gltf/' ) )
+							.load( 'IridescentDishWithOlives.glb', function ( gltf ) {
 
-						loader.load( 'IridescentDishWithOlives.glb', function ( gltf ) {
+								mixer = new THREE.AnimationMixer( gltf.scene );
+								mixer.clipAction( gltf.animations[ 0 ] ).play();
+								scene.add( gltf.scene );
 
-							mixer = new THREE.AnimationMixer( gltf.scene );
-							mixer.clipAction( gltf.animations[ 0 ] ).play();
-							scene.add( gltf.scene );
-
-						} );
+							} );
 
 					} );
 
@@ -75,10 +74,11 @@
 				renderer.outputEncoding = THREE.sRGBEncoding;
 				container.appendChild( renderer.domElement );
 
-				const controls = new OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.enableDamping = true;
 				controls.minDistance = 0.5;
-				controls.maxDistance = 10;
-				controls.target.y = 0.1;
+				controls.maxDistance = 1;
+				controls.target.set( 0, 0.1, 0 );
 				controls.update();
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -102,6 +102,8 @@
 
 				if ( mixer ) mixer.update( clock.getDelta() );
 
+				controls.update(); // required if damping enabled
+
 				render();
 
 			}

examples/webgl_materials_shaders_fresnel.html

@@ -1,159 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js webgl - materials - shaders [Fresnel]</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl cube Fresnel shader demo.<br/>texture by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>
-		</div>
-
-		<script type="module">
-
-			import * as THREE from '../build/three.module.js';
-
-			import { FresnelShader } from './jsm/shaders/FresnelShader.js';
-
-			let container;
-
-			let camera, scene, renderer;
-
-			const spheres = [];
-
-			let mouseX = 0, mouseY = 0;
-
-			let windowHalfX = window.innerWidth / 2;
-			let windowHalfY = window.innerHeight / 2;
-
-			document.addEventListener( 'mousemove', onDocumentMouseMove );
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
-				camera.position.z = 3200;
-
-				//
-
-				const path = "textures/cube/Park2/";
-				const format = '.jpg';
-				const urls = [
-					path + 'posx' + format, path + 'negx' + format,
-					path + 'posy' + format, path + 'negy' + format,
-					path + 'posz' + format, path + 'negz' + format
-				];
-
-				const textureCube = new THREE.CubeTextureLoader().load( urls );
-
-				scene = new THREE.Scene();
-				scene.background = textureCube;
-
-				//
-
-				const geometry = new THREE.SphereGeometry( 100, 32, 16 );
-
-				const shader = FresnelShader;
-				const uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-
-				uniforms[ "tCube" ].value = textureCube;
-
-				const material = new THREE.ShaderMaterial( {
-					uniforms: uniforms,
-					vertexShader: shader.vertexShader,
-					fragmentShader: shader.fragmentShader
-				} );
-
-				for ( let i = 0; i < 500; i ++ ) {
-
-					const mesh = new THREE.Mesh( geometry, material );
-
-					mesh.position.x = Math.random() * 10000 - 5000;
-					mesh.position.y = Math.random() * 10000 - 5000;
-					mesh.position.z = Math.random() * 10000 - 5000;
-
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
-
-					scene.add( mesh );
-
-					spheres.push( mesh );
-
-				}
-
-				//
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				windowHalfX = window.innerWidth / 2;
-				windowHalfY = window.innerHeight / 2;
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function onDocumentMouseMove( event ) {
-
-				mouseX = ( event.clientX - windowHalfX ) * 10;
-				mouseY = ( event.clientY - windowHalfY ) * 10;
-
-			}
-
-			//
-
-			function animate() {
-
-				requestAnimationFrame( animate );
-
-				render();
-
-			}
-
-			function render() {
-
-				const timer = 0.0001 * Date.now();
-
-				camera.position.x += ( mouseX - camera.position.x ) * .05;
-				camera.position.y += ( - mouseY - camera.position.y ) * .05;
-
-				camera.lookAt( scene.position );
-
-				for ( let i = 0, il = spheres.length; i < il; i ++ ) {
-
-					const sphere = spheres[ i ];
-
-					sphere.position.x = 5000 * Math.cos( timer + i );
-					sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );
-
-				}
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-
-	</body>
-</html>