首页 发现 帮助
登录
javascript
/
three.js
镜像自地址 https://github.com/tazdij/three.js.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Implemented InstancedMesh

Mr.doob 5 年之前
父节点
7b1648436c
当前提交
01c6bb4668
共有 11 个文件被更改，包括 304 次插入 和 12 次删除
分列视图 显示文件统计
  1. 1 0
      examples/files.js
  2. 143 0
      examples/webgl_instancing.html
  3. 1 0
      src/Three.js
  4. 40 0
      src/objects/InstancedMesh.js
  5. 71 7
      src/renderers/WebGLRenderer.js
  6. 9 1
      src/renderers/shaders/ShaderChunk/defaultnormal_vertex.glsl.js
  7. 9 1
      src/renderers/shaders/ShaderChunk/project_vertex.glsl.js
  8. 9 1
      src/renderers/shaders/ShaderChunk/worldpos_vertex.glsl.js
  9. 8 1
      src/renderers/webgl/WebGLObjects.js
  10. 8 0
      src/renderers/webgl/WebGLProgram.js
  11. 5 1
      src/renderers/webgl/WebGLPrograms.js

+ 1 - 0
examples/files.js
查看文件 

@@ -47,6 +47,7 @@ var files = {
 
 		"webgl_geometry_text_shapes",
 
 		"webgl_geometry_text_stroke",
 
 		"webgl_helpers",
 
+		"webgl_instancing",
 
 		"webgl_interactive_buffergeometry",
 
 		"webgl_interactive_cubes",
 
 		"webgl_interactive_cubes_gpu",

+ 143 - 0
examples/webgl_instancing.html
查看文件 

@@ -0,0 +1,143 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - instancing</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>
 
+
 
+		<script type="module">
 
+
 
+			import * as THREE from '../build/three.module.js';
 
+
 
+			import Stats from './jsm/libs/stats.module.js';
 
+
 
+			var camera, scene, renderer, stats;
 
+
 
+			var mouseX = 0, mouseY = 0;
 
+
 
+			var windowHalfX = window.innerWidth / 2;
 
+			var windowHalfY = window.innerHeight / 2;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 100 );
 
+				camera.position.z = 25;
 
+
 
+				scene = new THREE.Scene();
 
+				scene.background = new THREE.Color( 0xffffff );
 
+
 
+				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 
+				var material = new THREE.MeshNormalMaterial();
 
+
 
+				var count = 10000;
 
+
 
+			 	var mesh = new THREE.InstancedMesh( geometry, material, count );
 
+
 
+				var dummy = new THREE.Object3D();
 
+
 
+				for ( var i = 0; i < count; i ++ ) {
 
+
 
+					dummy.position.set(
 
+						Math.random() * 20 - 10,
 
+						Math.random() * 20 - 10,
 
+						Math.random() * 20 - 10
 
+					);
 
+
 
+					dummy.rotation.set(
 
+						Math.random() * Math.PI,
 
+						Math.random() * Math.PI,
 
+						Math.random() * Math.PI
 
+					);
 
+
 
+					dummy.updateMatrix();
 
+
 
+					mesh.setMatrixAt( dummy.matrix, i );
 
+
 
+				}
 
+
 
+				scene.add( mesh );
 
+
 
+				//
 
+
 
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 
+				renderer.setPixelRatio( window.devicePixelRatio );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+				document.body.appendChild( renderer.domElement );
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				document.body.appendChild( stats.dom );
 
+
 
+				//
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			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();
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				var time = Date.now() * 0.001;
 
+
 
+				var rx = Math.sin( time * 0.7 ) * 0.5,
 
+					ry = Math.sin( time * 0.3 ) * 0.5,
 
+					rz = Math.sin( time * 0.2 ) * 0.5;
 
+
 
+				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 
+				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				var mesh = scene.children[ 0 ];
 
+				mesh.rotation.x = rx;
 
+				mesh.rotation.y = ry;
 
+				mesh.rotation.z = rz;
 
+
 
