Is it possible to generate a texture in a procedural way using javascript?
There are two places in the game I would like to use this:
A: I want to display a QR code in game. So I hope to find a javascript library that generates a QR code that can be translated to a texture using javascript.
B: I want to generate a simple ui on the virtual screens inside the cockpit of a airplane. Just some simpel slow changing ui. So if would be nice if I could generate a texture that can be used for the virtual displays inside the cockpit.
@simmania I have used this javascript in the past for aircraft gauge representation on a android tablet. I thing it could be used for what you are looking for but have not really pulled it into PC before. Have a look.
There are multiple ways of doing this including:
- Doing it all in PlayCanvas and rendering it to a render texture and then using that texture for the UI element or material texture
- Rendering the UI in a Canvas DOM element and using that as a source for the texture and then using that texture for the UI element or material texture
- Doing it all with PlayCanvas UI elements
1 Like
Oh, just realised that qrious is GPL license which is copyleft 
Meaning that the whole game need to be open sourced?
Can we do the same with this one?
Created a new project with a library that is MIT licensed: https://playcanvas.com/editor/project/1025199
Wow, thx a lot!
I’m getting more and more experienced with PlayCanvas, but stuff that involves the DOM is a bridge to far for me now. I will study it and learn 
About the ui-texture options, I think this one is the most suitable:
(Which is another reason to learn more about the DOM interaction!)
Can this rendering in a Canvas DOM be done outside PlayCanvas? Does it need to be the same webpage? Or could it be a complete different webpage (but same machine)?
What do you mean by outside PlayCanvas? The TLDR is that as long as PlayCanvas can access the Canvas DOM element, it’s usable for a texture source.
It would be nice if it could be generated on a seperate thread. And In think all javascript of one webpage (one DOM) is executed on one thread isn’t it? The reason is that we do not want that the processing of this ui takes processing time away from the game play. It is mainly graphical sugar.
But I think we will start with the easy way: all using the same DOM. And see how far we come.
That’s where it comes down to what the browser can support. If you can find a way to generate it on a separate worker thread and have the texture source set to that canvas, then that’s great. PlayCanvas isn’t stopping you from doing so.
We’ve had some users use a server to generate the images so that the frontend app can load it at runtime via an API on the server.
That’s also an interesting idea. I’ll start with the simple solution first. I think there are plenty of opportunities for improvement.
