Console3 - logging to the rendering canvas

Hello guys!
The little visual tool prototype I’ve create to help me visualize values on the render canvas is evolving. Maybe you will find a good usage for it as well!

If you get a white screen just smash the Play button! There is something wrong with the init code :frowning:

Here is the PG with a demo
https://playground.babylonjs.com/#39CH06

I have added a console at the bottom. C, O buttons hides the bottom console or the whole thing, P pauses logging. Mostly I need help to visualize some positions or direction vectors so I started to add some sort of Vector3 visualization.

And this all works in the Playground:

You just have to change the createScene function to async and add some init code.

var createScene = async function () {

    await new Promise(r => {
        var s = document.createElement("script");
        s.src = "https://console3.babylonjs.xyz/console3-playground.js";
        document.head.appendChild(s);
        s.onload = r()
    })

    var scene = new BABYLON.Scene(engine);

    var c3 = window.console3 // or whatever you want to name it
    c3.create(engine, scene)
    c3.log("Scene created")

... your code follows

and that’s it!

You can tweak some values:
image

GitHub:

Part 1:

R.

3 Likes

This is rad!!

1 Like

I had to google the meaning of this sentence :smiley: :smiley:
Thank you! :vulcan_salute:

I love it !!!

1 Like