-- Leo's gemini proxy
-- Connecting to git.thebackupbox.net:1965...
-- Connected
-- Sending request
-- Meta line: 20 text/gemini
repo: janusweb action: commit revision: path_from: revision_from: bbc73612f00db013f59e09757431555586a0e73a: path_to: revision_to:
commit bbc73612f00db013f59e09757431555586a0e73a
Author: James Baicoianu <james_github@baicoianu.com>
Date: Tue Jul 23 12:11:54 2019 -0700
Support for depth_write/depth_Test, per-particle color, opacity, and size.
diff --git a/scripts/janusparticle.js b/scripts/janusparticle.js
--- a/scripts/janusparticle.js
+++ b/scripts/janusparticle.js
@@ -1,4 +1,30 @@
elation.require(['janusweb.janusbase'], function() {
+
+ let shaderdef = {
+ vertex: `
+ attribute float size;
+ attribute vec4 customColor;
+ varying vec4 vColor;
+ void main() {
+ vColor = customColor;
+ vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+ gl_PointSize = size * ( 300.0 / -mvPosition.z );
+ gl_Position = projectionMatrix * mvPosition;
+ }
+ `,
+ fragment: `
+ uniform vec3 color;
+ uniform sampler2D texture;
+ varying vec4 vColor;
+ void main() {
+ gl_FragColor = vec4( color * vColor.rgb, vColor.a );
+ #ifdef USE_MAP
+ gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+ #endif
+ }
+ `
+ };
+
elation.component.add('engine.things.janusparticle', function() {
this.postinit = function() {
elation.engine.things.janusparticle.extendclass.postinit.call(this);
@@ -26,6 +52,8 @@ elation.require(['janusweb.janusbase'], function() {
refreshrate: { type: 'int', default: 30 },
blend_src: { type: 'string', default: 'src_alpha', set: this.updateMaterial },
blend_dest: { type: 'string', default: 'one_minus_src_alpha', set: this.updateMaterial },
+ depthwrite: { type: 'bool', default: false },
+ depthtest: { type: 'bool', default: true },
});
this.particles = [];
this.emitted = 0;
@@ -59,7 +87,7 @@ elation.require(['janusweb.janusbase'], function() {
if (asset.loaded) {
this.loaded = true;
} else {
- elation.events.add(asset, 'asset_load_complete', elation.bind(this, function() { this.loaded = true; this.createParticles(); this.start(); }));
+ elation.events.add(asset, 'asset_load_complete', elation.bind(this, function() { this.loaded = true; this.createParticles(false); this.start(); }));
}
}
} else {
@@ -71,6 +99,7 @@ elation.require(['janusweb.janusbase'], function() {
this.start();
}
+/*
var mat = new THREE.PointsMaterial({
//color: this.color,
map: texture,
@@ -81,9 +110,30 @@ elation.require(['janusweb.janusbase'], function() {
//blending: THREE.AdditiveBlending,
vertexColors: THREE.VertexColors
});
+*/
+ let shaderdefines = {};
+ if (texture) {
+ shaderdefines.USE_MAP = 1;
+ }
+ var mat = new THREE.ShaderMaterial( {
+ uniforms: {
+ color: { value: new THREE.Color( 0xffffff ) },
+ texture: { value: texture },
+ },
+ defines: shaderdefines,
+ vertexShader: shaderdef.vertex,
+ fragmentShader: shaderdef.fragment,
+ //blending: THREE.AdditiveBlending,
+ transparent: true,
+ alphaTest: .001,
+ depthWrite: this.depthwrite,
+ depthTest: this.depthtest,
+ } );
+
this.material = mat;
this.scale.set(1,1,1);
var obj = new THREE.Points(geo, mat);
+ if (this.renderorder) obj.renderOrder = this.renderorder;
return obj;
}
this.updateGeometry = function() {
@@ -119,8 +169,10 @@ elation.require(['janusweb.janusbase'], function() {
this.properties.particle_vel.copy(this.properties.velocity);
this.properties.velocity.set(0,0,0); // FIXME - hack to override "vel" property mapping
}
- this.createParticles = function() {
- this.particles = [];
+ this.createParticles = function(reset=true) {
+ if (reset) {
+ this.particles = [];
+ }
if (this.emitmesh && !this.emitpoints) {
this.extractEmitPoints(this.emitmesh);
@@ -129,26 +181,33 @@ elation.require(['janusweb.janusbase'], function() {
var geo = this.geometry;
var count = this.count;
var position = (geo.attributes.position && geo.attributes.position.count == count ? geo.attributes.position.array : new Float32Array(count * 3));
- var color = (geo.attributes.color && geo.attributes.color.count == count ? geo.attributes.color.array : new Float32Array(count * 3));
+ var color = (geo.attributes.customColor && geo.attributes.customColor.count == count ? geo.attributes.customColor.array : new Float32Array(count * 4));
+ var size = (geo.attributes.size && geo.attributes.size.count == count ? geo.attributes.size.array : new Float32Array(count));
for (var i = 0; i < count; i++) {
- var point = this.createPoint();
- this.resetPoint(point);
-
+ var point = this.particles[i];
+ if (reset || !point) {
+ point = this.createPoint();
+ this.resetPoint(point);
+ this.particles[i] = point;
+ }
//this.geometry.vertices[i] = point.pos;
- this.particles[i] = point;
position[i*3] = point.pos.x;
position[i*3+1] = point.pos.y;
position[i*3+2] = point.pos.z;
- color[i*3] = point.color.r;
- color[i*3+1] = point.color.g;
- color[i*3+2] = point.color.b;
+ color[i*4] = point.color.r;
+ color[i*4+1] = point.color.g;
+ color[i*4+2] = point.color.b;
+ color[i*4+3] = point.opacity;
+
+ size[i] = point.size;
}
geo.addAttribute('position', new THREE.BufferAttribute(position, 3));
- geo.addAttribute('color', new THREE.BufferAttribute(color, 3));
+ geo.addAttribute('customColor', new THREE.BufferAttribute(color, 4));
+ geo.addAttribute('size', new THREE.BufferAttribute(size, 1));
this.created = true;
this.emitted = 0;
@@ -161,7 +220,7 @@ elation.require(['janusweb.janusbase'], function() {
var geo = this.geometry;
var count = this.count;
var position = geo.attributes.position;
- var color = geo.attributes.color;
+ var color = geo.attributes.customColor;
for (var i = 0; i < count; i++) {
var point = this.particles[i];
@@ -171,9 +230,10 @@ elation.require(['janusweb.janusbase'], function() {
position[i*3+1] = point.pos.y;
position[i*3+2] = point.pos.z;
- color[i*3] = point.color.r;
- color[i*3+1] = point.color.g;
- color[i*3+2] = point.color.b;
+ color[i*4] = point.color.r;
+ color[i*4+1] = point.color.g;
+ color[i*4+2] = point.color.b;
+ color[i*4+3] = point.opacity;
}
}
this.updateParticles = function(ev) {
@@ -191,7 +251,7 @@ elation.require(['janusweb.janusbase'], function() {
if (count <= 0) return;
if (count != this.particles.length) {
- this.createParticles();
+ this.createParticles(false);
}
for (var i = 0; i < count; i++) {
var idx = (i + startpoint) % count;
@@ -227,7 +287,7 @@ elation.require(['janusweb.janusbase'], function() {
}
this.geometry.attributes.position.needsUpdate = true;
- this.geometry.attributes.color.needsUpdate = true;
+ this.geometry.attributes.customColor.needsUpdate = true;
}
this.updateBoundingSphere = function(vec) {
if (this.objects['3d']) {
@@ -250,6 +310,8 @@ elation.require(['janusweb.janusbase'], function() {
scale: new THREE.Vector3(1,1,1),
color: new THREE.Color(255, 255, 255),
rand_col: new THREE.Color(0, 0, 0),
+ size: this.particle_scale.x,
+ opacity: 1,
active: 0,
start: 0,
end: 0
@@ -265,16 +327,21 @@ elation.require(['janusweb.janusbase'], function() {
point.pos.add(tmpvec);
var pos = this.geometry.attributes.position.array,
- color = this.geometry.attributes.color.array,
+ color = this.geometry.attributes.customColor.array,
+ size = this.geometry.attributes.size.array,
offset = idx * 3;
pos[offset] = point.pos.x;
pos[offset+1] = point.pos.y;
pos[offset+2] = point.pos.z;
- color[offset] = point.color.r;
- color[offset+1] = point.color.g;
- color[offset+2] = point.color.b;
+ color[idx*4] = point.color.r;
+ color[idx*4+1] = point.color.g;
+ color[idx*4+2] = point.color.b;
+ color[idx*4+3] = point.opacity;
+
+ size[idx] = point.size;
+ this.updateBoundingSphere(point.pos);
}
})();
this.resetPoint = function(point, idx) {
@@ -296,7 +363,8 @@ elation.require(['janusweb.janusbase'], function() {
col = point.color,
rand_vel = this.properties.rand_vel,
rand_accel = this.properties.rand_accel,
- rand_col = this.properties.rand_col;
+ rand_col = this.properties.rand_col,
+ rand_scale = this.properties.rand_scale;
vel.copy(this.properties.particle_vel);
accel.copy(this.properties.particle_accel);
@@ -318,19 +386,22 @@ elation.require(['janusweb.janusbase'], function() {
col.g += rand * rand_col.y;
col.b += rand * rand_col.z;
}
-
+ point.size = this.particle_scale.x + randomInRange(rand_scale.x);
if (this.geometry.attributes.position) {
var pos = this.geometry.attributes.position.array,
- color = this.geometry.attributes.color.array;
+ color = this.geometry.attributes.customColor.array,
+ size = this.geometry.attributes.size.array;
pos[idx*3] = pointpos.x;
pos[idx*3+1] = pointpos.y;
pos[idx*3+2] = pointpos.z;
- color[idx*3] = point.color.r;
- color[idx*3+1] = point.color.g;
- color[idx*3+2] = point.color.b;
+ color[idx*4] = point.color.r;
+ color[idx*4+1] = point.color.g;
+ color[idx*4+2] = point.color.b;
+ color[idx*4+3] = point.opacity;
+ size[idx] = point.size;
this.updateBoundingSphere(pointpos);
}
}
@@ -356,13 +427,15 @@ elation.require(['janusweb.janusbase'], function() {
}
}
this.start = function() {
- if (!this.created || this.count >= this.particles.length) {
+ if (!this.created || (this.count > this.particles.length)) {
this.createParticles();
} else {
+/*
for (var i = 0; i < this.particles.length; i++) {
this.particles[i].active = 0;
}
this.resetParticles();
+*/
}
this.currentpoint = 0;
if (this.started) {
@@ -394,24 +467,28 @@ elation.require(['janusweb.janusbase'], function() {
emitter_scale: [ 'property', 'emitter_scale'],
emitter_pos: [ 'property', 'emitter_pos'],
opacity: [ 'property', 'opacity'],
+ depthwrite: [ 'property', 'depthwrite'],
+ depthtest: [ 'property', 'depthtest'],
play: [ 'function', 'start'],
};
}
return this._proxyobject;
}
- this.setPoint = function(pointnum, newpos, newvel, newaccel, newcol) {
+ this.setPoint = function(pointnum, newpos, newvel, newaccel, newcol, newsize, newopacity=1) {
var offset = pointnum * 3;
var point = this.particles[pointnum];
if (!point) {
point = this.createPoint();
+ point.active = 1;
this.particles[pointnum] = point;
}
point.active = 1;
var pos = this.geometry.attributes.position.array,
- color = this.geometry.attributes.color.array;
+ color = this.geometry.attributes.customColor.array,
+ size = this.geometry.attributes.size.array;
if (newpos) {
point.pos.copy(newpos);
@@ -434,6 +511,26 @@ elation.require(['janusweb.janusbase'], function() {
if (newcol) {
point.color.setRGB(newcol.x, newcol.y, newcol.z);
+
+ color[pointnum*4 ] = newcol.x;
+ color[pointnum*4 + 1] = newcol.y;
+ color[pointnum*4 + 2] = newcol.z;
+ color[pointnum*4 + 3] = elation.utils.any(point.opacity, this.opacity, 1);
+
+ this.geometry.attributes.customColor.needsUpdate = true;
+ }
+ if (newsize) {
+ point.size = newsize;
+ size[pointnum] = newsize;
+
+ this.geometry.attributes.size.needsUpdate = true;
+ }
+ point.opacity = newopacity;
+
+ if (pointnum >= this.count) {
+ this.count = this.particles.length;
+ this.createParticles(false);
+ this.updateParticles();
}
}
}, elation.engine.things.janusbase);
-----END OF PAGE-----
-- Response ended
-- Page fetched on Sun Jun 2 14:44:38 2024