I’d like to create what looks like code you’d see in an editor within BabylonJS and I’m still wondering how best to go about this. Examples of what I mean include code as seen on codepen, or here, or here. That ‘2D code look’.
I’ve developed great looking and functional prototypes using HTML elements, but now that I’m using BabylonJS, I’d love to integrate 3D.
I’ve thought of using a DynamicTexture, but the lighting is a problem. I want the lighting to look like a code editor or like a command line; to look 2D. I’ve thought of overlaying HTML elements atop a canvas that Babylon controls, but I’d like to, at times, invoke 3D effects like using a camera, or introducing perspective. In essence: I’d like to have the full power a WebGL context provides, but also want to look like a normal 2D code editor.
To give an idea: I’d like it to be possible for it to look like someone’s coding away inside their IDE, and then a cube lifts up some of the text, or it bursts into particles, etc.
I’ve briefly looked at the GUI extensions. I’d prefer to keep things within the main BabylonJS code base using meshes and materials (or other features of the main branch) that I can control. If I have to make a custom shader, I’ll learn to do that.
Any ideas would be most appreciated.
Edited:
Looking at this playground regarding creating custom meshes, I guess I could create a custom mesh that’s rectangular, specify the normals so I get a homogeneous lighting effect, and use DynamicTexture
as much as needed to fill in the text. This would be a simple solution – it seems like it would work, but I’m not sure yet (still learning).