Console3 - logging to the rendering canvas

Demos and projects
1

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

image
image958×960 60.2 KB

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.

8 Likes
2

This is rad!!

1 Like
3

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

4

I love it !!!

2 Likes
5

This is very useful and the idea could be developed further.
Probably there should be an option to cut the values toFixed(2) to save your eyes :slight_smile:

2 Likes
6

Yes, there is still lot to do but no time :smiley:

1 Like
7

It looks like the promise was resolving early on line 9, but once those errant parenthesis are removed it wont resolve until the script is done loading, fixing the error that caused the first run to fail. :slightly_smiling_face: And this could def come in handy - I’ll have to try it out soon. :beers:
https://playground.babylonjs.com/#39CH06#4

2 Likes
8

Thanks for fixing this issue.:sunglasses: I will add the PG page to the repo as well.
R.

2 Likes
10

This is a Hulk Level thank you! :muscle: :vulcan_salute:

2 Likes