Maybe I’ve overlooked, but it looks like the 2D GUI library creates HTML elements instead of elements inside the canvas. With that, I don’t think it’s possible to use materials with specific UI elements.
Is there a way to use this in another way to use materials with specific parts of the UI? I’m not talking about the material of the AdvancedDynamicTexture on which the UI is shown.
GUI control and containers are not HTML objects but are elements of a canvas. They are not meshes so cannot have materials applied. Are you talking about using images Use the Babylon GUI - Babylon.js Documentation ?
Perhaps you could produce an image to show what you want your UI to look like.
Thanks for your response, I’m basically talking from a Unity3D perspective where elements can have materials. Which would mean you could animate them based on shader logic. So let’s say I want to make a button burn like a piece of paper. But I guess this would be to much at the moment.
If you need that the easiest is to create 2 camera with one orthographic one and create planes or meshes with materials. I agree it is less convenient but might be the easiest for special effects on your gui.
I have exactly the same subject for a new project.
But @sebavan I didn’t understand your suggestion? I don’t see how having 2 cameras will make it possible to have GUI “burn like a piece of paper” as @Sem said.
To give you a concrete example, I would like to reproduce the text effect from with website: Prometheus Fuels
I thought about having another plane in front of the GUI but then I have some zIndex issues due to other stuff which are behind the text.
Interesting example you have there. I believe this is a combination of effects. If you closely look at i.e. the close/menu button you will notice the control itself does not take the effect. Looking closer at a category text like i.e. ‘Mission’ you can see the effect is likely to be set on the texture (with a cell like animation). Next, on top of it all, you would have this animated ‘overlay’ and then (eventually) you would have one more in the background. So, you’d end up with a 3-layered advanced texture, either taking or not taking post-processing. And then, one or more of these could also be a node material. But by any means and method, you will need to use 1) multi-cam approach 2) multiple advanced texture layers. If anyone here as a better solution, yours are all very welcomed:)
In short, 1 camera will be assigned to your GUI controls, the other will be for your scene. The (likely) in this scenario 3rd cam will render the overlay or underlay (and add or exclude post-processing). Next, you will need to eventually add some effects on your GUI controls (a number of controls allow you to use things like cell animations and then the text itself (the titles like mission,etc…) can also be made out of a GUI (or GUI camera) object that would allow you to use materials/animations or a node material.
You wouldn’t use zIndex here at all.
OK. you could take a quick look at one of my demo. This is not exactly what you need, but close.
If you managed to load the scene that is desperately waiting on this performance update I’m supposed to do one of these days;) If you get the chance to get there, click on the ‘settings’ button and see:
The scene freeze yet with all particles remaining active
Post-processing mod applying to the scene
An underlay GUI layers with a frosty frame slowly appearing
I never heard about “cell animation”, is it sprite?
If it is sprite, I don’t see how to use them to have this effect? Unless having precalculated all the effects for each text in order to end up with a sprite animation. This is what you suggest?
Playing with GUI I found out a way to have a plane with a shader using GUI as the main texture which is exactly what I am looking for: https://playground.babylonjs.com/#4LYMKY#4
yes, sry, fast typing… obviously ‘cell’ in this case refers to a spritesheet and then yes, precalc for this effect. I know, doesn’t sound very ‘sexy’ but this would be only to accentuate/finalize the effect on the GUI (text or icons) controls. One wouldn’t notice a light difference if it has the same color, texture and scale. And it would still be partly covered with the overlay effect.
I cannot tell you if the shader will be able to do this job. I know nothing about coding shaders.
I will still see if I can somehow better demonstrate the sandwich GUI mode effect (with under- and overlay), because I’m quite sure it would (simply) do the job. I would just need to find the time and appropriate assets:( I believe you don’t have time to wait, so I hope you will find a way out with this shader or else in the meantime… sry not to be able to give you the ‘automagical’ BJS solution. I’m not yet qualified to create these;)
Edit: Stupid me. I believe it already exists. Not only it does but I experienced it (just forgot about it).
The answer is simple and featured in the 4.2 release PG for NME and post-process.
Simply use a node material applied to the post-processing of your ADT.
I believe I have a start of a PG somewhere where I have isolated the scene and GUI post-processing.
By any means, this will still require 2 cams.
Edit2: Here is the link
but actually, if you ‘burn’ everything (both scene and GUI) you will not even need the second cam. All you’d need is to create and time your node material ‘burning scene’ effect
Concerning the GUI working with a shader, I found the solution in the playground from my previous message. You just have to push the texture created from GUI in the shader texture sampler. So this is way easier than I thought.
Concerning the effect we see on the website I shared where there is a layer above everything, I think you are right and we must use a multicamera approach. I will look at your playgrounds to see if I can re-use what you have done. I am not very good with BabylonJS node material yet but I just need to do the same thing with a classic shader.