New playgrounds not working with the "Playground development (Edge)" task when doing local Babylon.js development

[Panuchka]

Hi everyone!

I’m trying to do a small addition to the codebase, but I cannot get new playgrounds to show up locally. Old ones do work. New ones give me Uncaught (in promise) SyntaxError: Unexpected token ‘:’ error. I’m not sure if I’m doing something wrong, since this is my first ever contribution attempt!

I just cloned the repo, then ran the “Playground development (Edge)” -task after npm install. I have been trying to read the contribution document as carefully as I can. I’ve run the playgrounds in the address http://localhost:1337/#123456, where 123456 is imaginary snippet url of course

In the code evaluation there seems to be different handling. The new playgrounds have an input like this:

New Playgrounds

“{“v”:2,“language”:“JS”,“entry”:“index.js”,“imports”:{},“files”:{“index.js”:“const createScene = () => {\n const scene = new BABYLON.Scene(engine);\n\n const camera = new BABYLON.ArcRotateCamera(“Camera”, - Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero());\n camera.attachControl(canvas, true);\n\t\n\tconst light1 = new BABYLON.DirectionalLight(“DirectionalLight”, new BABYLON.Vector3(0, -1, 1));\n const light2 = new BABYLON.HemisphericLight(“HemiLight”, new BABYLON.Vector3(0, 1, 0)); \n light1.intensity =0.75;\n light2.intensity =0.5;\n\n const box = BABYLON.MeshBuilder.CreateBox(“box”, {});\n box.position.x = 2;\n\n const frameRate = 10;\n\n const xSlide = new BABYLON.Animation(“xSlide”, “position.x”, frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);\n\n const keyFrames = ; \n\n keyFrames.push({\n frame: 0,\n value: 2\n });\n\n keyFrames.push({\n frame: frameRate,\n value: -2\n });\n\n keyFrames.push({\n frame: 2 * frameRate,\n value: 2\n });\n\n xSlide.setKeys(keyFrames);\n\n box.animations.push(xSlide);\n\n scene.beginAnimation(box, 0, 2 * frameRate, true);\n\n\treturn scene;\n};\nexport default createScene\n”}}”

And the older ones are like this:

Old Playgrounds

"var createScene = async function () {
var scene = new BABYLON.Scene(engine);

var camera = new BABYLON.ArcRotateCamera(“camera”, -Math.PI / 2, Math.PI / 3, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
camera.setTarget(new BABYLON.Vector3(0, 0.5, 0));
camera.wheelPrecision = 10;

camera.minZ = 0.1;
camera.maxZ = 30;

var light = new BABYLON.DirectionalLight(“dirLight”, new BABYLON.Vector3(1, -2, 1), scene);
light.intensity = 0.4;

light.shadowMinZ = 0.1;
light.shadowMaxZ = 30;

var light2 = new BABYLON.DirectionalLight(“dirLight2”, new BABYLON.Vector3(-2, -2, -1), scene);
light2.intensity = 0.4;

light2.shadowMinZ = 0.1;
light2.shadowMaxZ = 30;

// Our built-in ‘sphere’ shape. Params: name, options, scene
var sphere = BABYLON.MeshBuilder.CreateSphere(“sphere”, { diameter: 2, segments: 32 }, scene);

// Move the sphere upward 1/2 its height
sphere.position.x = -1;
sphere.position.y = 1;

// Our built-in ‘ground’ shape. Params: name, options, scene
var ground = BABYLON.MeshBuilder.CreateGround(“ground”, { width: 60, height: 60 }, scene);

const groundMat = new BABYLON.StandardMaterial(“mat”, scene);
ground.material = groundMat;

await BABYLON.AppendSceneAsync(“https://playground.babylonjs.com/scenes/Dude/dude.babylon”, scene);
scene.lights[2].dispose();

const hero = scene.getMeshByName(“him”);
hero.scaling.scaleInPlace(0.03);
scene.beginAnimation(scene.skeletons[0], 0, 100, true, 1.0);
hero.position.x = 1;

scene.meshes.forEach((m) => m.receiveShadows = true);

scene.cameraToUseForPointers = camera;

const nrg = await BABYLON.NodeRenderGraph.ParseFromSnippetAsync(“PSA9PS#161”, scene, {
autoFillExternalInputs: false,
debugTextures: true,
});

// Sets values to block inputs / configure blocks
const cameraBlock = nrg.getBlockByName(“Camera”);
cameraBlock.value = camera;

const lightBlock = nrg.getBlockByName(“ShadowLight”);
lightBlock.value = light;

const light2Block = nrg.getBlockByName(“ShadowLight2”);
light2Block.value = light2;

const objectListBlock = nrg.getBlockByName(“ObjectList”);
objectListBlock.value = { meshes: scene.meshes, particleSystems: };

const objectListShadowBlock = nrg.getBlockByName(“ObjectListShadow”);
objectListShadowBlock.value = { meshes: scene.meshes.slice(), particleSystems: };
objectListShadowBlock.value.meshes.splice(objectListShadowBlock.value.meshes.indexOf(ground), 1);

const guiBlock = nrg.getBlockByName(“GUI”);
const gui = guiBlock.gui;

const button = BABYLON.GUI.Button.CreateSimpleButton(“button”, “Edit Frame Graph”);

button.width = “200px”;
button.height = “60px”;
button.color = “white”;
button.fontSize = 20;
button.background = “green”;
button.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

button.onPointerClickObservable.add(() => {
nrg.edit({
nodeRenderGraphEditorConfig: {
hostScene: scene,
}
});
});

gui.addControl(button);

nrg.build();

await nrg.whenReadyAsync();

scene.frameGraph = nrg.frameGraph;

return scene;

};"

