Develop Reference

Showing highlighted silhouette of mesh ONLY when it is occluded

so I'm trying to create an online game using Babylon.js but have run into a problem thats got me a little stumped so hoping someone here would be willing to help me out. Please bear with me on this one, i'm a complete newbie with babylon as i've only every worked with THREE.js. Right now my game consists of a scene compromising of multiple meshes with multiple users represented as avatars (created from basic circle geometry for the moment) loaded into an environment. What I want to do is highlight the outline of these avatars ONLY when they are occluded by any other object, meaning that when they are not occluded they look normal with no highlight but when behind an object their highlighted silhouette can be seen by others (including yourself as you can see your own avatar). This is very akin to effects used in many other video games (see example below).
Example of Effect
Thus far, based on some googling and forum browsing (Babylonjs outline through walls & https://forum.babylonjs.com/t/highlight-through-objects/8002/4) I've figured out how to highlight the outline of objects using Babylon.HighlighLayer and I know that i can render objects above others via RenderingGroups but I can't seem to figure out how to use them in conjunction to create the effect I want. The best i've managed to do is get the highlighted avatar render above everything but I need just the silhouette not the entire mesh. I'm also constrained by the fact that my scene has many meshes in it that are loaded dynamically and i'm also trying to keep things as optimal as possible. Can't afford to use very computationally expensive procedures.
Anybody know of the best way to approach this? Would greatly appreciate any advice or assistance you can provide.Thanks!

So I asked the same question on the babylon forums which helped me to find a solution. All credit goes to the guy's that helped me out over there but just in case someone else comes across this question seeking an answer, here is a link to that forum question https://forum.babylonjs.com/t/showing-highlighted-silhouette-of-mesh-only-when-it-is-occluded/27783/7
Edit:
Ok thought i'd include the two possible solutions here properly as well as their babylon playgrounds. All credit goes to roland & evgeni_popov who came up with these solutions on the forum linked above.
The first solution is easier to implement but slightly less performant than the second solution.
Clone Solution: https://playground.babylonjs.com/#JXYGLT%235
// roland#babylonjs.xyz, 2022
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2, 20, new BABYLON.Vector3(0, 0, 0), scene)
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
const wall = BABYLON.MeshBuilder.CreateBox('wall', { width: 5, height: 5, depth: 0.5 }, scene)
wall.position.y = 1
wall.position.z = -2
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2, segments: 32 }, scene)
sphere.position.y = 1
const sphereClone = sphere.clone('sphereClone')
sphereClone.setEnabled(false)
const matc = new BABYLON.StandardMaterial("matc", scene);
matc.depthFunction = BABYLON.Constants.ALWAYS;
matc.disableColorWrite = true;
matc.disableDepthWrite = true;
sphereClone.material = matc;
sphere.occlusionQueryAlgorithmType = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_ACCURATE
sphere.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_STRICT
const hl = new BABYLON.HighlightLayer('hl1', scene, { camera: camera })
hl.addMesh(sphereClone, BABYLON.Color3.Green())
hl.addExcludedMesh(wall);
let t = 0;
scene.onBeforeRenderObservable.add(() => {
sphere.position.x = 10 * Math.cos(t);
sphere.position.z = 100 + 104 * Math.sin(t);
if (sphere.isOccluded) {
sphereClone.setEnabled(true)
sphereClone.position.copyFrom(sphere.position);
} else {
sphereClone.setEnabled(false)
}
t += 0.03;
})
return scene;
};
This second solution is slightly more performant than above as you don't need a clone but involves overriding the AbstactMesh._checkOcclusionQuery function which is the function that updates the isOccluded property for meshes such that the mesh is always rendered even when occluded. There’s no overhead if you are using the occlusion queries only for the purpose of drawing silhouettes however If you are also using them to avoid drawing occluded meshes then there’s an overhead because the meshes will be drawn even if they are occluded. In which case your probably best of going with the first solution
Non-Clone solution: https://playground.babylonjs.com/#JXYGLT#14
// roland#babylonjs.xyz, 2022
const createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera('camera', -Math.PI / 2, Math.PI / 2, 20, new BABYLON.Vector3(0, 0, 0), scene)
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
const wall = BABYLON.MeshBuilder.CreateBox('wall', { width: 5, height: 5, depth: 0.5 }, scene)
wall.position.y = 1
wall.position.z = -2
const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2, segments: 32 }, scene)
sphere.position.y = 1
sphere.occlusionQueryAlgorithmType = BABYLON.AbstractMesh.OCCLUSION_ALGORITHM_TYPE_ACCURATE
sphere.occlusionType = BABYLON.AbstractMesh.OCCLUSION_TYPE_STRICT
const mats = new BABYLON.StandardMaterial("mats", scene);
sphere.material = mats;
const hl = new BABYLON.HighlightLayer('hl1', scene, { camera: camera })
hl.addExcludedMesh(wall);
let t = 0;
const cur = BABYLON.AbstractMesh.prototype._checkOcclusionQuery;
scene.onDisposeObservable.add(() => {
BABYLON.AbstractMesh.prototype._checkOcclusionQuery = cur;
});
BABYLON.AbstractMesh.prototype._checkOcclusionQuery = function() {
cur.apply(this);
return false;
}
scene.onBeforeRenderObservable.add(() => {
sphere.position.x = 10 * Math.cos(t);
sphere.position.z = 100 + 104 * Math.sin(t);
if (sphere.isOccluded) {
hl.addMesh(sphere, BABYLON.Color3.Green())
mats.depthFunction = BABYLON.Constants.ALWAYS;
mats.disableColorWrite = true;
} else {
hl.removeMesh(sphere);
mats.depthFunction = BABYLON.Constants.LESS;
mats.disableColorWrite = false;
}
t += 0.03;
})
return scene;
};

