From 749353837a7eccea18a35f34ff78ff8a0abce32f Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Tue, 22 Aug 2017 23:00:36 +0200 Subject: [PATCH] Examples: Simplify some buffer geometry examples --- examples/webgl_buffergeometry.html | 60 +++------ ...rgeometry_custom_attributes_particles.html | 33 ++--- examples/webgl_buffergeometry_lines.html | 23 ++-- .../webgl_buffergeometry_lines_indexed.html | 121 ++++++++++-------- examples/webgl_buffergeometry_points.html | 18 +-- examples/webgl_buffergeometry_rawshader.html | 33 +++-- examples/webgl_buffergeometry_uint.html | 75 ++++------- 7 files changed, 158 insertions(+), 205 deletions(-) diff --git a/examples/webgl_buffergeometry.html b/examples/webgl_buffergeometry.html index b8c0a1ba50..4cacc230e6 100644 --- a/examples/webgl_buffergeometry.html +++ b/examples/webgl_buffergeometry.html @@ -82,14 +82,14 @@ var geometry = new THREE.BufferGeometry(); - var positions = new Float32Array( triangles * 3 * 3 ); - var normals = new Float32Array( triangles * 3 * 3 ); - var colors = new Float32Array( triangles * 3 * 3 ); + var positions = []; + var normals = []; + var colors = []; var color = new THREE.Color(); - var n = 800, n2 = n/2; // triangles spread in the cube - var d = 12, d2 = d/2; // individual triangle size + var n = 800, n2 = n / 2; // triangles spread in the cube + var d = 12, d2 = d / 2; // individual triangle size var pA = new THREE.Vector3(); var pB = new THREE.Vector3(); @@ -98,7 +98,7 @@ var cb = new THREE.Vector3(); var ab = new THREE.Vector3(); - for ( var i = 0; i < positions.length; i += 9 ) { + for ( var i = 0; i < triangles; i ++ ) { // positions @@ -118,17 +118,9 @@ var cy = y + Math.random() * d - d2; var cz = z + Math.random() * d - d2; - positions[ i ] = ax; - positions[ i + 1 ] = ay; - positions[ i + 2 ] = az; - - positions[ i + 3 ] = bx; - positions[ i + 4 ] = by; - positions[ i + 5 ] = bz; - - positions[ i + 6 ] = cx; - positions[ i + 7 ] = cy; - positions[ i + 8 ] = cz; + positions.push( ax, ay, az ); + positions.push( bx, by, bz ); + positions.push( cx, cy, cz ); // flat face normals @@ -146,17 +138,9 @@ var ny = cb.y; var nz = cb.z; - normals[ i ] = nx; - normals[ i + 1 ] = ny; - normals[ i + 2 ] = nz; - - normals[ i + 3 ] = nx; - normals[ i + 4 ] = ny; - normals[ i + 5 ] = nz; - - normals[ i + 6 ] = nx; - normals[ i + 7 ] = ny; - normals[ i + 8 ] = nz; + normals.push( nx, ny, nz ); + normals.push( nx, ny, nz ); + normals.push( nx, ny, nz ); // colors @@ -166,25 +150,17 @@ color.setRGB( vx, vy, vz ); - colors[ i ] = color.r; - colors[ i + 1 ] = color.g; - colors[ i + 2 ] = color.b; - - colors[ i + 3 ] = color.r; - colors[ i + 4 ] = color.g; - colors[ i + 5 ] = color.b; - - colors[ i + 6 ] = color.r; - colors[ i + 7 ] = color.g; - colors[ i + 8 ] = color.b; + colors.push( color.r, color.g, color.b ); + colors.push( color.r, color.g, color.b ); + colors.push( color.r, color.g, color.b ); } function disposeArray() { this.array = null; } - geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).onUpload( disposeArray ) ); - geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ).onUpload( disposeArray ) ); - geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).onUpload( disposeArray ) ); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) ); + geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) ); geometry.computeBoundingSphere(); diff --git a/examples/webgl_buffergeometry_custom_attributes_particles.html b/examples/webgl_buffergeometry_custom_attributes_particles.html index 85ddee56ec..2b0c19eccb 100644 --- a/examples/webgl_buffergeometry_custom_attributes_particles.html +++ b/examples/webgl_buffergeometry_custom_attributes_particles.html @@ -85,15 +85,12 @@ var particles = 100000; - var WIDTH = window.innerWidth; - var HEIGHT = window.innerHeight; - init(); animate(); function init() { - camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 ); + camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.z = 300; scene = new THREE.Scene(); @@ -122,31 +119,29 @@ geometry = new THREE.BufferGeometry(); - var positions = new Float32Array( particles * 3 ); - var colors = new Float32Array( particles * 3 ); - var sizes = new Float32Array( particles ); + var positions = []; + var colors = []; + var sizes = []; var color = new THREE.Color(); - for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) { + for ( var i = 0; i < particles; i ++ ) { - positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius; - positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius; - positions[ i3 + 2 ] = ( Math.random() * 2 - 1 ) * radius; + positions.push( ( Math.random() * 2 - 1 ) * radius ); + positions.push( ( Math.random() * 2 - 1 ) * radius ); + positions.push( ( Math.random() * 2 - 1 ) * radius ); color.setHSL( i / particles, 1.0, 0.5 ); - colors[ i3 + 0 ] = color.r; - colors[ i3 + 1 ] = color.g; - colors[ i3 + 2 ] = color.b; + colors.push( color.r, color.g, color.b ); - sizes[ i ] = 20; + sizes.push( 20 );; } - geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); - geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) ); - geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) ); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); + geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) ); + geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) ); particleSystem = new THREE.Points( geometry, shaderMaterial ); @@ -154,7 +149,7 @@ renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); - renderer.setSize( WIDTH, HEIGHT ); + renderer.setSize( window.innerWidth, window.innerHeight ); var container = document.getElementById( 'container' ); container.appendChild( renderer.domElement ); diff --git a/examples/webgl_buffergeometry_lines.html b/examples/webgl_buffergeometry_lines.html index 9a2bbc071b..dd5301ed04 100644 --- a/examples/webgl_buffergeometry_lines.html +++ b/examples/webgl_buffergeometry_lines.html @@ -62,14 +62,13 @@ scene = new THREE.Scene(); - var segments = 10000; var geometry = new THREE.BufferGeometry(); - var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); - var positions = new Float32Array( segments * 3 ); - var colors = new Float32Array( segments * 3 ); + var positions = []; + var colors = []; var r = 800; @@ -81,20 +80,20 @@ // positions - positions[ i * 3 ] = x; - positions[ i * 3 + 1 ] = y; - positions[ i * 3 + 2 ] = z; + positions.push( x, y, z ); // colors - colors[ i * 3 ] = ( x / r ) + 0.5; - colors[ i * 3 + 1 ] = ( y / r ) + 0.5; - colors[ i * 3 + 2 ] = ( z / r ) + 0.5; + + + colors.push( ( x / r ) + 0.5 ); + colors.push( ( y / r ) + 0.5 ); + colors.push( ( z / r ) + 0.5 ); } - geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); - geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); geometry.computeBoundingSphere(); diff --git a/examples/webgl_buffergeometry_lines_indexed.html b/examples/webgl_buffergeometry_lines_indexed.html index 53aa8a7541..200254ee8b 100644 --- a/examples/webgl_buffergeometry_lines_indexed.html +++ b/examples/webgl_buffergeometry_lines_indexed.html @@ -61,81 +61,95 @@ scene = new THREE.Scene(); var geometry = new THREE.BufferGeometry(); - var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors }); + var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } ); + var indices = []; var positions = []; - var next_positions_index = 0; var colors = []; - var indices_array = []; + + var next_positions_index = 0; // var iteration_count = 4; var rangle = 60 * Math.PI / 180.0; - function add_vertex(v) { + function add_vertex( v ) { + + if ( next_positions_index == 0xffff ) console.error( 'Too many points.' ); + + positions.push( v.x, v.y, v.z ); + colors.push( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 ); - if (next_positions_index == 0xffff) throw new Error("Too many points"); + return next_positions_index ++; - positions.push(v.x, v.y, v.z); - colors.push(Math.random()*0.5+0.5, Math.random()*0.5+0.5, 1); - return next_positions_index++; } // simple Koch curve - function snowflake_iteration(p0, p4, depth) { + + function snowflake_iteration( p0, p4, depth ) { - if (--depth < 0) { + if ( -- depth < 0 ) { + + var i = next_positions_index - 1; // p0 already there + add_vertex( p4 ); + indices.push( i, i + 1 ); - var i = next_positions_index-1; // p0 already there - add_vertex(p4); - indices_array.push(i, i+1); return; + } - var v = p4.clone().sub(p0); - var v_tier = v.clone().multiplyScalar(1.0/3.0); - var p1 = p0.clone().add(v_tier); + var v = p4.clone().sub( p0 ); + var v_tier = v.clone().multiplyScalar( 1 / 3 ); + var p1 = p0.clone().add( v_tier ); - var angle = Math.atan2(v.y, v.x) + rangle; + var angle = Math.atan2( v.y, v.x ) + rangle; var length = v_tier.length(); var p2 = p1.clone(); - p2.x += Math.cos(angle) * length; - p2.y += Math.sin(angle) * length; + p2.x += Math.cos( angle ) * length; + p2.y += Math.sin( angle ) * length; - var p3 = p0.clone().add(v_tier).add(v_tier); + var p3 = p0.clone().add( v_tier ).add( v_tier ); + + snowflake_iteration( p0, p1, depth ); + snowflake_iteration( p1, p2, depth ); + snowflake_iteration( p2, p3, depth ); + snowflake_iteration( p3, p4, depth ); - snowflake_iteration(p0, p1, depth); - snowflake_iteration(p1, p2, depth); - snowflake_iteration(p2, p3, depth); - snowflake_iteration(p3, p4, depth); } - function snowflake(points, loop, x_offset) { + function snowflake( points, loop, x_offset ) { + + for ( var iteration = 0; iteration != iteration_count; iteration ++ ) { - for (var iteration = 0; iteration != iteration_count; ++iteration) { + add_vertex( points[ 0 ] ); + + for ( var p_index=0, p_count = points.length - 1; p_index != p_count; p_index ++ ) { + + snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration ); - add_vertex(points[0]); - for (var p_index=0, p_count=points.length-1; p_index != p_count; ++p_index) { - snowflake_iteration(points[p_index], points[p_index+1], iteration); } - if (loop) snowflake_iteration(points[points.length-1], points[0], iteration); + if ( loop ) snowflake_iteration( points[ points.length - 1 ], points[ 0 ], iteration ); // translate input curve for next iteration - for (var p_index=0, p_count=points.length; p_index != p_count; ++p_index) { + + for ( var p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) { + points[p_index].x += x_offset; + } } + } var y = 0; snowflake ( [ - new THREE.Vector3(0, y+0, 0), - new THREE.Vector3(500, y+0, 0) + new THREE.Vector3( 0, y, 0 ), + new THREE.Vector3( 500, y, 0 ) ], false, 600 ); @@ -144,9 +158,9 @@ snowflake ( [ - new THREE.Vector3(0, y+0, 0), - new THREE.Vector3(250, y+400, 0), - new THREE.Vector3(500, y+0, 0) + new THREE.Vector3( 0, y, 0) , + new THREE.Vector3( 250, y + 400, 0 ), + new THREE.Vector3( 500, y, 0 ) ], true, 600 ); @@ -155,10 +169,10 @@ snowflake ( [ - new THREE.Vector3(0, y+0, 0), - new THREE.Vector3(500, y, 0), - new THREE.Vector3(500, y+500, 0), - new THREE.Vector3(0, y+500, 0) + new THREE.Vector3( 0, y, 0 ), + new THREE.Vector3( 500, y, 0 ), + new THREE.Vector3( 500, y + 500, 0 ), + new THREE.Vector3( 0, y + 500, 0 ) ], true, 600 ); @@ -167,21 +181,22 @@ snowflake ( [ - new THREE.Vector3(250, y+0, 0), - new THREE.Vector3(500, y+0, 0), - new THREE.Vector3(250, y+0, 0), - new THREE.Vector3(250, y+250, 0), - new THREE.Vector3(250, y+0, 0), - new THREE.Vector3(0, y, 0), - new THREE.Vector3(250, y+0, 0), - new THREE.Vector3(250, y-250, 0), - new THREE.Vector3(250, y+0, 0) + new THREE.Vector3( 250, y, 0 ), + new THREE.Vector3( 500, y, 0 ), + new THREE.Vector3( 250, y, 0 ), + new THREE.Vector3( 250, y + 250, 0 ), + new THREE.Vector3( 250, y, 0 ), + new THREE.Vector3( 0, y, 0 ), + new THREE.Vector3( 250, y, 0 ), + new THREE.Vector3( 250, y - 250, 0 ), + new THREE.Vector3( 250, y, 0 ) ], false, 600 ); - // -------------------------------- - geometry.setIndex( indices_array ); + // + + geometry.setIndex( indices ); geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); geometry.computeBoundingSphere(); @@ -191,7 +206,7 @@ mesh.position.y -= 1200; parent_node = new THREE.Object3D(); - parent_node.add(mesh); + parent_node.add( mesh ); scene.add( parent_node ); @@ -239,8 +254,6 @@ var time = Date.now() * 0.001; - //mesh.rotation.x = time * 0.25; - //mesh.rotation.y = time * 0.5; parent_node.rotation.z = time * 0.5; renderer.render( scene, camera ); diff --git a/examples/webgl_buffergeometry_points.html b/examples/webgl_buffergeometry_points.html index a7aef3fa66..696059c723 100644 --- a/examples/webgl_buffergeometry_points.html +++ b/examples/webgl_buffergeometry_points.html @@ -69,14 +69,14 @@ var geometry = new THREE.BufferGeometry(); - var positions = new Float32Array( particles * 3 ); - var colors = new Float32Array( particles * 3 ); + var positions = []; + var colors = []; var color = new THREE.Color(); var n = 1000, n2 = n / 2; // particles spread in the cube - for ( var i = 0; i < positions.length; i += 3 ) { + for ( var i = 0; i < particles; i ++ ) { // positions @@ -84,9 +84,7 @@ var y = Math.random() * n - n2; var z = Math.random() * n - n2; - positions[ i ] = x; - positions[ i + 1 ] = y; - positions[ i + 2 ] = z; + positions.push( x, y, z ); // colors @@ -96,14 +94,12 @@ color.setRGB( vx, vy, vz ); - colors[ i ] = color.r; - colors[ i + 1 ] = color.g; - colors[ i + 2 ] = color.b; + colors.push( color.r, color.g, color.b ); } - geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); - geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) ); + geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); + geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) ); geometry.computeBoundingSphere(); diff --git a/examples/webgl_buffergeometry_rawshader.html b/examples/webgl_buffergeometry_rawshader.html index 373ff9b9b6..fcc05e82c5 100644 --- a/examples/webgl_buffergeometry_rawshader.html +++ b/examples/webgl_buffergeometry_rawshader.html @@ -113,30 +113,29 @@ var geometry = new THREE.BufferGeometry(); - var vertices = new Float32Array( triangles * 3 * 3 ); + var positions = []; + var colors = []; - for ( var i = 0, l = triangles * 3 * 3; i < l; i += 3 ) { + for ( var i = 0; i < triangles; i ++ ) { - vertices[ i ] = Math.random() - 0.5; - vertices[ i + 1 ] = Math.random() - 0.5; - vertices[ i + 2 ] = Math.random() - 0.5; + positions.push( Math.random() - 0.5 ); + positions.push( Math.random() - 0.5 ); + positions.push( Math.random() - 0.5 ); - } - - geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); - - var colors = new Uint8Array( triangles * 3 * 4 ); + colors.push( Math.random() * 255 ); + colors.push( Math.random() * 255 ); + colors.push( Math.random() * 255 ); + colors.push( Math.random() * 255 ); - for ( var i = 0, l = triangles * 3 * 4; i < l; i += 4 ) { + } - colors[ i ] = Math.random() * 255; - colors[ i + 1 ] = Math.random() * 255; - colors[ i + 2 ] = Math.random() * 255; - colors[ i + 3 ] = Math.random() * 255; + var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 ); + var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 ); - } + colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader - geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4, true ) ); + geometry.addAttribute( 'position', positionAttribute ); + geometry.addAttribute( 'color', colorAttribute ); // material diff --git a/examples/webgl_buffergeometry_uint.html b/examples/webgl_buffergeometry_uint.html index fa86664ffd..0cd72a5f2c 100644 --- a/examples/webgl_buffergeometry_uint.html +++ b/examples/webgl_buffergeometry_uint.html @@ -82,22 +82,15 @@ var geometry = new THREE.BufferGeometry(); - var indices = new Uint32Array( triangles * 3 ); - - for ( var i = 0; i < indices.length; i ++ ) { - - indices[ i ] = i; - - } - - var positions = new Float32Array( triangles * 3 * 3 ); - var normals = new Int16Array( triangles * 3 * 3 ); - var colors = new Uint8Array( triangles * 3 * 3 ); + var indices = []; + var positions = []; + var normals = []; + var colors = []; var color = new THREE.Color(); - var n = 800, n2 = n/2; // triangles spread in the cube - var d = 12, d2 = d/2; // individual triangle size + var n = 800, n2 = n / 2; // triangles spread in the cube + var d = 12, d2 = d / 2; // individual triangle size var pA = new THREE.Vector3(); var pB = new THREE.Vector3(); @@ -106,7 +99,7 @@ var cb = new THREE.Vector3(); var ab = new THREE.Vector3(); - for ( var i = 0; i < positions.length; i += 9 ) { + for ( var i = 0; i < triangles; i ++ ) { // positions @@ -126,17 +119,9 @@ var cy = y + Math.random() * d - d2; var cz = z + Math.random() * d - d2; - positions[ i ] = ax; - positions[ i + 1 ] = ay; - positions[ i + 2 ] = az; - - positions[ i + 3 ] = bx; - positions[ i + 4 ] = by; - positions[ i + 5 ] = bz; - - positions[ i + 6 ] = cx; - positions[ i + 7 ] = cy; - positions[ i + 8 ] = cz; + positions.push( ax, ay, az ); + positions.push( bx, by, bz ); + positions.push( cx, cy, cz ); // flat face normals @@ -154,17 +139,9 @@ var ny = cb.y; var nz = cb.z; - normals[ i ] = nx * 32767; - normals[ i + 1 ] = ny * 32767; - normals[ i + 2 ] = nz * 32767; - - normals[ i + 3 ] = nx * 32767; - normals[ i + 4 ] = ny * 32767; - normals[ i + 5 ] = nz * 32767; - - normals[ i + 6 ] = nx * 32767; - normals[ i + 7 ] = ny * 32767; - normals[ i + 8 ] = nz * 32767; + normals.push( nx * 32767, ny * 32767, nz * 32767 ); + normals.push( nx * 32767, ny * 32767, nz * 32767 ); + normals.push( nx * 32767, ny * 32767, nz * 32767 ); // colors @@ -174,24 +151,22 @@ color.setRGB( vx, vy, vz ); - colors[ i ] = color.r * 255; - colors[ i + 1 ] = color.g * 255; - colors[ i + 2 ] = color.b * 255; + colors.push( color.r * 255, color.g * 255, color.b * 255 ); + colors.push( color.r * 255, color.g * 255, color.b * 255 ); + colors.push( color.r * 255, color.g * 255, color.b * 255 ); - colors[ i + 3 ] = color.r * 255; - colors[ i + 4 ] = color.g * 255; - colors[ i + 5 ] = color.b * 255; + } - colors[ i + 6 ] = color.r * 255; - colors[ i + 7 ] = color.g * 255; - colors[ i + 8 ] = color.b * 255; + var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 ); + var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 ); + var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 ); - } + normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader + colorAttribute.normalized = true; - geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) ); - geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) ); - geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3, true ) ); - geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) ); + geometry.addAttribute( 'position', positionAttribute ); + geometry.addAttribute( 'normal', normalAttribute ); + geometry.addAttribute( 'color',colorAttribute ); geometry.computeBoundingSphere(); -- GitLab