Hello,
This is my first post on the forum. Just wanted to say thank you for making Babylon it is truly awesome.
Any for most issues I have come across I have been able to figure them out but this one really has me puzzled.
I am making a game that is utilizing the off screen canvas to do some multi threading. On the second canvas I will be rendering all of the games graphics while on the first all the physics and sound will be taken care of.
The game is an infinite runner/platformer game that generates the world as you go. So, I also have a second worker that just generates level data and feeds it back. In practice everything was working great until I ran into this bug.
So here is my problem.
The pillar on the left was loaded on the main thread and the pillar on the right was loaded in the worker thread.
The model is a .babylon file that I created from exporting an obj file from blender.
When the model is loaded into the main canvas everything is fine with the UV mapping.
I have no idea what is going on or what could be causing it.
Otherwise I’ve had no problems working with the offscreen canvas.
I will provide below some example code. I basically just replicated the same problem I was having.
Here is the code for the main scene:
window.addEventListener("DOMContentLoaded", function () {
let offScreenCanvas = document.getElementById("renderCanvas2");
offScreenCanvas.width = offScreenCanvas.clientWidth;
offScreenCanvas.height = offScreenCanvas.clientHeight;
let offscreen = offScreenCanvas.transferControlToOffscreen();
var worker = new Worker("./testworker.js", {
type: "module",
});
worker.postMessage([{ message: "init-scene", canvas: offscreen }], [offscreen]);
worker.onerror = (e) => {
console.log(e);
console.log("ERROR HAPPENED!");
};
window.worker = worker;
let canvas = document.getElementById("renderCanvas");
let engine = new BABYLON.Engine(canvas, true, { stencil: true });
let createScene = function () {
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 10, 50), scene);
// The first parameter can be set to null to load all meshes and skeletons
BABYLON.SceneLoader.ImportMesh(null, "./assets/models/1/pillars/", "dockpillar1.babylon", scene, function (meshes) {
let mesh = meshes[0];
mesh.position.z = 0;
mesh.position.y = 0;
});
return scene;
};
let scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
});
Here is the code for the worker:
let canvas = false;
addEventListener(‘message’, e => {
if (e.data[0]) {
if (e.data[0].message == 'init-scene') {
console.log("init scene!");
initScene(e);
}
}
});
const initScene = (evt) => {
console.log(evt.data[0].canvas);
console.log(‘init scene!’);
canvas = evt.data[0].canvas;
let engine = new BABYLON.Engine(canvas, false, {
stencil: true,
doNotHandleContextLost: true
});
let scene = false;
let createScene = function () {
var scene = new BABYLON.Scene(engine);
var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;
// var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 100, height: 100}, scene);
var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
BABYLON.SceneLoader.ImportMesh(null, "./assets/models/1/pillars/", "dockpillar1.babylon", scene, function (meshes) {
let mesh = meshes[0];
mesh.position.z = 0;
mesh.position.y = 0;
console.log('%c loaded pillar mesh', 'font-size: 30px; color: red;');
mesh.onReady = () => {
console.log("mesh is ready!");
}
});
return scene;
};
scene = createScene();
let renderLoop = () => {
scene.render();
}
engine.runRenderLoop(renderLoop);
}
Here are some other notes.
I am building the game in electron cause I plan to release it as desktop than mobile app.
The models UVs are fine when I use glb files. But I would really prefer to use .babylon so I can update the textures as I go along.
Any advice would be much apprecited!
Thank you