Skip to content

Commit

Permalink
Merge pull request #20505 from Mugen87/dev51
Browse files Browse the repository at this point in the history 
Examples: More clean up.
  • Loading branch information
@Mugen87
Mugen87 committed Oct 13, 2020
2 parents 2cb4109 + 7dc14aa commit e8701d2
Show file tree
Hide file tree
Showing 32 changed files with 754 additions and 747 deletions.
30 changes: 15 additions & 15 deletions examples/webgl_instancing_dynamic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';

var camera, scene, renderer, stats;
let camera, scene, renderer, stats;

var mesh;
var amount = parseInt( window.location.search.substr( 1 ) ) || 10;
var count = Math.pow( amount, 3 );
var dummy = new THREE.Object3D();
let mesh;
const amount = parseInt( window.location.search.substr( 1 ) ) || 10;
const count = Math.pow( amount, 3 );
const dummy = new THREE.Object3D();

init();
animate();
Expand All @@ -33,23 +33,23 @@

scene = new THREE.Scene();

var loader = new THREE.BufferGeometryLoader();
const loader = new THREE.BufferGeometryLoader();
loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {

geometry.computeVertexNormals();
geometry.scale( 0.5, 0.5, 0.5 );

var material = new THREE.MeshNormalMaterial();
const material = new THREE.MeshNormalMaterial();
// check overdraw
// var material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );
// let material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );

mesh = new THREE.InstancedMesh( geometry, material, count );
mesh.instanceMatrix.setUsage( THREE.DynamicDrawUsage ); // will be updated every frame
scene.add( mesh );

//

var gui = new GUI();
const gui = new GUI();
gui.add( mesh, 'count', 0, count );

} );
Expand Down Expand Up @@ -97,19 +97,19 @@

