Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: Convert helpers to ES6. #21583

Merged
merged 2 commits into from
Apr 6, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
137 changes: 68 additions & 69 deletions examples/jsm/helpers/LightProbeHelper.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,128 +4,127 @@ import {
SphereGeometry
} from '../../../build/three.module.js';

function LightProbeHelper( lightProbe, size ) {
class LightProbeHelper extends Mesh {

this.lightProbe = lightProbe;
constructor( lightProbe, size ) {

this.size = size;
const material = new ShaderMaterial( {

var material = new ShaderMaterial( {
type: 'LightProbeHelperMaterial',

type: 'LightProbeHelperMaterial',
uniforms: {

uniforms: {
sh: { value: lightProbe.sh.coefficients }, // by reference

sh: { value: this.lightProbe.sh.coefficients }, // by reference
intensity: { value: lightProbe.intensity }

intensity: { value: this.lightProbe.intensity }
},

},
vertexShader: [

vertexShader: [
'varying vec3 vNormal;',

'varying vec3 vNormal;',
'void main() {',

'void main() {',
' vNormal = normalize( normalMatrix * normal );',

' vNormal = normalize( normalMatrix * normal );',
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',

' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
'}',

'}',
].join( '\n' ),

].join( '\n' ),
fragmentShader: [

fragmentShader: [
'#define RECIPROCAL_PI 0.318309886',

'#define RECIPROCAL_PI 0.318309886',
'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',

'vec3 inverseTransformDirection( in vec3 normal, in mat4 matrix ) {',
' // matrix is assumed to be orthogonal',

' // matrix is assumed to be orthogonal',
' return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',

' return normalize( ( vec4( normal, 0.0 ) * matrix ).xyz );',
'}',

'}',
'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',

'// source: https://graphics.stanford.edu/papers/envmap/envmap.pdf',
'vec3 shGetIrradianceAt( in vec3 normal, in vec3 shCoefficients[ 9 ] ) {',
' // normal is assumed to have unit length',

' // normal is assumed to have unit length',
' float x = normal.x, y = normal.y, z = normal.z;',

' float x = normal.x, y = normal.y, z = normal.z;',
' // band 0',
' vec3 result = shCoefficients[ 0 ] * 0.886227;',

' // band 0',
' vec3 result = shCoefficients[ 0 ] * 0.886227;',
' // band 1',
' result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
' result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
' result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',

' // band 1',
' result += shCoefficients[ 1 ] * 2.0 * 0.511664 * y;',
' result += shCoefficients[ 2 ] * 2.0 * 0.511664 * z;',
' result += shCoefficients[ 3 ] * 2.0 * 0.511664 * x;',
' // band 2',
' result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
' result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
' result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
' result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
' result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',

' // band 2',
' result += shCoefficients[ 4 ] * 2.0 * 0.429043 * x * y;',
' result += shCoefficients[ 5 ] * 2.0 * 0.429043 * y * z;',
' result += shCoefficients[ 6 ] * ( 0.743125 * z * z - 0.247708 );',
' result += shCoefficients[ 7 ] * 2.0 * 0.429043 * x * z;',
' result += shCoefficients[ 8 ] * 0.429043 * ( x * x - y * y );',
' return result;',

' return result;',
'}',

'}',
'uniform vec3 sh[ 9 ]; // sh coefficients',

'uniform vec3 sh[ 9 ]; // sh coefficients',
'uniform float intensity; // light probe intensity',

'uniform float intensity; // light probe intensity',
'varying vec3 vNormal;',

'varying vec3 vNormal;',
'void main() {',

'void main() {',
' vec3 normal = normalize( vNormal );',

' vec3 normal = normalize( vNormal );',
' vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',

' vec3 worldNormal = inverseTransformDirection( normal, viewMatrix );',
' vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',

' vec3 irradiance = shGetIrradianceAt( worldNormal, sh );',
' vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',

' vec3 outgoingLight = RECIPROCAL_PI * irradiance * intensity;',
' gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',

' gl_FragColor = linearToOutputTexel( vec4( outgoingLight, 1.0 ) );',
'}'

'}'
].join( '\n' )

].join( '\n' )
} );

} );
const geometry = new SphereGeometry( 1, 32, 16 );

var geometry = new SphereGeometry( 1, 32, 16 );
super( geometry, material );

Mesh.call( this, geometry, material );
this.lightProbe = lightProbe;
this.size = size;
this.type = 'LightProbeHelper';

this.type = 'LightProbeHelper';
this.onBeforeRender();

this.onBeforeRender();
}

}

LightProbeHelper.prototype = Object.create( Mesh.prototype );
LightProbeHelper.prototype.constructor = LightProbeHelper;
dispose() {

LightProbeHelper.prototype.dispose = function () {
this.geometry.dispose();
this.material.dispose();

this.geometry.dispose();
this.material.dispose();
}

};
onBeforeRender() {

LightProbeHelper.prototype.onBeforeRender = function () {
this.position.copy( this.lightProbe.position );

this.position.copy( this.lightProbe.position );
this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );

this.scale.set( 1, 1, 1 ).multiplyScalar( this.size );
this.material.uniforms.intensity.value = this.lightProbe.intensity;

this.material.uniforms.intensity.value = this.lightProbe.intensity;
}

};
}

