Added object-space normal map example

examples/files.js

@@ -161,6 +161,7 @@ var files = {
 		"webgl_materials_lightmap",
 		"webgl_materials_nodes",
 		"webgl_materials_normalmap",
+		"webgl_materials_normalmap_object_space",
 		"webgl_materials_parallaxmap",
 		"webgl_materials_reflectivity",
 		"webgl_materials_shaders_fresnel",

examples/models/gltf/Nefertiti/README.md

+# Nefertiti
+
+## License Information
+
+Model is provided under a creative commons license for non-commercial purposes (CC BY-NC).
+
+3D scan of a copy of the Nefertiti Bust
+
+Digitized by Fraunhofer IGD, Competence Center Cultural Heritage Digitization, http://www.cultlab3d.de/

examples/models/gltf/Nefertiti/scene.gltf

+{
+  "accessors": [
+    {
+      "bufferView": 1,
+      "byteOffset": 0,
+      "byteStride": 0,
+      "componentType": 5126,
+      "count": 11378,
+      "max": [
+        5.6986370086669922,
+        29.504100799560547,
+        7.6080727577209473
+      ],
+      "min": [
+        -6.0125927925109863,
+        0.11976776272058487,
+        -10.487000465393066
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 136536,
+      "byteStride": 0,
+      "componentType": 5126,
+      "count": 11378,
+      "max": [
+        0.76048284769058228,
+        0.99951171875
+      ],
+      "min": [
+        0.00048828125,
+        1.9942936191341687e-12
+      ],
+      "type": "VEC2"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 227560,
+      "byteStride": 0,
+      "componentType": 5126,
+      "count": 11378,
+      "max": [
+        0.99920654296875,
+        0.9923892617225647,
+        0.99845790863037109
+      ],
+      "min": [
+        -0.99988287687301636,
+        -0.95674973726272583,
+        -0.99919658899307251
+      ],
+      "type": "VEC3"
+    },
+    {
+      "bufferView": 1,
+      "byteOffset": 364096,
+      "byteStride": 0,
+      "componentType": 5126,
+      "count": 11378,
+      "max": [
+        0.99995666742324829,
+        0.99990606307983398,
+        0.99975591897964478,
+        1
+      ],
+      "min": [
+        -0.99938887357711792,
+        -0.99999749660491943,
+        -0.99997586011886597,
+        1
+      ],
+      "type": "VEC4"
+    },
+    {
+      "bufferView": 0,
+      "byteOffset": 0,
+      "byteStride": 0,
+      "componentType": 5123,
+      "count": 58446,
+      "max": [
+        11377
+      ],
+      "min": [
+        0
+      ],
+      "type": "SCALAR"
+    }
+  ],
+  "asset": {
+    "generator": "Created by MOPS CLI \/ instantUV v1.1.3",
+    "version": "2.0"
+  },
+  "bufferViews": [
+    {
+      "buffer": 0,
+      "byteLength": 116892,
+      "byteOffset": 0,
+      "target": 34963
+    },
+    {
+      "buffer": 0,
+      "byteLength": 546144,
+      "byteOffset": 116892,
+      "target": 34962
+    }
+  ],
+  "buffers": [
+    {
+      "byteLength": 663036,
+      "type": "arraybuffer",
+      "uri": "scene.data.bin"
+    }
+  ],
+  "extensionsUsed": [],
+  "images": [
+    {
+      "uri": "material0_basecolor.jpg"
+    },
+    {
+      "uri": "material0_normal.jpg"
+    }
+  ],
+  "materials": [
+    {
+      "normalTexture": {
+        "index": 1
+      },
+      "pbrMetallicRoughness": {
+        "baseColorFactor": [
+          1,
+          1,
+          1,
+          1
+        ],
+        "baseColorTexture": {
+          "index": 0
+        },
+        "metallicFactor": 0.0,
+        "roughnessFactor": 0.5
+      }
+    }
+  ],
+  "meshes": [
+    {
+      "name": "mainMesh",
+      "primitives": [
+        {
+          "attributes": {
+            "NORMAL": 2,
+            "POSITION": 0,
+            "TANGENT": 3,
+            "TEXCOORD_0": 1
+          },
+          "indices": 4,
+          "material": 0,
+          "mode": 4
+        }
+      ]
+    }
+  ],
+  "nodes": [
+    {
+      "children": [],
+      "mesh": 0,
+      "name": "rootNode2"
+    }
+  ],
+  "samplers": [
+    {},
+    {}
+  ],
+  "scene": 0,
+  "scenes": [
+    {
+      "nodes": [
+        0
+      ]
+    }
+  ],
+  "textures": [
+    {
+      "sampler": 0,
+      "source": 0
+    },
+    {
+      "sampler": 1,
+      "source": 1
+    }
+  ]
+}

examples/webgl_materials_normalmap_object_space.html

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - normal map [object space]</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 {
+				font-family: Monospace;
+				background-color: #000;
+				color: #fff;
+				margin: 0px;
+				overflow: hidden;
+			}
+
+			a {
+				color: #ffa;
+				font-weight: bold;
+			}
+
+			#info {
+				color: #fff;
+				position: absolute;
+				top: 10px;
+				width: 100%;
+				text-align: center;
+				z-index: 100;
+				display:block;
+			}
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - webgl object-space normalmap demo<br />
+			Nefertiti Bust by
+			<a href="http://www.cultlab3d.de/" target="_blank" rel="noopener">CultLab3D</a><br />
+
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/controls/OrbitControls.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+
+		<script src="js/Detector.js"></script>
+
+		<script>
+
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var mesh, renderer, scene, camera;
+
+			var obj;
+
+			init();
+
+			function init() {
+
+				// renderer
+				renderer = new THREE.WebGLRenderer();
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+				renderer.gammaOutput = true;
+
+				// scene
+				scene = new THREE.Scene();
+
+				// camera
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.set( - 10, 0, 23 );
+				scene.add( camera );
+
+				// controls
+				var controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls.addEventListener( 'change', render );
+				controls.minDistance = 10;
+				controls.maxDistance = 50;
+				controls.enablePan = false;
+
+				// ambient
+				scene.add( new THREE.AmbientLight( 0xffffff, .2 ) );
+
+				// light
+				var light = new THREE.PointLight( 0xffffff, 1.5 );
+				camera.add( light );
+
+				// model
+				new THREE.GLTFLoader().load( 'models/gltf/Nefertiti/scene.gltf', function ( gltf ) {
+
+					gltf.scene.traverse( function ( child ) {
+
+						if ( child.isMesh ) {
+
+							// glTF currently supports only tangent-space normal maps.
+							// this model has been modified to demonstrate the use of an object-space normal map.
+
+							child.material.normalMapType = THREE.ObjectSpaceNormalMap;
+
+							// attribute normals are not required with an object-space normal map. remove them.
+
+							child.geometry.removeAttribute( 'normal' );
+
+							//
+
+							child.material.side = THREE.DoubleSide;
+
+							child.scale.multiplyScalar( 0.5 );
+
+							// recenter
+
+							new THREE.Box3().setFromObject( child ).getCenter( child.position ).multiplyScalar( - 1 );
+
+							scene.add( child );
+
+						}
+
+					} );
+
+					render();
+
+				} );
+
+
+			    window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				render();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>