if ( mesh ) {

var time = Date.now() * 0.001;
const time = Date.now() * 0.001;

mesh.rotation.x = Math.sin( time / 4 );
mesh.rotation.y = Math.sin( time / 2 );

var i = 0;
var offset = ( amount - 1 ) / 2;
let i = 0;
const offset = ( amount - 1 ) / 2;

for ( var x = 0; x < amount; x ++ ) {
for ( let x = 0; x < amount; x ++ ) {

for ( var y = 0; y < amount; y ++ ) {
for ( let y = 0; y < amount; y ++ ) {

for ( var z = 0; z < amount; z ++ ) {
for ( let z = 0; z < amount; z ++ ) {

dummy.position.set( offset - x, offset - y, offset - z );
dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );
Expand Down
36 changes: 18 additions & 18 deletions examples/webgl_instancing_modified.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,14 @@

import Stats from './jsm/libs/stats.module.js';

var camera, scene, renderer, stats;
let camera, scene, renderer, stats;

var mesh;
let mesh;

var dummy = new THREE.Object3D();
const dummy = new THREE.Object3D();

var amount = 8;
var count = Math.pow( amount, 3 );
const amount = 8;
const count = Math.pow( amount, 3 );

init();
animate();
Expand All @@ -46,9 +46,9 @@

new THREE.BufferGeometryLoader().load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {

var instanceColors = [];
const instanceColors = [];

for ( var i = 0; i < count; i ++ ) {
for ( let i = 0; i < count; i ++ ) {

instanceColors.push( Math.random() );
instanceColors.push( Math.random() );
Expand All @@ -70,25 +70,25 @@

texture.encoding = THREE.sRGBEncoding;

var material = new THREE.MeshMatcapMaterial( { color: 0xaaaaff, matcap: texture } );
const material = new THREE.MeshMatcapMaterial( { color: 0xaaaaff, matcap: texture } );

var colorParsChunk = [
const colorParsChunk = [
'attribute vec3 instanceColor;',
'varying vec3 vInstanceColor;',
'#include <common>'
].join( '\n' );

var instanceColorChunk = [
const instanceColorChunk = [
'#include <begin_vertex>',
'\tvInstanceColor = instanceColor;'
].join( '\n' );

var fragmentParsChunk = [
const fragmentParsChunk = [
'varying vec3 vInstanceColor;',
'#include <common>'
].join( '\n' );

var colorChunk = [
const colorChunk = [
'vec4 diffuseColor = vec4( diffuse * vInstanceColor, opacity );'
].join( '\n' );

Expand Down Expand Up @@ -154,19 +154,19 @@

if ( mesh ) {

var time = Date.now() * 0.001;
const time = Date.now() * 0.001;

mesh.rotation.x = Math.sin( time / 4 );
mesh.rotation.y = Math.sin( time / 2 );

var i = 0;
var offset = ( amount - 1 ) / 2;
let i = 0;
const offset = ( amount - 1 ) / 2;

for ( var x = 0; x < amount; x ++ ) {
for ( let x = 0; x < amount; x ++ ) {

for ( var y = 0; y < amount; y ++ ) {
for ( let y = 0; y < amount; y ++ ) {

for ( var z = 0; z < amount; z ++ ) {
for ( let z = 0; z < amount; z ++ ) {

dummy.position.set( offset - x, offset - y, offset - z );
dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );
Expand Down
79 changes: 39 additions & 40 deletions examples/webgl_instancing_performance.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,18 +34,18 @@
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { BufferGeometryUtils } from './jsm/utils/BufferGeometryUtils.js';

var container, stats, gui, guiStatsEl;
var camera, controls, scene, renderer, material;
let container, stats, gui, guiStatsEl;
let camera, controls, scene, renderer, material;

// gui

var Method = {
const Method = {
INSTANCED: 'INSTANCED',
MERGED: 'MERGED',
NAIVE: 'NAIVE'
};

var api = {
const api = {
method: Method.INSTANCED,
count: 1000
};
Expand All @@ -60,17 +60,17 @@

function clean() {

var meshes = [];
const meshes = [];

scene.traverse( function ( object ) {

if ( object.isMesh ) meshes.push( object );

} );

for ( var i = 0; i < meshes.length; i ++ ) {
for ( let i = 0; i < meshes.length; i ++ ) {

var mesh = meshes[ i ];
const mesh = meshes[ i ];
mesh.material.dispose();
mesh.geometry.dispose();

Expand All @@ -80,12 +80,12 @@

}

var randomizeMatrix = function () {
const randomizeMatrix = function () {

var position = new THREE.Vector3();
var rotation = new THREE.Euler();
var quaternion = new THREE.Quaternion();
var scale = new THREE.Vector3();
const position = new THREE.Vector3();
const rotation = new THREE.Euler();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();

return function ( matrix ) {

Expand Down Expand Up @@ -120,7 +120,7 @@

geometry.computeVertexNormals();

console.time( api.method + ' (build)' );
console.time( api.method + ' (build)' );

switch ( api.method ) {

Expand All @@ -140,16 +140,16 @@

console.timeEnd( api.method + ' (build)' );

} );
} );

}

function makeInstanced( geometry ) {

var matrix = new THREE.Matrix4();
var mesh = new THREE.InstancedMesh( geometry, material, api.count );
const matrix = new THREE.Matrix4();
const mesh = new THREE.InstancedMesh( geometry, material, api.count );

for ( var i = 0; i < api.count; i ++ ) {
for ( let i = 0; i < api.count; i ++ ) {

randomizeMatrix( matrix );
mesh.setMatrixAt( i, matrix );
Expand All @@ -160,7 +160,7 @@

//

var geometryByteLength = getGeometryByteLength( geometry );
const geometryByteLength = getGeometryByteLength( geometry );

guiStatsEl.innerHTML = [

Expand All @@ -173,22 +173,21 @@

function makeMerged( geometry ) {

var instanceGeometry;
var geometries = [];
var matrix = new THREE.Matrix4();
const geometries = [];
const matrix = new THREE.Matrix4();

for ( var i = 0; i < api.count; i ++ ) {
for ( let i = 0; i < api.count; i ++ ) {

randomizeMatrix( matrix );

var instanceGeometry = geometry.clone();
const instanceGeometry = geometry.clone();
instanceGeometry.applyMatrix4( matrix );

geometries.push( instanceGeometry );

}

var mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries( geometries );

scene.add( new THREE.Mesh( mergedGeometry, material ) );

Expand All @@ -205,13 +204,13 @@

function makeNaive( geometry ) {

var matrix = new THREE.Matrix4();
const matrix = new THREE.Matrix4();

for ( var i = 0; i < api.count; i ++ ) {
for ( let i = 0; i < api.count; i ++ ) {

randomizeMatrix( matrix );

var mesh = new THREE.Mesh( geometry, material );
const mesh = new THREE.Mesh( geometry, material );
mesh.applyMatrix4( matrix );

scene.add( mesh );
Expand All @@ -220,7 +219,7 @@

//

var geometryByteLength = getGeometryByteLength( geometry );
const geometryByteLength = getGeometryByteLength( geometry );

guiStatsEl.innerHTML = [

Expand All @@ -233,8 +232,8 @@

function init() {

var width = window.innerWidth;
var height = window.innerHeight;
const width = window.innerWidth;
const height = window.innerHeight;

// camera

Expand Down Expand Up @@ -272,7 +271,7 @@
gui.add( api, 'method', Method ).onChange( initMesh );
gui.add( api, 'count', 1, 10000 ).step( 1 ).onChange( initMesh );

var perfFolder = gui.addFolder( 'Performance' );
const perfFolder = gui.addFolder( 'Performance' );

guiStatsEl = document.createElement( 'li' );
guiStatsEl.classList.add( 'gui-stats' );
Expand All @@ -284,16 +283,16 @@

window.addEventListener( 'resize', onWindowResize, false );

Object.assign(window, {scene});
Object.assign( window, { scene } );

}

//

function onWindowResize() {

var width = window.innerWidth;
var height = window.innerHeight;
const width = window.innerWidth;
const height = window.innerHeight;

camera.aspect = width / height;
camera.updateProjectionMatrix();
Expand Down Expand Up @@ -323,11 +322,11 @@

function getGeometryByteLength( geometry ) {

var total = 0;
let total = 0;

if ( geometry.index ) total += geometry.index.array.byteLength;

for ( var name in geometry.attributes ) {
for ( const name in geometry.attributes ) {

total += geometry.attributes[ name ].array.byteLength;

Expand All @@ -342,11 +341,11 @@

if ( bytes === 0 ) return '0 bytes';

var k = 1024;
var dm = decimals < 0 ? 0 : decimals;
var sizes = [ 'bytes', 'KB', 'MB' ];
const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = [ 'bytes', 'KB', 'MB' ];

var i = Math.floor( Math.log( bytes ) / Math.log( k ) );
const i = Math.floor( Math.log( bytes ) / Math.log( k ) );

return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];

Expand Down
Loading

0 comments on commit e8701d2

Please sign in to comment.