export { LightProbeHelper };
123 changes: 62 additions & 61 deletions examples/jsm/helpers/PositionalAudioHelper.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,103 +6,104 @@ import {
MathUtils
} from '../../../build/three.module.js';

function PositionalAudioHelper( audio, range, divisionsInnerAngle, divisionsOuterAngle ) {
class PositionalAudioHelper extends Line {

this.audio = audio;
this.range = range || 1;
this.divisionsInnerAngle = divisionsInnerAngle || 16;
this.divisionsOuterAngle = divisionsOuterAngle || 2;
constructor( audio, range = 1, divisionsInnerAngle = 16, divisionsOuterAngle = 2 ) {

var geometry = new BufferGeometry();
var divisions = this.divisionsInnerAngle + this.divisionsOuterAngle * 2;
var positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );
const geometry = new BufferGeometry();
const divisions = divisionsInnerAngle + divisionsOuterAngle * 2;
const positions = new Float32Array( ( divisions * 3 + 3 ) * 3 );
geometry.setAttribute( 'position', new BufferAttribute( positions, 3 ) );

var materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
var materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );
const materialInnerAngle = new LineBasicMaterial( { color: 0x00ff00 } );
const materialOuterAngle = new LineBasicMaterial( { color: 0xffff00 } );

Line.call( this, geometry, [ materialOuterAngle, materialInnerAngle ] );
super( geometry, [ materialOuterAngle, materialInnerAngle ] );

this.type = 'PositionalAudioHelper';
this.audio = audio;
this.range = range;
this.divisionsInnerAngle = divisionsInnerAngle;
this.divisionsOuterAngle = divisionsOuterAngle;
this.type = 'PositionalAudioHelper';

this.update();
this.update();

}
}

PositionalAudioHelper.prototype = Object.create( Line.prototype );
PositionalAudioHelper.prototype.constructor = PositionalAudioHelper;
update() {

PositionalAudioHelper.prototype.update = function () {
const audio = this.audio;
const range = this.range;
const divisionsInnerAngle = this.divisionsInnerAngle;
const divisionsOuterAngle = this.divisionsOuterAngle;

var audio = this.audio;
var range = this.range;
var divisionsInnerAngle = this.divisionsInnerAngle;
var divisionsOuterAngle = this.divisionsOuterAngle;
const coneInnerAngle = MathUtils.degToRad( audio.panner.coneInnerAngle );
const coneOuterAngle = MathUtils.degToRad( audio.panner.coneOuterAngle );

var coneInnerAngle = MathUtils.degToRad( audio.panner.coneInnerAngle );
var coneOuterAngle = MathUtils.degToRad( audio.panner.coneOuterAngle );
const halfConeInnerAngle = coneInnerAngle / 2;
const halfConeOuterAngle = coneOuterAngle / 2;

var halfConeInnerAngle = coneInnerAngle / 2;
var halfConeOuterAngle = coneOuterAngle / 2;
let start = 0;
let count = 0;
let i;
let stride;

var start = 0;
var count = 0;
var i, stride;
const geometry = this.geometry;
const positionAttribute = geometry.attributes.position;

var geometry = this.geometry;
var positionAttribute = geometry.attributes.position;
geometry.clearGroups();

geometry.clearGroups();
//

//
function generateSegment( from, to, divisions, materialIndex ) {

function generateSegment( from, to, divisions, materialIndex ) {
const step = ( to - from ) / divisions;

var step = ( to - from ) / divisions;
positionAttribute.setXYZ( start, 0, 0, 0 );
count ++;

positionAttribute.setXYZ( start, 0, 0, 0 );
count ++;
for ( i = from; i < to; i += step ) {

for ( i = from; i < to; i += step ) {
stride = start + count;

stride = start + count;
positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
positionAttribute.setXYZ( stride + 2, 0, 0, 0 );

positionAttribute.setXYZ( stride, Math.sin( i ) * range, 0, Math.cos( i ) * range );
positionAttribute.setXYZ( stride + 1, Math.sin( Math.min( i + step, to ) ) * range, 0, Math.cos( Math.min( i + step, to ) ) * range );
positionAttribute.setXYZ( stride + 2, 0, 0, 0 );
count += 3;

count += 3;
}

}
geometry.addGroup( start, count, materialIndex );

geometry.addGroup( start, count, materialIndex );
start += count;
count = 0;

start += count;
count = 0;
}

}
//

//
generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );

generateSegment( - halfConeOuterAngle, - halfConeInnerAngle, divisionsOuterAngle, 0 );
generateSegment( - halfConeInnerAngle, halfConeInnerAngle, divisionsInnerAngle, 1 );
generateSegment( halfConeInnerAngle, halfConeOuterAngle, divisionsOuterAngle, 0 );
//

//
positionAttribute.needsUpdate = true;

positionAttribute.needsUpdate = true;
if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;

if ( coneInnerAngle === coneOuterAngle ) this.material[ 0 ].visible = false;
}

};
dispose() {

PositionalAudioHelper.prototype.dispose = function () {
this.geometry.dispose();
this.material[ 0 ].dispose();
this.material[ 1 ].dispose();

this.geometry.dispose();
this.material[ 0 ].dispose();
this.material[ 1 ].dispose();
}

};
}


export { PositionalAudioHelper };
Loading