So if you could confirm if this is infact a bug or me doing something silly, I would be grateful

[sebavan]

I will have a look today, in the mean time you could run the real playground locally this should be easier anyway.

[sebavan]

Normally the playground app should open in your browser. Can you share where you found the info about :1337/#123456 ? I am wondering if it is a doc missing an update ?

[Panuchka]

The docs say 1338, but my console says:

@tools/babylon-server@1.0.0 serve
webpack serve

 [webpack-dev-server] Project is running at:
 [webpack-dev-server] Loopback: http://localhost:1337/
 [webpack-dev-server] On Your Network (IPv4): http://192.168.1.8:1337/

run the real playground

Oh I didn’t notice the other task, argh, I’ll try that one

[Panuchka]

I ran the “Launch Playground (Edge)” task and the same problem seems to persist.

[sebavan]

Do you have the edge extension installed

[Panuchka]

Nope, is that required? Also, can you yourself make a new default playground and does it run for you locally?

[sebavan]

yup it is required

[Panuchka]

Yeah, tried with the dev tools, working similarly. The basic scene works, but no new playgrounds can be utilized.

I’ll repeat myself but am I the only one unable to run the new playgrounds with the local copy of Babylon.js and with the “Launch Playground (Edge)” task?

[sebavan]

Is Edge opening and running on port 1338 ?

[Panuchka]

On port 1337 with the “Launch Playground (Edge)” task but yeah!

And when I try to open a NEW playground:

But this 100 years old playground works:

[sebavan]

Yes this is expected, can you try on port 1338 ?

[Panuchka]

After tinkering with it more I now have a full playground working, but I’m not sure what I did. I installed some of the extensions and added an .env file to the mix and somehow everything now works… It is also now running in the port 1338.

I think the contribution document should say if the extensions are mandatory, I think the amodio.tsl-problem-matcher might be, not sure if the other ones are. And also not sure about the .env as well, if it should be included or not. To be honest I’m a bit scared to touch anything now that it is working properly

Closing this as it seems to not have been a bug, but user error.

[Panuchka]

Reopening this since I do not understand why the changes are not propagating to the port 1338 of the playground, even though I am running npm run watch:dev … And now desperately trying the port 1337 version that still does not accept any new playgrounds? What am I doing wrong? Why are the old playgrounds only working for the 1337 version and not new ones?

[sebavan]

The new ones heavily rely on monaco for imports and such due to the multifile nature of the pg. what does not work on 1338 for you ? (The js us still served from 1337 so similar to the other approach)

[Panuchka]

The 1338 seems to serve the newest build of babylon to me and not the one I’m currently at The 1337 version uses my local babylon which is a bit behind since I cloned the repo like a week ago. To get my playground working I had to do this kind of naught stabbing:

export const loadPlayground = async (playgroundId: string) => {
    const data = await fetch(SnippetUrl + playgroundId.replace(/#/g, "/"));
    const snippet = await data.json();
    let code = JSON.parse(snippet.jsonPayload).code;
    code = JSON.parse(code);
    code = code.files["index.js"].toString();
    code = code
        .replace(/\/textures\//g, PgRoot + "/textures/")
        .replace(/"textures\//g, '"' + PgRoot + "/textures/")
        .replace(/\/scenes\//g, PgRoot + "/scenes/")
        .replace(/"scenes\//g, '"' + PgRoot + "/scenes/")
        .replace(/"\.\.\/\.\.https/g, '"' + "https")
        .replace("http://", "https://")
        .replace("export default createScene", "");

    const createSceneFunction = code.indexOf("delayCreateScene") > -1 ? "delayCreateScene" : "createScene";
    const loadedScene = eval(`${code};${createSceneFunction}(engine);`);

    // eslint-disable-next-line github/no-then
    if (loadedScene.then) {
        // Handle if createScene returns a promise
        return await loadedScene;
    } else {
        return loadedScene;
    }
};

I can now see the changes in the 1337 version and my new glow layer prop (yay) but the 1338 version (full playground) is using the latest build and not my local version it seems…

The commands I am running in different terminals:
npm run watch:dev
npm run serve -w @tools/playground
npm run serve -w @tools/babylon-server

My env file in the project root

TOOLS_PORT=1338
CDN_PORT=1337
CDN_BASE_URL="localhost:1337" 
ENABLE_HTTPS=false
ENABLE_DEV_OVERLAY=true 
WATCH_ASSETS=true
PACKAGES="core,gui"

[sebavan]

Can you try removing your .env file

Npm run start
npm run serve -w @tools/playground

This should be enough to get pg on 1338

[Panuchka]

I removed the env file and then run the two commands, still it uses the cdn version for me and not the local… The balls should not be glowing if my local changes were run properly…

[sebavan]

This is because you use 192. … in the url so the playground thinks you are using it remotely falling back to preview.

Can you use localhost:1338 instead ? or add ?local=true in the url ?

Here is how we check it

[Panuchka]

Oh my days, that did it! What a journey… Finally I can finish my PR, thank you for the help and happy holidays