diff --git a/examples/webgl_buffergeometry.html b/examples/webgl_buffergeometry.html
index b8c0a1ba50ae40..4cacc230e6756d 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 85ddee56ec4229..2b0c19eccb14f7 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 9a2bbc071b3ca0..dd5301ed0431ed 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 53aa8a754194c4..200254ee8b69f0 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 a7aef3fa66e8ef..696059c723a378 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 373ff9b9b6e068..fcc05e82c58bdc 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 fa86664ffd33db..0cd72a5f2cc15e 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();