JavaScript: How to calculate offsets for a boundary of a moving sprite when it's speed is relative to time?

I am current running into a bit of a math conundrum that has stumped me for days.
I am building a JavaScript game and attempting to create boundary coordinates to manage the pathing and movement of sprites, however it appears that lag/jitter/delay is reeking havoc on different entities moving in coordination with one another.
I believe I must calculate the jitter/lag/offset and somehow apply it to the coordinate range detection and movement functions but I have yet to crack the code correctly and alleviate the mis-aligning sprites.
Here is a replication of the issue in a CodeSandbox and the bulk of the code that shows it in action:
https://codesandbox.io/s/movetime-boundries-issue-example-2prow?file=/src/App.js
var obj = { x: 10, speed: 250 };
var obj2 = { x: 100 };
var objHighestX = { max: 0 };
var direction = 0;
var canvas = document.getElementById("mainScene");
var ctx = canvas && canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;
ctx.font = "15px Courier";
var render = function () {};
var update = function (modifier) {
// console.log("Updating");
ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
ctx.fillRect(obj2.x, 60, 15, 15);
if (obj.x > objHighestX.max) {
objHighestX.max = obj.x;
}
ctx.fillText(String("X" + obj.x), 25, 100);
ctx.fillText(String("Furthest" + objHighestX.max), 125, 100);
if (obj.x >= obj2.x - 15) {
direction = 1;
} else if (obj.x <= 0) {
direction = 0;
}
if (direction === 0) {
obj.x += obj.speed * modifier;
ctx.clearRect(obj.x - 7, 9, 17, 17);
ctx.fillRect(obj.x, 60, 15, 15);
}
if (direction === 1) {
obj.x -= obj.speed * modifier;
ctx.clearRect(obj.x, 9, 17, 17);
ctx.fillRect(obj.x, 60, 15, 15);
}
};
var lastUpdate = Date.now();
// The main game loop
var main = function () {
var now = Date.now();
var delta = now - lastUpdate;
lastUpdate = now;
update(delta / 1000);
render();
requestAnimationFrame(main);
};
main();
If anyone has any suggestions or questions towards my case, I'm very eager to hear of it.
Perhaps I have to use the rate of change to create an offset for the boundaries?
Which I've tried like:
if (obj.x >= obj2.x - (15 * 1 * modifier))
But am still not yet getting this one down. Thank you all, greatly, in advance.

