Skip to content

Commit

Permalink
Merge pull request #12016 from Mugen87/dev4
Browse files Browse the repository at this point in the history 
Examples: Simplify some buffer geometry examples
  • Loading branch information
@mrdoob
mrdoob committed Aug 22, 2017
2 parents 4c739b1 + 7493538 commit 845609e
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 205 deletions.
60 changes: 18 additions & 42 deletions examples/webgl_buffergeometry.html
View file
Expand Up @@ -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();
Expand All @@ -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

Expand All @@ -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

Expand All @@ -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

Expand All @@ -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();

Expand Down
33 changes: 14 additions & 19 deletions examples/webgl_buffergeometry_custom_attributes_particles.html
View file
Expand Up @@ -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();
Expand Down Expand Up @@ -122,39 +119,37 @@

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 );

scene.add( particleSystem );

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 );
Expand Down
23 changes: 11 additions & 12 deletions examples/webgl_buffergeometry_lines.html
View file
Expand Up @@ -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;

Expand All @@ -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();

Expand Down

0 comments on commit 845609e

Please sign in to comment.