add reflectivity example.

examples/files.js

@@ -129,6 +129,7 @@ var files = {
 		"webgl_materials_nodes",
 		"webgl_materials_normalmap",
 		"webgl_materials_parallaxmap",
+		"webgl_materials_reflectivity",
 		"webgl_materials_shaders_fresnel",
 		"webgl_materials_skin",
 		"webgl_materials_standard",

examples/models/obj/emerald.obj

@@ -0,0 +1,312 @@
+# Blender v2.74 (sub 0) OBJ File: ''
+# www.blender.org
+mtllib diamond-for-threejs.mtl
+o emerald_obj_1
+v -3.292856 5.746839 5.366825
+v -4.692856 5.043496 4.000000
+v -4.692857 -5.043496 4.000000
+v -3.292857 -5.746839 5.366825
+v -4.692856 5.043496 -4.000000
+v -3.292856 5.746839 -5.366825
+v -3.292857 -5.746839 -5.366825
+v -4.692857 -5.043496 -4.000000
+v -3.292858 -8.649050 3.181548
+v -4.692858 -7.590510 2.371271
+v -4.692858 -7.590510 -2.371271
+v -3.292858 -8.649050 -3.181548
+v -3.292856 8.649050 -3.181548
+v -4.692856 7.590510 -2.371271
+v -4.692856 7.590510 2.371271
+v -3.292856 8.649050 3.181548
+v 4.739632 7.649404 2.869210
+v 4.739632 5.082627 4.839954
+v 4.739630 -5.082630 4.839954
+v 4.739630 -7.649406 2.869211
+v 4.739630 -7.649406 -2.869211
+v 4.739630 -5.082630 -4.839954
+v 4.739632 5.082627 -4.839954
+v 4.739632 7.649404 -2.869210
+v -5.038335 4.756373 -0.096954
+v -5.038335 3.439395 -0.163548
+v -5.038336 -3.439395 -0.163548
+v -5.038337 -4.756373 -0.096954
+v -5.038337 -4.756373 0.096954
+v -5.038336 -3.439395 0.163548
+v -5.038335 3.439395 0.163548
+v -5.038335 4.756373 0.096954
+v -1.570719 6.404040 7.078050
+v -1.570719 9.638143 4.195993
+v -1.570721 -6.404041 7.078050
+v -1.570721 -9.638143 4.195993
+v -1.570721 -9.638143 -4.195993
+v -1.570721 -6.404041 -7.078050
+v -1.570719 6.404040 -7.078050
+v -1.570719 9.638143 -4.195993
+v 1.184699 7.289807 8.431552
+v 1.184699 10.971231 4.998373
+v 1.184697 -7.289809 8.431552
+v 1.184696 -10.971232 4.998374
+v 1.184696 -10.971232 -4.998374
+v 1.184697 -7.289809 -8.431552
+v 1.184699 7.289807 -8.431552
+v 1.184699 10.971231 -4.998373
+v 1.676783 7.289807 8.431552
+v 1.676784 10.971231 4.998373
+v 1.676781 -7.289809 8.431552
+v 1.676781 -10.971232 4.998374
+v 1.676781 -10.971232 -4.998374
+v 1.676781 -7.289809 -8.431552
+v 1.676783 7.289807 -8.431552
+v 1.676784 10.971231 -4.998373
+v 2.759176 6.861979 7.557796
+v 2.759176 10.327344 4.480395
+v 2.759174 -6.861980 7.557796
+v 2.759173 -10.327346 4.480397
+v 2.759173 -10.327346 -4.480397
+v 2.759174 -6.861980 -7.557796
+v 2.759176 6.861979 -7.557796
+v 2.759176 10.327344 -4.480395
+v 4.050778 5.880537 6.214112
+v 4.050778 8.850266 3.683835
+v 4.050776 -5.880539 6.214112
+v 4.050776 -8.850267 3.683837
+v 4.050776 -8.850267 -3.683837
+v 4.050776 -5.880539 -6.214112
+v 4.050778 5.880537 -6.214112
+v 4.050778 8.850266 -3.683835
+vn -0.698600 0.000000 0.715500
+vn -0.698600 0.000000 -0.715500
+vn -0.603100 -0.797700 0.000000
+vn -0.603100 0.797700 0.000000
+vn 1.000000 -0.000000 -0.000000
+vn -1.000000 0.000000 -0.000000
+vn -0.737800 0.363600 0.568600
+vn -0.675900 0.443300 0.588700
+vn -0.666900 -0.401400 0.627800
+vn -0.734400 -0.408200 0.542200
+vn -0.734400 0.408200 -0.542200
+vn -0.666900 0.401400 -0.627800
+vn -0.675900 -0.443300 -0.588700
+vn -0.737800 -0.363600 -0.568600
+vn -0.715200 0.420400 0.558300
+vn -0.635000 0.514000 0.576800
+vn -0.704900 0.000000 0.709400
+vn -0.632200 -0.466000 0.618900
+vn -0.705600 -0.471400 0.529000
+vn -0.498000 -0.867200 0.000000
+vn -0.715200 -0.420400 -0.558300
+vn -0.635000 -0.514000 -0.576800
+vn -0.704900 0.000000 -0.709400
+vn -0.632200 0.466000 -0.618900
+vn -0.705600 0.471400 -0.529000
+vn -0.498000 0.867200 0.000000
+vn -0.502100 0.575400 0.645600
+vn -0.477100 0.599400 0.642700
+vn -0.440900 0.000000 0.897600
+vn -0.474700 -0.585600 0.657100
+vn -0.500700 -0.590400 0.633000
+vn -0.435500 -0.900200 0.000000
+vn -0.502100 -0.575400 -0.645600
+vn -0.477100 -0.599400 -0.642700
+vn -0.440900 0.000000 -0.897600
+vn -0.474700 0.585600 -0.657100
+vn -0.500700 0.590400 -0.633000
+vn -0.435500 0.900200 0.000000
+vn 0.000000 0.682000 0.731300
+vn 0.000000 0.000000 1.000000
+vn 0.000000 -0.682000 0.731300
+vn 0.000000 -1.000000 0.000000
+vn 0.000000 -0.682000 -0.731300
+vn 0.000000 0.000000 -1.000000
+vn 0.000000 0.682000 -0.731300
+vn 0.000000 1.000000 0.000000
+vn 0.652000 0.517100 0.554500
+vn 0.601400 0.530500 0.597400
+vn 0.628100 -0.000000 0.778100
+vn 0.602900 -0.544100 0.583500
+vn 0.654700 -0.501900 0.565200
+vn 0.511300 -0.859400 0.000000
+vn 0.652000 -0.517100 -0.554500
+vn 0.601400 -0.530500 -0.597400
+vn 0.628100 -0.000000 -0.778100
+vn 0.602900 0.544100 -0.583500
+vn 0.654700 0.501900 -0.565200
+vn 0.511300 0.859400 0.000000
+vn 0.788600 0.408300 0.459800
+vn 0.771100 0.412900 0.484600
+vn 0.720900 -0.000000 0.693000
+vn 0.773500 -0.420800 0.473900
+vn 0.789100 -0.398400 0.467600
+vn 0.752800 -0.658300 0.000000
+vn 0.788600 -0.408300 -0.459800
+vn 0.771100 -0.412900 -0.484600
+vn 0.720900 -0.000000 -0.693000
+vn 0.773500 0.420800 -0.473900
+vn 0.789100 0.398400 -0.467600
+vn 0.752800 0.658300 0.000000
+vn 0.915100 0.261500 0.306900
+vn 0.894400 0.272400 0.354800
+vn 0.894000 -0.000000 0.448100
+vn 0.897100 -0.286500 0.336300
+vn 0.916300 -0.243900 0.317700
+vn 0.867400 -0.497600 0.000000
+vn 0.915100 -0.261500 -0.306900
+vn 0.894400 -0.272400 -0.354800
+vn 0.894000 -0.000000 -0.448100
+vn 0.897100 0.286500 -0.336300
+vn 0.916300 0.243900 -0.317700
+vn 0.867400 0.497600 0.000000
+vn -0.996500 0.045300 -0.070800
+vn -0.989900 0.007200 -0.141500
+vn -0.996000 0.000000 -0.089700
+vn -0.995000 -0.053800 -0.084100
+vn -0.996100 -0.004400 -0.087800
+vn -0.992700 -0.121000 0.000000
+vn -0.996500 -0.045300 0.070800
+vn -0.989900 -0.007200 0.141500
+vn -0.996000 0.000000 0.089700
+vn -0.995000 0.053800 0.084100
+vn -0.996100 0.004400 0.087800
+vn -0.992700 0.121000 0.000000
+usemtl emerald_obj_1Default
+s off
+f 1//1 2//1 3//1
+f 1//1 3//1 4//1
+f 5//2 6//2 7//2
+f 5//2 7//2 8//2
+f 9//3 10//3 11//3
+f 9//3 11//3 12//3
+f 13//4 14//4 15//4
+f 13//4 15//4 16//4
+f 17//5 18//5 19//5
+f 17//5 19//5 20//5
+f 17//5 20//5 21//5
+f 17//5 21//5 22//5
+f 17//5 22//5 23//5
+f 17//5 23//5 24//5
+f 25//6 26//6 27//6
+f 25//6 27//6 28//6
+f 25//6 28//6 29//6
+f 25//6 29//6 30//6
+f 25//6 30//6 31//6
+f 25//6 31//6 32//6
+f 15//7 2//7 1//7
+f 15//8 1//8 16//8
+f 3//9 10//9 9//9
+f 3//10 9//10 4//10
+f 13//11 6//11 5//11
+f 13//12 5//12 14//12
+f 7//13 12//13 11//13
+f 7//14 11//14 8//14
+f 16//15 1//15 33//15
+f 16//16 33//16 34//16
+f 1//17 4//17 35//17
+f 1//17 35//17 33//17
+f 4//18 9//18 36//18
+f 4//19 36//19 35//19
+f 9//20 12//20 37//20
+f 9//20 37//20 36//20
+f 12//21 7//21 38//21
+f 12//22 38//22 37//22
+f 7//23 6//23 39//23
+f 7//23 39//23 38//23
+f 6//24 13//24 40//24
+f 6//25 40//25 39//25
+f 13//26 16//26 34//26
+f 13//26 34//26 40//26
+f 34//27 33//27 41//27
+f 34//28 41//28 42//28
+f 33//29 35//29 43//29
+f 33//29 43//29 41//29
+f 35//30 36//30 44//30
+f 35//31 44//31 43//31
+f 36//32 37//32 45//32
+f 36//32 45//32 44//32
+f 37//33 38//33 46//33
+f 37//34 46//34 45//34
+f 38//35 39//35 47//35
+f 38//35 47//35 46//35
+f 39//36 40//36 48//36
+f 39//37 48//37 47//37
+f 40//38 34//38 42//38
+f 40//38 42//38 48//38
+f 42//39 41//39 49//39
+f 42//39 49//39 50//39
+f 41//40 43//40 51//40
+f 41//40 51//40 49//40
+f 43//41 44//41 52//41
+f 43//41 52//41 51//41
+f 44//42 45//42 53//42
+f 44//42 53//42 52//42
+f 45//43 46//43 54//43
+f 45//43 54//43 53//43
+f 46//44 47//44 55//44
+f 46//44 55//44 54//44
+f 47//45 48//45 56//45
+f 47//45 56//45 55//45
+f 48//46 42//46 50//46
+f 48//46 50//46 56//46
+f 50//47 49//47 57//47
+f 50//48 57//48 58//48
+f 49//49 51//49 59//49
+f 49//49 59//49 57//49
+f 51//50 52//50 60//50
+f 51//51 60//51 59//51
+f 52//52 53//52 61//52
+f 52//52 61//52 60//52
+f 53//53 54//53 62//53
+f 53//54 62//54 61//54
+f 54//55 55//55 63//55
+f 54//55 63//55 62//55
+f 55//56 56//56 64//56
+f 55//57 64//57 63//57
+f 56//58 50//58 58//58
+f 56//58 58//58 64//58
+f 58//59 57//59 65//59
+f 58//60 65//60 66//60
+f 57//61 59//61 67//61
+f 57//61 67//61 65//61
+f 59//62 60//62 68//62
+f 59//63 68//63 67//63
+f 60//64 61//64 69//64
+f 60//64 69//64 68//64
+f 61//65 62//65 70//65
+f 61//66 70//66 69//66
+f 62//67 63//67 71//67
+f 62//67 71//67 70//67
+f 63//68 64//68 72//68
+f 63//69 72//69 71//69
+f 64//70 58//70 66//70
+f 64//70 66//70 72//70
+f 66//71 65//71 18//71
+f 66//72 18//72 17//72
+f 65//73 67//73 19//73
+f 65//73 19//73 18//73
+f 67//74 68//74 20//74
+f 67//75 20//75 19//75
+f 68//76 69//76 21//76
+f 68//76 21//76 20//76
+f 69//77 70//77 22//77
+f 69//78 22//78 21//78
+f 70//79 71//79 23//79
+f 70//79 23//79 22//79
+f 71//80 72//80 24//80
+f 71//81 24//81 23//81
+f 72//82 66//82 17//82
+f 72//82 17//82 24//82
+f 14//83 5//83 26//83
+f 14//84 26//84 25//84
+f 5//85 8//85 27//85
+f 5//85 27//85 26//85
+f 8//86 11//86 28//86
+f 8//87 28//87 27//87
+f 11//88 10//88 29//88
+f 11//88 29//88 28//88
+f 10//89 3//89 30//89
+f 10//90 30//90 29//90
+f 3//91 2//91 31//91
+f 3//91 31//91 30//91
+f 2//92 15//92 32//92
+f 2//93 32//93 31//93
+f 15//94 14//94 25//94
+f 15//94 25//94 32//94

examples/webgl_materials_reflectivity.html

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>threejs webgl - materials - hdr environment mapping</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				color: #fff;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+
+				background-color: #000;
+
+				margin: 0px;
+				overflow: hidden;
+			}
+			a { color: #88f }
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				padding: 5px;
+			}
+		</style>
+	</head>
+	<body>
+
+		<div id="container"></div>
+		<div id="info"><a href="http://threejs.org" target="_blank">threejs</a> - Standard Material Reflectivity (reflectance at F0) example by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
+
+		<script src="../build/three.js"></script>
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/RGBELoader.js"></script>
+		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+
+		<script src="js/Half.js"></script>
+		<script src="js/Encodings.js"></script>
+		<script src="js/pmrem/PMREMGenerator.js"></script>
+		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script src="js/postprocessing/EffectComposer.js"></script>
+		<script src="js/postprocessing/RenderPass.js"></script>
+		<script src="js/postprocessing/MaskPass.js"></script>
+		<script src="js/postprocessing/ShaderPass.js"></script>
+		<script src="js/shaders/CopyShader.js"></script>
+		<script src="js/shaders/FXAAShader.js"></script>
+		<script src="js/postprocessing/BloomPass.js"></script>
+		<script src="js/shaders/ConvolutionShader.js"></script>
+
+		<script src="js/loaders/OBJLoader.js"></script>
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var container, stats;
+			var params = {
+				projection: 'normal',
+				autoRotate: true,
+				reflectivity: 1.0,
+				background: false,
+				exposure: 1.0,
+				gemColor: 'Green'
+			};
+			var camera, scene, renderer, controls, objects = [];
+			var hdrCubeMap;
+			var composer;
+			var gemBackMaterial, gemFrontMaterial;
+			var hdrCubeRenderTarget;
+
+			init();
+			animate();
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
+				camera.position.set( 0.0, -10, 20 * 3.5 );
+
+				scene = new THREE.Scene();
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setClearColor( new THREE.Color( 0x000000 ) );
+
+				gemBackMaterial = new THREE.MeshPhysicalMaterial( {
+					map: null,
+					color: 0x0000ff,
+					metalness: 1.0,
+					roughness: 0,
+					opacity: 0.5,
+					side: THREE.BackSide,
+					transparent: true,
+					shading: THREE.SmoothShading,
+					envMapIntensity: 5,
+					premultipliedAlpha: true
+					// TODO: Add custom blend mode that modulates background color by this materials color.
+				} );
+
+				gemFrontMaterial = new THREE.MeshPhysicalMaterial( {
+					map: null,
+					color: 0x0000ff,
+					metalness: 0.0,
+					roughness: 0,
+					opacity: 0.15,
+					side: THREE.FrontSide,
+					transparent: true,
+					shading: THREE.SmoothShading,
+					envMapIntensity: 5,
+					premultipliedAlpha: true
+				} );
+
+				var manager = new THREE.LoadingManager();
+				manager.onProgress = function ( item, loaded, total ) {
+
+					console.log( item, loaded, total );
+
+				};
+
+				var loader = new THREE.OBJLoader( manager );
+				loader.load( 'models/obj/emerald.obj', function ( object ) {
+
+					object.traverse( function ( child ) {
+
+						if ( child instanceof THREE.Mesh ) {
+
+							child.material = gemBackMaterial;
+							var second = child.clone();
+							second.material = gemFrontMaterial;
+
+							var parent = new THREE.Group();
+							parent.add( second );
+							parent.add( child );
+							scene.add( parent );
+
+							objects.push( parent );
+
+						}
+
+					} );
+
+
+				} );
+
+				var genCubeUrls = function( prefix, postfix ) {
+					return [
+						prefix + 'px' + postfix, prefix + 'nx' + postfix,
+						prefix + 'py' + postfix, prefix + 'ny' + postfix,
+						prefix + 'pz' + postfix, prefix + 'nz' + postfix
+					];
+				};
+
+				var hdrUrls = genCubeUrls( "./textures/cube/pisaHDR/", ".hdr" );
+				new THREE.HDRCubeTextureLoader().load( THREE.UnsignedByteType, hdrUrls, function ( hdrCubeMap ) {
+
+					var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+					pmremGenerator.update( renderer );
+
+					var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+					pmremCubeUVPacker.update( renderer );
+
+					hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+					gemFrontMaterial.envMap = gemBackMaterial.envMap = hdrCubeRenderTarget;
+					gemFrontMaterial.needsUpdate = gemBackMaterial.needsUpdate = true;
+				} );
+
+
+				// Lights
+
+				scene.add( new THREE.AmbientLight( 0x222222 ) );
+
+				var pointLight1 = new THREE.PointLight( 0xffffff );
+				pointLight1.position.set( 150, 10, 0 );
+				pointLight1.castShadow = false;
+				scene.add( pointLight1 );
+
+				var pointLight2 = new THREE.PointLight( 0xffffff );
+				pointLight2.position.set( -150, 0, 0 );
+				scene.add( pointLight2 );
+
+				var pointLight3 = new THREE.PointLight( 0xffffff );
+				pointLight3.position.set( 0, -10, -150 );
+				scene.add( pointLight3 );
+
+				var pointLight4 = new THREE.PointLight( 0xffffff );
+				pointLight4.position.set( 0, 0, 150 );
+				scene.add( pointLight4 );
+
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.shadowMap.enabled = true;
+				container.appendChild( renderer.domElement );
+
+				renderer.gammaInput = true;
+				renderer.gammaOutput = true;
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+
+				container.appendChild( stats.domElement );
+
+				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.target.set( 0, 0, 0 );
+				controls.update();
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+				var gui = new dat.GUI();
+
+				gui.add( params, 'reflectivity', 0, 1 );
+				gui.add( params, 'exposure', 0.1, 2 );
+				gui.add( params, 'autoRotate' );
+				gui.add( params, 'gemColor', [ 'Blue', 'Green', 'Red', 'White', 'Black' ] );
+				gui.open();
+
+			}
+
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				stats.begin();
+				render();
+				stats.end();
+
+			}
+
+			function render() {
+
+				if ( gemBackMaterial !== undefined && gemFrontMaterial !== undefined ) {
+
+					gemFrontMaterial.reflectivity = gemBackMaterial.reflectivity = params.reflectivity;
+
+					var newColor = gemBackMaterial.color;
+					switch( params.gemColor ) {
+						case 'Blue': newColor = new THREE.Color( 0x000088 ); break;
+						case 'Red': newColor = new THREE.Color( 0x880000 ); break;
+						case 'Green': newColor = new THREE.Color( 0x008800 ); break;
+						case 'White': newColor =  new THREE.Color( 0x888888 ); break;
+						case 'Black': newColor =  new THREE.Color( 0x0f0f0f ); break;
+					}
+					gemBackMaterial.color = gemFrontMaterial.color = newColor;
+
+
+				}
+
+				renderer.toneMappingExposure = params.exposure;
+
+				var timer = Date.now() * 0.00025;
+
+				camera.lookAt( scene.position );
+
+				if( params.autoRotate ) {
+					for ( var i = 0, l = objects.length; i < l; i ++ ) {
+
+						var object = objects[ i ];
+						object.rotation.y += 0.005;
+
+					}
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>