createObj() {
const geometry = new THREE.InstancedBufferGeometry();
// Setting BufferAttribute
const baseGeometry = new THREE.OctahedronBufferGeometry(30, 4);
geometry.copy(baseGeometry);
// Setting InstancedBufferAttribute
const radian = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const hsv = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
const noiseDiff = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const speed = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
for (var i = 0; i < this.instances; i++) {
radian.setXYZ(i, MathEx.radians(i / this.instances * 360));
hsv.setXYZ(i, i / this.instances - 0.25, 0.2, 0.9);
noiseDiff.setXYZ(i, Math.random());
speed.setXYZ(i, (Math.random() + 1.0) * 0.5);
}
geometry.addAttribute('radian', radian);
geometry.addAttribute('hsv', hsv);
geometry.addAttribute('noiseDiff', noiseDiff);
geometry.addAttribute('speed', speed);
return new THREE.Mesh(
geometry,
new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/core.vs').default,
fragmentShader: require('./glsl/core.fs').default,
transparent: true,
})
)
}
createObj(textures) {
// Define Geometry
const geometry = new THREE.InstancedBufferGeometry();
const baseGeometry = new THREE.PlaneBufferGeometry(1200, 1200, 2, 2);
// Copy attributes of the base Geometry to the instancing Geometry
geometry.copy(baseGeometry);
// Define attributes of the instancing geometry
const instancePosition = new THREE.InstancedBufferAttribute(new Float32Array(this.num * 3), 3);
const rotate1 = new THREE.InstancedBufferAttribute(new Float32Array(this.num), 1);
const rotate2 = new THREE.InstancedBufferAttribute(new Float32Array(this.num), 1);
const rotate3 = new THREE.InstancedBufferAttribute(new Float32Array(this.num), 1);
const h = new THREE.InstancedBufferAttribute(new Float32Array(this.num), 1);
for ( let i = 0, ul = this.num; i < ul; i++ ) {
instancePosition.setXYZ(i, 0, 0, (this.num - i) * -150);
rotate1.setXYZ(i, Math.random() * 2 - 1);
rotate2.setXYZ(i, Math.random() * 2 - 1);
rotate3.setXYZ(i, Math.random() * 2 - 1);
h.setXYZ(i, (Math.random() * 2 - 1) * 0.15);
}
geometry.addAttribute('instancePosition', instancePosition);
geometry.addAttribute('rotate1', rotate1);
geometry.addAttribute('rotate2', rotate2);
geometry.addAttribute('rotate3', rotate3);
geometry.addAttribute('h', h);
// Define Material
const material = new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/gui.vs').default,
fragmentShader: require('./glsl/gui.fs').default,
transparent: true,
blending: THREE.AdditiveBlending,
});
this.uniforms.texture1.value = textures[0];
this.uniforms.texture2.value = textures[1];
this.uniforms.texture3.value = textures[2];
// Create Object3D
this.obj = new THREE.Mesh(geometry, material);
}
createObjPicked() {
const geometry = new THREE.InstancedBufferGeometry();
// Setting BufferAttribute
geometry.copy(this.baseGeometry);
// Setting InstancedBufferAttribute
const radian = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const pickedColor = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
const color = new THREE.Color();
const timeHover = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
for (var i = 0; i < this.instances; i++) {
radian.setXYZ(i, MathEx.radians(i / this.instances * 360));
color.setHex(i);
pickedColor.setXYZ(i, color.r, color.g, color.b);
timeHover.setXYZ(i, 0);
}
geometry.addAttribute('radian', radian);
geometry.addAttribute('pickedColor', pickedColor);
geometry.addAttribute('timeHover', timeHover);
return new THREE.Mesh(
geometry,
new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/wirePicked.vs').default,
fragmentShader: require('./glsl/wirePicked.fs').default,
})
);
}
createObj() {
const geometry = new THREE.InstancedBufferGeometry();
// Setting BufferAttribute
geometry.copy(this.baseGeometry);
// Setting InstancedBufferAttribute
const radian = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const hsv = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
const timeHover = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
for (var i = 0; i < this.instances; i++) {
radian.setXYZ(i, MathEx.radians(i / this.instances * 360));
hsv.setXYZ(i, i / this.instances - 0.25, 0.2, 1.0);
timeHover.setXYZ(i, 0);
}
geometry.addAttribute('radian', radian);
geometry.addAttribute('hsv', hsv);
geometry.addAttribute('timeHover', timeHover);
return new THREE.Mesh(
geometry,
new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/wire.vs').default,
fragmentShader: require('./glsl/wire.fs').default,
depthWrite: false,
transparent: true,
side: THREE.DoubleSide,
flatShading: true
})
);
}
createObj() {
// Define Geometry
const geometry = new THREE.InstancedBufferGeometry();
const baseGeometry = new THREE.BoxBufferGeometry(10, 10, 10);
// Add common attributes
geometry.copy(baseGeometry);
// Add common attributes
const translate = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
const offsets = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const rotates = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
for ( var i = 0, ul = offsets.count; i < ul; i++ ) {
const position = MathEx.spherical(Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 3000 + 100);
translate.setXYZ(i, position[0], position[1], position[2]);
offsets.setXYZ(i, Math.random() * 100);
rotates.setXYZ(i, Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5);
}
geometry.addAttribute('translate', translate);
geometry.addAttribute('offset', offsets);
geometry.addAttribute('rotate', rotates);
// Create Object3D
return new THREE.Mesh(
geometry,
new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/debris.vs').default,
fragmentShader: require('./glsl/debris.fs').default,
transparent: true,
side: THREE.DoubleSide
})
)
}
createObj() {
// Define Geometry
const geometry = new THREE.InstancedBufferGeometry();
const baseGeometry = new THREE.BoxBufferGeometry(100, 4000, 2, 2, 2);
// Add common attributes
geometry.copy(baseGeometry);
// Add instance attributes
const instancePosition = new THREE.InstancedBufferAttribute(new Float32Array(this.instances * 3), 3);
const delay = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
const h = new THREE.InstancedBufferAttribute(new Float32Array(this.instances), 1);
for ( var i = 0, ul = this.instances; i < ul; i++ ) {
instancePosition.setXYZ(
i,
MathEx.randomArbitrary(-5000, 5000),
0,
MathEx.randomArbitrary(-500, 500) + (MathEx.randomInt(0, 1) * 2 - 1) * 700,
);
delay.setXYZ(i, Math.random() * 2.0);
h.setXYZ(i, Math.random() * 0.3);
}
geometry.addAttribute('instancePosition', instancePosition);
geometry.addAttribute('delay', delay);
geometry.addAttribute('h', h);
// Define Material
const material = new THREE.RawShaderMaterial({
uniforms: this.uniforms,
vertexShader: require('./glsl/beam.vs').default,
fragmentShader: require('./glsl/beam.fs').default,
depthWrite: false,
transparent: true,
side: THREE.DoubleSide,
blending: THREE.AdditiveBlending,
});
// Create Object3D
this.obj = new THREE.Mesh(geometry, material);
}