count<\/strong>\u00a0isosceles triangles and randomizes them:<\/p>\nfunction getInstances( count ){\r\n\r\n \/\/creates an instancedBufferGeometry\r\n var geometry = new THREE.InstancedBufferGeometry();\r\n\r\n \/\/a vertex buffer for the 'blueprint' representing a single triangle\r\n var blueprint = [];\r\n for ( var i = 0; i < 3; i++){\r\n var a = Math.PI \/ 180 * 120 * i;\r\n blueprint.push( Math.cos( a ), Math.sin( a ), 0 );\r\n }\r\n\r\n \/\/assign the positions as a 'regular' BufferAttribute\r\n var attribute = new THREE.BufferAttribute( new Float32Array( blueprint ), 3);\r\n geometry.addAttribute( 'position', attribute );\r\n\r\n \/\/and that's it for the 'blueprint' ; all instances will share these data\r\n \/\/we can add more ; normals and uvs are very often used to shade the mesh.\r\n\r\n \/\/now for the InstancedBufferAttributes, what makes each instance different.\r\n\r\n \/\/we create some float buffers to store the properties of each instance\r\n var translation = new Float32Array( count * 3 );\r\n var rotation = new Float32Array( count * 4 );\r\n var scale = new Float32Array( count * 3 );\r\n\r\n \/\/and iterators for convenience :)\r\n var translationIterator = 0;\r\n var rotationIterator = 0;\r\n var scaleIterator = 0;\r\n\r\n \/\/and a temp quaternion (rotations are represented by Quaternions, not Eulers)\r\n var q = new THREE.Quaternion();\r\n\r\n \/\/now let's feed some random values to transform the instances\r\n for ( i = 0; i < count; i++ ){\r\n\r\n \/\/a random position\r\n translation[ translationIterator++ ] = ( Math.random() - .5 ) * 1000;\r\n translation[ translationIterator++ ] = ( Math.random() - .5 ) * 1000;\r\n translation[ translationIterator++ ] = ( Math.random() - .5 ) * 1000;\r\n\r\n \/\/a random rotation\r\n\r\n \/\/randomize quaternion not sure if it's how you do it but it looks random\r\n q.set( ( Math.random() - .5 ) * 2,\r\n ( Math.random() - .5 ) * 2,\r\n ( Math.random() - .5 ) * 2,\r\n Math.random() * Math.PI );\r\n q.normalize();\r\n\r\n \/\/assign to bufferAttribute\r\n rotation[ rotationIterator++ ] = q.x;\r\n rotation[ rotationIterator++ ] = q.y;\r\n rotation[ rotationIterator++ ] = q.z;\r\n rotation[ rotationIterator++ ] = q.w;\r\n\r\n \/\/a random scale\r\n scale[ scaleIterator++ ] = 0.1 + ( Math.random() * 4 );\r\n scale[ scaleIterator++ ] = 0.1 + ( Math.random() * 4 );\r\n scale[ scaleIterator++ ] = 0.1 + ( Math.random() * 4 );\r\n\r\n }\r\n\r\n \/\/create the InstancedBufferAttributes from our float buffers\r\n geometry.addAttribute( 'translation', new THREE.InstancedBufferAttribute( translation, 3, 1 ) );\r\n geometry.addAttribute( 'rotation', new THREE.InstancedBufferAttribute( rotation, 4, 1 ) );\r\n geometry.addAttribute( 'scale', new THREE.InstancedBufferAttribute( scale, 3, 1 ) );\r\n\r\n \/\/ create a material\r\n var material = new THREE.RawShaderMaterial( {\r\n vertexShader: vertexShader,\r\n fragmentShader: fragmentShader,\r\n side:THREE.DoubleSide\r\n } );\r\n return new THREE.Mesh( geometry, material );\r\n}<\/pre>\nFor\u00a0the vertex shader, you can do something like this (picked from the THREE examples):<\/p>\n
precision highp float;\r\nuniform mat4 modelViewMatrix;\r\nuniform mat4 projectionMatrix;\r\nuniform mat3 normalMatrix;\r\n\r\n\/\/'blueprint' attribute\r\nattribute vec3 position;\r\n\r\n\/\/instance attributes \r\nattribute vec3 translation;\r\nattribute vec4 rotation;\r\nattribute vec3 scale;\r\n\r\n\/\/ transforms the 'blueprint' geometry with instance attributes\r\nvec3 transform( inout vec3 position, vec3 T, vec4 R, vec3 S ) {\r\n \/\/applies the scale\r\n position *= S;\r\n \/\/computes the rotation where R is a (vec4) quaternion\r\n position += 2.0 * cross( R.xyz, cross( R.xyz, position ) + R.w * position );\r\n \/\/translates the transformed 'blueprint'\r\n position += T;\r\n \/\/return the transformed position\r\n return position;\r\n}\r\n\r\n\/\/re-use position for shading\r\nvarying vec3 vPos;\r\nvoid main() {\r\n \/\/collects the 'blueprint' coordinates\r\n vec3 pos = position;\r\n \/\/transform it\r\n transform( pos, translation, rotation, scale );\r\n \/\/project to get the fragment position\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 );\r\n \/\/just to render something :)\r\n vPos = pos;\r\n}<\/pre>\nand the fragment uses the world position as the fragment color:<\/p>\n
precision highp float;\r\nvarying vec3 vPos;\r\nvoid main() {\r\n gl_FragColor = vec4( normalize( vPos ), 1. );\r\n}<\/pre>\nWith the code above, the instances\u00a0<\/em>should be properly positioned, rotated and scaled\u00a0and the mesh should look something like this:<\/p>\n