+				renderer.render( scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 1 - 0
src/Three.js
查看文件 

@@ -18,6 +18,7 @@ export { SkinnedMesh } from './objects/SkinnedMesh.js';
 
 export { Skeleton } from './objects/Skeleton.js';
 
 export { Bone } from './objects/Bone.js';
 
 export { Mesh } from './objects/Mesh.js';
 
+export { InstancedMesh } from './objects/InstancedMesh.js';
 
 export { LineSegments } from './objects/LineSegments.js';
 
 export { LineLoop } from './objects/LineLoop.js';
 
 export { Line } from './objects/Line.js';

+ 40 - 0
src/objects/InstancedMesh.js
查看文件 

@@ -0,0 +1,40 @@
 
+/**
 
+ * @author mrdoob / http://mrdoob.com/
 
+ */
 
+
 
+import { BufferAttribute } from '../core/BufferAttribute.js';
 
+import { Matrix3 } from '../math/Matrix3.js';
 
+import { Mesh } from './Mesh.js';
 
+
 
+var _matrix3 = new Matrix3();
 
+
 
+function InstancedMesh( geometry, material, count ) {
 
+
 
+	Mesh.call( this, geometry, material );
 
+
 
+	this.instanceMatrix = new BufferAttribute( new Float32Array( count * 16 ), 16 );
 
+	this.instanceNormalMatrix = new BufferAttribute( new Float32Array( count * 9 ), 9 );
 
+
 
+}
 
+
 
+InstancedMesh.prototype = Object.assign( Object.create( Mesh.prototype ), {
 
+
 
+	constructor: InstancedMesh,
 
+
 
+	isInstancedMesh: true,
 
+
 
+	raycast: function () {},
 
+
 
+	setMatrixAt: function ( matrix, offset ) {
 
+
 
+		matrix.toArray( this.instanceMatrix.array, offset * 16 );
 
+
 
+		_matrix3.getNormalMatrix( matrix ).toArray( this.instanceNormalMatrix.array, offset * 9 );
 
+
 
+	},
 
+
 
+	updateMorphTargets: function () {}
 
+
 
+} );
 
+
 
+export { InstancedMesh };

+ 71 - 7
src/renderers/WebGLRenderer.js
查看文件 

@@ -258,7 +258,7 @@ function WebGLRenderer( parameters ) {
 
 
 		capabilities = new WebGLCapabilities( _gl, extensions, parameters );
 
 
-		if ( ! capabilities.isWebGL2 ) {
 
+		if ( capabilities.isWebGL2 === false ) {
 
 
 			extensions.get( 'WEBGL_depth_texture' );
 
 			extensions.get( 'OES_texture_float' );
 
@@ -283,7 +283,7 @@ function WebGLRenderer( parameters ) {
 
 		textures = new WebGLTextures( _gl, extensions, state, properties, capabilities, utils, info );
 
 		attributes = new WebGLAttributes( _gl );
 
 		geometries = new WebGLGeometries( _gl, attributes, info );
 
-		objects = new WebGLObjects( geometries, info );
 
+		objects = new WebGLObjects( _gl, geometries, attributes, info );
 
 		morphtargets = new WebGLMorphtargets( _gl );
 
 		programCache = new WebGLPrograms( _this, extensions, capabilities );
 
 		renderLists = new WebGLRenderLists();
 
@@ -765,7 +765,7 @@ function WebGLRenderer( parameters ) {
 
 
 		if ( updateBuffers ) {
 
 
-			setupVertexAttributes( material, program, geometry );
 
+			setupVertexAttributes( object, geometry, material, program );
 
 
 			if ( index !== null ) {
 
 
@@ -831,7 +831,6 @@ function WebGLRenderer( parameters ) {
 
 
 			}
 
 
-
 
 		} else if ( object.isLine ) {
 
 
 			var lineWidth = material.linewidth;
 
@@ -864,7 +863,17 @@ function WebGLRenderer( parameters ) {
 
 
 		}
 
 
-		if ( geometry && geometry.isInstancedBufferGeometry ) {
 
+		if ( object.isInstancedMesh ) {
 
+
 
+			// HACK
 
+
 
+			geometry.maxInstancedCount = object.instanceMatrix.count;
 
+
 
+			renderer.renderInstances( geometry, drawStart, drawCount );
 
+
 
+		} else if ( geometry && geometry.isInstancedBufferGeometry ) {
 
+
 
+			// TODO: Remove all this?
 
 
 			if ( geometry.maxInstancedCount > 0 ) {
 
 
@@ -880,9 +889,20 @@ function WebGLRenderer( parameters ) {
 
 
 	};
 
 
-	function setupVertexAttributes( material, program, geometry ) {
 
+	function setupVertexAttributes( object, geometry, material, program ) {
 
+
 
+		if ( object.isInstancedMesh ) {
 
+
 
+			if ( extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
+
 
+				console.error( 'THREE.WebGLRenderer.setupVertexAttributes: using THREE.InstancedBufferGeometry but hardware does not support extension ANGLE_instanced_arrays.' );
 
+				return;
 
+
 
+			}
 
+
 
+		} else if ( geometry && geometry.isInstancedBufferGeometry && ! capabilities.isWebGL2 ) {
 
 
-		if ( geometry && geometry.isInstancedBufferGeometry && ! capabilities.isWebGL2 ) {
 
+			// TODO Remove
 
 
 			if ( extensions.get( 'ANGLE_instanced_arrays' ) === null ) {
 
 
@@ -972,6 +992,50 @@ function WebGLRenderer( parameters ) {
 
 
 					}
 
 
+				} else if ( name === 'instanceMatrix' ) {
 
+
 
+					var attribute = attributes.get( object.instanceMatrix );
 
+
 
+					// TODO Attribute may not be available on context restore
 
+
 
+					if ( attribute === undefined ) continue;
 
+
 
+					var buffer = attribute.buffer;
 
+					var type = attribute.type;
 
+
 
+					state.enableAttributeAndDivisor( programAttribute + 0, 1 );
 
+					state.enableAttributeAndDivisor( programAttribute + 1, 1 );
 
+					state.enableAttributeAndDivisor( programAttribute + 2, 1 );
 
+					state.enableAttributeAndDivisor( programAttribute + 3, 1 );
 
+
 
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, buffer );
 
+
 
+					_gl.vertexAttribPointer( programAttribute + 0, 4, type, false, 64, 0 );
 
+					_gl.vertexAttribPointer( programAttribute + 1, 4, type, false, 64, 16 );
 
+					_gl.vertexAttribPointer( programAttribute + 2, 4, type, false, 64, 32 );
 
+					_gl.vertexAttribPointer( programAttribute + 3, 4, type, false, 64, 48 );
 
+
 
+				} else if ( name === 'instanceNormalMatrix' ) {
 
+
 
+					var attribute = attributes.get( object.instanceNormalMatrix );
 
+
 
+					// TODO Attribute may not be available on context restore
 
+
 
+					if ( attribute === undefined ) continue;
 
+
 
+					var buffer = attribute.buffer;
 
+					var type = attribute.type;
 
+
 
+					state.enableAttributeAndDivisor( programAttribute + 0, 1 );
 
+					state.enableAttributeAndDivisor( programAttribute + 1, 1 );
 
+					state.enableAttributeAndDivisor( programAttribute + 2, 1 );
 
+
 
+					_gl.bindBuffer( _gl.ARRAY_BUFFER, buffer );
 
+
 
+					_gl.vertexAttribPointer( programAttribute + 0, 3, type, false, 36, 0 );
 
+					_gl.vertexAttribPointer( programAttribute + 1, 3, type, false, 36, 12 );
 
+					_gl.vertexAttribPointer( programAttribute + 2, 3, type, false, 36, 24 );
 
+
 
 				} else if ( materialDefaultAttributeValues !== undefined ) {
 
 
 					var value = materialDefaultAttributeValues[ name ];

+ 9 - 1
src/renderers/shaders/ShaderChunk/defaultnormal_vertex.glsl.js
查看文件 

@@ -1,5 +1,13 @@
 
 export default /* glsl */`
 
-vec3 transformedNormal = normalMatrix * objectNormal;
 
+vec3 transformedNormal = objectNormal;
 
+
 
+#ifdef USE_INSTANCING
 
+
 
+	transformedNormal = instanceNormalMatrix * transformedNormal;
 
+
 
+#endif
 
+
 
+transformedNormal = normalMatrix * transformedNormal;
 
 
 #ifdef FLIP_SIDED

+ 9 - 1
src/renderers/shaders/ShaderChunk/project_vertex.glsl.js
查看文件 

@@ -1,5 +1,13 @@
 
 export default /* glsl */`
 
-vec4 mvPosition = modelViewMatrix * vec4( transformed, 1.0 );
 
+vec4 mvPosition = vec4( transformed, 1.0 );
 
+
 
+#ifdef USE_INSTANCING
 
+
 
+	mvPosition = instanceMatrix * mvPosition;
 
+
 
+#endif
 
+
 
+mvPosition = modelViewMatrix * mvPosition;
 
 
 gl_Position = projectionMatrix * mvPosition;
 
 `;

+ 9 - 1
src/renderers/shaders/ShaderChunk/worldpos_vertex.glsl.js
查看文件 

@@ -1,7 +1,15 @@
 
 export default /* glsl */`
 
 #if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
 
 
-	vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
 
+	vec4 worldPosition = vec4( transformed, 1.0 );
 
+
 
+	#ifdef USE_INSTANCING
 
+
 
+		worldPosition = instanceMatrix * worldPosition;
 
+
 
+	#endif
 
+
 
+	worldPosition = modelMatrix * worldPosition;
 
 
 #endif
 
 `;

+ 8 - 1
src/renderers/webgl/WebGLObjects.js
查看文件 

@@ -2,7 +2,7 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
 
-function WebGLObjects( geometries, info ) {
 
+function WebGLObjects( gl, geometries, attributes, info ) {
 
 
 	var updateList = {};
 
 
@@ -29,6 +29,13 @@ function WebGLObjects( geometries, info ) {
 
 
 		}
 
 
+		if ( object.isInstancedMesh ) {
 
+
 
+			attributes.update( object.instanceMatrix, gl.ARRAY_BUFFER );
 
+			attributes.update( object.instanceNormalMatrix, gl.ARRAY_BUFFER );
 
+
 
+		}
 
+
 
 		return buffergeometry;
 
 
 	}

+ 8 - 0
src/renderers/webgl/WebGLProgram.js
查看文件 

@@ -383,6 +383,7 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 			customDefines,
 
 
+			parameters.instancing ? '#define USE_INSTANCING' : '',
 
 			parameters.supportsVertexTextures ? '#define VERTEX_TEXTURES' : '',
 
 
 			'#define GAMMA_FACTOR ' + gammaFactorDefine,
 
@@ -453,6 +454,13 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters,
 
 
 			].join( '\n' ),
 
 
+			'#ifdef USE_INSTANCING',
 
+
 
+			' attribute mat4 instanceMatrix;',
 
+			' attribute mat3 instanceNormalMatrix;',
 
+
 
+			'#endif',
 
+
 
 			'attribute vec3 position;',
 
 			'attribute vec3 normal;',
 
 			'attribute vec2 uv;',

+ 5 - 1
src/renderers/webgl/WebGLPrograms.js
查看文件 

@@ -28,7 +28,8 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 	};
 
 
 	var parameterNames = [
 
-		"precision", "supportsVertexTextures", "map", "mapEncoding", "matcap", "matcapEncoding", "envMap", "envMapMode", "envMapEncoding",
 
+		"precision", "supportsVertexTextures", "instancing",
 
+		"map", "mapEncoding", "matcap", "matcapEncoding", "envMap", "envMapMode", "envMapEncoding",
 
 		"lightMap", "aoMap", "emissiveMap", "emissiveMapEncoding", "bumpMap", "normalMap", "objectSpaceNormalMap", "tangentSpaceNormalMap", "clearcoatNormalMap", "displacementMap", "specularMap",
 
 		"roughnessMap", "metalnessMap", "gradientMap",
 
 		"alphaMap", "combine", "vertexColors", "vertexTangents", "fog", "useFog", "fogExp2",
 
@@ -137,6 +138,9 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 			shaderID: shaderID,
 
 
 			precision: precision,
 
+
 
+			instancing: object.isInstancedMesh === true,
 
+
 
 			supportsVertexTextures: capabilities.vertexTextures,
 
 			outputEncoding: getTextureEncodingFromMap( ( ! currentRenderTarget ) ? null : currentRenderTarget.texture, renderer.gammaOutput ),
 
 			map: !! material.map,