@prisoner849 created a CodePen that shows a killer laser scan effect:
I believe I did a faithful job in integrating that code into my ThreeJs scene, but when I run the scene, I don’t see the laser scan effect/object at all. Not even a glimmer or any visual changes that might indicate at least was something. Below is my code. Can anyone spot anything dumb I’m doing that might be the reason?
Some bullet points first:
- I am using ThreeJS
r124and I don’t have time to upgrade at the moment. As per @Mugen87 's suggestion, I changed from using thePlaneGeometryobject to thePlaneBufferGeometryobject so I don’t have the undefinedattributesproperty any more:
- I traced the code thoroughly. I noticed that the JS code in the shader’s
OnBeforeCompileproperty does get hit twice, both in the CodePen and in my code, and then a breakpoint set there doesn’t trigger anymore. I don’t think this is the problem because as I said, I see the same behavior in the CodePen, which works. I guess it’s just an idiosyncrasy with the browser. - I traced my code that animates the laser scan and it is definitely getting hit and it is getting a proper delta time value.
- The
visibleproperty for the laser scan object is definitely true.
My main fear now is that there is something else about r124 that is creating this problem, but I am hoping that is not the case. What could be wrong?
Here is the LaserScan object I created to house the code I used from the CodePen:
function LaserScan(paramsObj) {
const self = this;
const methodName = self.constructor.name + '::' + `constructor`;
const errPrefix = '(' + methodName + ') ';
/** @property {string} - A randomly generated unique ID for this object. */
this.id = misc_shared_lib.getSimplifiedUuid();
/** @property {Date} - The date/time this object was created. */
this.dtCreated = Date.now();
if (!misc_shared_lib.isNonNullObjectAndNotArray(paramsObj))
throw new Error(`${errPrefix}The paramsObj is not a valid object.`);
/** @property {object|null} - The object we were added to or NULL
* if we were added directly to the scene (i.e. - "no parent"). */
this.parentObj = null;
/** @property {object} - When ThreeJS object is created that
* underpins this laser scan object, that object will be
* assigned to this property. */
this.laserScanThreeJsObj = null;
/** @property {boolean} - If TRUE, then the laser scan is visible and
* animating. If FALSE, then it is neither visible nor animating. */
this.isLaserScanActive = false;
// TODO: What does this object do?
this.gu = {
time: {
value: 0
}
}
/**
* Turn on the laser scan. This will make it visible and
* it will be animated.
*/
this.turnOnLaserScan = function() {
const methodName = self.constructor.name + '::' + `turnOnLaserScan`;
const errPrefix = '(' + methodName + ') ';
// Have we been created yet?
if (!self.laserScanThreeJsObj)
throw new Error(`${errPrefix}The laser scan object has not been created yet.`);
if (!self.isLaserScanActive) {
// Make sure it is visible.
if (!self.laserScanThreeJsObj.visible)
self.laserScanThreeJsObj.visible = true;
self.isLaserScanActive = true;
}
}
/**
* Turn off the laser scan. This will make it invisible and
* it will not be animated.
*/
this.turnOffLaserScan = function() {
const methodName = self.constructor.name + '::' + `turnOffLaserScan`;
const errPrefix = '(' + methodName + ') ';
// Have we been created yet?
if (!self.laserScanThreeJsObj)
throw new Error(`${errPrefix}The laser scan object has not been created yet.`);
if (self.isLaserScanActive) {
// Make sure it is not visible.
if (self.laserScanThreeJsObj.visible)
self.laserScanThreeJsObj.visible = false;
self.isLaserScanActive = false;
}
}
/**
* This function must be called by the object that
* aggregates the LaserScan object. It builds
* the actual laser scan object.
*
* @param {object|null} parentObj - If not NULL, then the laser
* scan object will be added to the parent object.
* Otherwise it will be added directly to the scen.
*/
this.initializeLaserScan = function(parentObj) {
const methodName = self.constructor.name + '::' + `initializeLaserScan`;
const errPrefix = '(' + methodName + ') ';
if (parentObj !== null) {
if (!misc_shared_lib.isNonNullObjectAndNotArray(parentObj))
throw new Error(`${errPrefix}The parentObj is not NULL, yet it is not a valid object either.`);
}
self.parentObj = parentObj;
// Uncomment this code to add a grid helper to the scene
// for the laser.
// g_ThreeJsScene.add(new THREE.GridHelper());
// Parameters for the laser scan.
const r = 0.1;
const R = 20;
const halfAngle = THREE.MathUtils.degToRad(45);
// const g = new THREE.PlaneGeometry(1, 1, 72, 20);
const g = new THREE.PlaneBufferGeometry(1, 1, 72, 20);
const pos = g.attributes.position;
const uv = g.attributes.uv;
// Set up the uv points.
for (let i = 0; i < pos.count; i++) {
let y = 1. - uv.getY(i);
let radius = r + (R - r) * y;
let x = pos.getX(i);
pos.setXY(i, Math.cos(x * halfAngle) * radius, Math.sin(x * halfAngle) * radius);
}
g.rotateX(-Math.PI * 0.5);
g.rotateY(-Math.PI * 0.5);
let materialForLaser = new THREE.MeshBasicMaterial({
color: new THREE.Color(0, 0.75, 1),
side: THREE.DoubleSide,
transparent: true,
onBeforeCompile: shader => {
shader.uniforms.time = self.gu.time;
shader.fragmentShader = `
uniform float time;
${shader.fragmentShader}
`.replace(
`#include <color_fragment>`,
`#include <color_fragment>
float t = time;
float mainWave = sin((vUv.x - t * 0.2) * 1.5 * PI2) * 0.5 + 0.5;
mainWave = mainWave * 0.25 + 0.25;
mainWave *= (sin(t * PI2 * 5.) * 0.5 + 0.5) * 0.25 + 0.75;
float sideLines = smoothstep(0.45, 0.5, abs(vUv.x - 0.5));
float scanLineSin = abs(vUv.x - (sin(t * 2.7) * 0.5 + 0.5));
float scanLine = smoothstep(0.01, 0., scanLineSin);
float fadeOut = pow(vUv.y, 2.7);
float a = 0.;
a = max(a, mainWave);
a = max(a, sideLines);
a = max(a, scanLine);
diffuseColor.a = a * fadeOut;
);
console.info('laserscan-shader', shader.fragmentShader);
}
});
materialForLaser.defines = {"USE_UV": ""}
self.laserScanThreeJsObj = new THREE.Mesh(g, materialForLaser);
self.laserScanThreeJsObj.position.set(2, 5, -50);
// Do we have a parent?
if (self.parentObj)
// Yes. Add the actual laser scan object the parent object given to us when we
// were constructed.
self.parentObj.add(self.laserScanThreeJsObj);
else
// No. Add the actual laser scan object directly to scene.
g_ThreeJsScene.add(self.laserScanThreeJsObj);
}
/**
* Call this method from the animate loop to animate
* the laser scan.
*
* @param {number|null} deltaTimeMs - The time elapsed in
* milliseconds since the last animate loop iteration.
*/
this.animateLaserScan = function(deltaTimeMs=null) {
const methodName = self.constructor.name + '::' + `animateLaserScan`;
const errPrefix = '(' + methodName + ') ';
if (!self.isLaserScanActive)
return;
if (deltaTimeMs !== null) {
if (typeof deltaTimeMs !== 'number' || deltaTimeMs < 0)
throw new Error(`${errPrefix}The value in the deltaTimeMs parameter is not NULL, yet it is not valid either.`);
}
const elapsedTime =
deltaTimeMs === null
? g_MyAnimationClock.getElapsedTime()
: deltaTimeMs;
self.gu.time.value = elapsedTime;
const depthOfPlaneSweepRange = 0.5;
const widthOfSweepInDegrees = 10;
self.laserScanThreeJsObj.rotation.x =
(Math.sin(elapsedTime)
* depthOfPlaneSweepRange + 0.5)
* THREE.MathUtils.degToRad(widthOfSweepInDegrees);
}
}
Here is the code that creates and initializes the laser scan object:
// TODO: Testing laser scan object.
const laserScanParamsObj = {};
// Create the laser scan object and tell it to add itself to
// to our ThreeJS scene when it constructs the laser scan object.
const laserScanObj = new LaserScan(laserScanParamsObj);
assignGlobalLaserScanTestObj(laserScanObj);
g_GlobalLaserScanTestObj.initializeLaserScan(null);
g_GlobalLaserScanTestObj.turnOnLaserScan()
Here is the code, called from my animate loop, that animates the laser scan:
// TODO: Testing laser scan object.
// Animate the global laser scan object.
const ddeltaTimeMs= g_MyAnimationClock.getDelta()
g_GlobalLaserScanTestObj.animateLaserScan(deltaTimeMs);