First, you're delta time calculations aren't complete.
var now = Date.now();
var delta = now - lastUpdate;
lastUpdate = now;
update(delta / 1000);
If you now request update() to be invoked via requestAnimationFrame, the number passed as a parameter will be the number of miliseconds passed between the last and the current frame. So if the screen refresh rate is 60hz it's roughly 16.6ms.
This value alone though isn't meaningful - you need to compare it against a target value.
Say we want to achieve a framerate of 30fps - equal to ~33.3ms. If we take this value and divide it from the 16.6ms above, we get roughly 0.5. This makes complete sense. We want 30fps, the monitor refreshes at 60hz, so everything should move at half the speed.
Let's modify your main() function to reflect that:
var main = function() {
var targetFrameRate = 30;
var frameTime = 1000 / targetFrameRate;
var now = Date.now();
var delta = now - lastUpdate;
lastUpdate = now;
update(delta / frameTime);
render();
requestAnimationFrame(main);
};
Second problem is the update() function itself.
Let's have a look at the following block:
if (direction === 0) {
obj.x += obj.speed * modifier;
ctx.clearRect(obj.x - 7, 9, 17, 17);
ctx.fillRect(obj.x, 60, 15, 15);
}
That means, wherever obj currently is, move it to the right by some amount. We are missing the boundary check at this point. You need to check if it would leave the bounds if we would move it to the right. In case it does, just move it next to the bounds.
Something like this:
var maxX=100;
if (direction === 0) {
var speed = obj.speed * modifier;
if (obj.x + obj.width + speed > maxX) {
direction = 1;
obj.x = maxX - obj.width;
} else {
obj.x += speed;
}
}

Maintain correct speed during collision frame
I notice that the object is always moving, which means the given answer does not correctly solve the problem.
An object should not slow down between frames if it has a constant speed
The illustration shows an object moving
At top how far it would move without interruption.
At center the point of collision. Note that there is still a lot of distance needed to cover to maintain the same speed.
At bottom the object is moved left the remaining distance such the total distance traveled matches the speed.
To maintain speed the total distance traveled between frames must remain the same. Positioning the object at the point of collision reduces the distance traveled and thus the speed of the object during the collision frame can be greatly reduced
The correct calculation is as follows
const directions = {
LEFT: 0,
RIGHT: 1,
};
const rightWallX = 100;
const leftWallX = 0;
if (obj.direction === directions.RIGHT) {
obj.x = obj.x + obj.speed;
const remainDist = (rightWallX - obj.width) - obj.x;
if (remainDist <= 0) {
obj.direction = directions.LEFT;
obj.x = (rightWallX - obj.width) + remainDist;
}
} else if (obj.direction === directions.LEFT) {
obj.x = obj.x - obj.speed;
const remainDist = leftWallX - obj.x;
if (remainDist >= 0) {
obj.direction = directions.RIGHT;
obj.x = leftWallX + remainDist;
}
}

Transform Rounded Rectangle to Circle

I've been working on a specific animation in which I need to convert(with animation) a Rounded Rectangle Shape to Circle. I've checked the documentation of paper.js and haven't found any predefined function to achieve this.
-->
The animation needs to be smooth. As the number of rectangles I'm working with is very high, I can't use the "remove current rounded rect and redraw one more rounded version" method. It reduces the performace and the animation gets laggy.
This is the code I'm using to generate rounded rectangle.
// Had to paste something to post the question
// Though the whole code can be seen on codepen link
var rect = new Rectangle();
var radius = 100, origin = {x: 100, y: 100};
rect.size = new Size(radius, radius);
rect.center = new Point(origin.x, origin.y);
var cornerSize = radius / 4;
var shape = new Path.Rectangle(rect, cornerSize);
Prepared this Codepen example to show the progress.
If we can work out the whole animation using any other object types, that will be fine too. For now I can't find any any property which can transform the rounded rectangle to circle.
I'm also animating color of the object and position. I've gone through many documents to find out color animation.
PS: If there is any other(better) technique to animate colors of object, please share that too.

You will first have to create a path as a rounded rectangle. Then with each step in your animation you have to modify the eight segments of the path. This will only work with Path objects, not if your rectangle is a Shape.
The segment points and the handles have to be set like this:
κ (kappa) is defined in paper.js as Numerical.KAPPA (more on Kappa here).
The code to change the radius could look like this (Click here for the Sketch):
var rect = new Path.Rectangle(new Point(100, 100), new Size(100, 100), 30);
rect.fullySelected = true;
var step = 1;
var percentage = 0;
function onFrame(event) {
percentage += step;
setCornerRadius(rect, percentage)
if (percentage > 50 || percentage < 0) {
step *= -1;
}
}
function setCornerRadius(rectPath, roundingPercent) {
roundingPercent = Math.min(50, Math.max(0, roundingPercent));
var rectBounds = rectPath.bounds;
var radius = roundingPercent/100 * Math.min(rectBounds.width, rectBounds.height);
var handleLength = radius * Numerical.KAPPA;
l = rectBounds.getLeft(),
t = rectBounds.getTop(),
r = rectBounds.getRight(),
b = rectBounds.getBottom();
var segs = rectPath.segments;
segs[0].point.x = segs[3].point.x = l + radius;
segs[0].handleOut.x = segs[3].handleIn.x = -handleLength;
segs[4].point.x = segs[7].point.x = r - radius;
segs[4].handleOut.x = segs[7].handleIn.x = handleLength;
segs[1].point.y = segs[6].point.y = b - radius;
segs[1].handleIn.y = segs[6].handleOut.y = handleLength;
segs[2].point.y = segs[5].point.y = t + radius;
segs[2].handleOut.y = segs[5].handleIn.y = -handleLength;
}
Edit: I just found a much easier way using a shape. Not sure which approach performs faster.
Here is the implementation using a Shape (Click here for the Sketch).
var size = 100;
var rect = new Shape.Rectangle(new Rectangle(new Point(100, 100), new Size(size, size)), 30);
rect.strokeColor = "red";
var step = 1;
var percentage = 0;
function onFrame(event) {
percentage = Math.min(50, Math.max(0, percentage + step));
rect.radius = size * percentage / 100;
if (percentage >= 50 || percentage <= 0) {
step *= -1;
}
}

Change the corner size to the following
var cornerSize = circle.radius / 1;

Javascript canvas animation. Moving, growing and fading object

Working on a project and cannot seem to get my animation right. I will not be showing the code because it simply doesn't work but it would be cool if someone were to give me a few pointers on how to animate a cloud of smoke moving upwards while slowly fading and increasing in size.
This effect should technically repeat once the y value reaches 0 i.o.w. the cloud reaches the top of the canvas.
What I need to know is how do I animate this, and which methods do I use. This is a kind of a self learning assignment.
Thanks in advance.

Here is a Plunker example of sprites growing in size and fading in transparency.
It is done using Pixi.js which actually renders in webgl with a canvas fallback. It should be possible to take the algorithm and apply it to raw canvas (although it would take some work).
var insertAfter = function(newNode, referenceNode) {
referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}
var range = function(aCount) {
return new Array(aCount)
}
function main() {
var el_main = document.getElementById("animation_main");
var el_div = document.createElement('div');
el_div.setAttribute('id', 'main_stage');
insertAfter(el_div, el_main);
renderer = PIXI.autoDetectRenderer(300, 300, {
transparent: true,
antialias: true
});
el_div.appendChild(renderer.view);
window.stage = new PIXI.Container();
window.stage.x = 0;
window.stage.y = 0;
renderer.render(window.stage);
var s = [];
for (x of range(400)) {
tCircle = new PIXI.Graphics();
tCircle.beginFill(0x000000, 1);
tCircle.s = (Math.random() * 2) + 1;
tCircle.drawCircle(0, 0, 5 - tCircle.s);
tCircle.x = Math.random() * 300
tCircle.y = (Math.random() * 50) + 20
tCircle.endFill();
s.push(tCircle);
window.stage.addChild(tCircle)
}
window.t = 0
animate = function(t) {
d = t - window.t
window.t = t
//Animation Start
for (n in s){
s[n].x += ((s[n].s / 25) * d)
s[n].alpha = 1 - s[n].x / 300
s[n].scale.x = 1 - s[n].alpha
s[n].scale.y = 1 - s[n].alpha
if (s[n].x > 300) {
s[n].x = 0
s[n].y = (Math.random() * 50) + 20
}
}
renderer.render(window.stage)
//Animation End
requestAnimationFrame(animate);
}
requestAnimationFrame(animate)
}
document.addEventListener("DOMContentLoaded", function(e){
main();
});
At the moment all of the tweening is linear ... it might look more realistic with a logarithmic or exponential tween ... but for simplicity i just left it as linear.

Jakob Jenkov has done a really nice on-line book about canvas here:
http://tutorials.jenkov.com/html5-canvas/index.html
Since yours is a learning experience, I would just point you towards:
The basic workflow of html5 Canvas: Anything drawn on the canvas cannot be altered, so all canvas animation requires repeatedly doing these things in an animation loop: (1) clearing the canvas, (2) calculating a new position for your objects, and (3) redrawing the objects in their new positions.
Animations: requestAnimationFrame as a timing loop: http://blog.teamtreehouse.com/efficient-animations-with-requestanimationframe
Transformations: Canvas gives you the ability to scale, rotate and move the origin of its drawing surface.
Styling: Canvas provides all the essential styling tools for drawing--including globalAlpha which sets opacity.

Box2dweb: add images to shapes

i'm really struggling to add images to a shape using jquery and box2dweb.
my code is based on a great example here: http://henry.brown.name/experiments/box2d/bricks.php
with the image binding taken from here: http://www.jeremyhubble.com/box2d.html
i've pasted the function called createObject below, and marked my additions in comments.
i'm passing the src using userdata, and then adding the image retrospectively, but i just cant seem to get the images to appear.
i dont get any error messages either.
function createObject(mouseX,mouseY,width,height,gravity){
bodyDef.type = b2Body.b2_dynamicBody;
bodyDef.position.Set(mouseX, mouseY);
bodyDef.angle = 0;
bodyDef.userData = {
'width':width,
'height':height,
'gravity':gravity,
'imgsrc':'images/logo.png',
'imgsize': '16',
'bodysize': '5'
}
fixDef.shape = new b2PolygonShape;
fixDef.shape.SetAsBox(
width / 2, // Math.random() + 0.1 //half width
height / 2 // Math.random() + 0.1 //half height
);
var body = world.CreateBody(bodyDef).CreateFixture(fixDef);
//custom code starts
var canvaselem = document.getElementById("canvas");
var context = canvaselem.getContext("2d");
var canvaswidth = canvaselem.width-0;
var canvasheight = canvaselem.height-0;
var bodies = world.GetBodyList();
var bodyCount = world.GetBodyCount();
for(var i = 0; i < bodyCount; i++){
var thisbody = bodies.GetUserData();
if(thisbody){
if(thisbody.imgsrc){
console.log(thisbody);
// This "image" body destroys polygons that it contacts
var edge = bodies.GetContactList();
while (edge) {
var other = edge.other;
if (other.GetType() == b2Body.b2_dynamicBody) {
var othershape = other.GetFixtureList().GetShape();
if (othershape.GetType() == body.e_polygonShape) {
world.DestroyBody(other);
break;
}
}
edge = edge.next;
}
var position = bodies.GetPosition();
var flipy = canvasheight - position.y;
var size =thisbody.imgsize;
var imgObj = new Image(size,size);
imgObj.src = thisbody.imgsrc;
context.save();
context.translate(position.x,flipy);
context.rotate(bodies.GetAngle());
alert(bodies.GetAngle());
var s2 = -1*(size/2);
var scale = thisbody.bodysize/-s2;
context.scale(scale,scale);
context.drawImage(imgObj,s2,s2);
context.restore();
}
}
bodies = bodies.GetNext();
}
//custom code ends
}
My console output in chrome:
Object {width: 1, height: 2, gravity: 0, imgsrc: "images/anm.png", imgsize: "16"…}
bodysize: "5"
gravity: 0
height: 2
imgsize: "16"
imgsrc: "images/anm.png"
width: 1
__proto__: Object
Any help appreciated :)

Here you go, the example is for a circle.
The tab array contains all your box2D objects, here, only circles
function()DisplayImagesOnCircles(tab){
for(var i=0; i < tab.length; i++){ //check all the game items
context.save();
//30 is your worldscale. Get position of bodies
context.translate(tab[i].GetBody().GetPosition().x * 30, tab[i].GetBody().GetPosition().y * 30);
//get the angles of all the bodies
context.rotate(tab[i].GetBody().GetAngle());
//the 60 here is 2 times your worldscale. Get the radius of the circles
var radius = tab[i].m_shape.m_radius* 60;
//draw image
context.drawImage(img, -radius/2, -radius/2 , radius, radius);
context.restore();
}
All I'm doing is moving the context according to where the balls are. I execute this code in my loop.
If someone else needs a function working with rectangles/squares/circles, feel free to contact me.

I recommend using Easel.js with Box2DWeb. I've just started with both and am up and running already. Mind you Easel is especially intuitive if you've come from a flash environment but either way I think its a great Canvas framework.
Here's a great video to start learing how to combine the two.
Part 1
http://gotoandlearn.com/play.php?id=176
Part 2
http://gotoandlearn.com/play.php?id=177