Demo visuals phase one

[DigitalN8m4r3]

this updates the current xr tools demo scenes with a more modern fresh clean look

update includes:
new materials for the instruction meshes and the teleport body material
replaced table with a table model and a material to suit the rest of the visuals
added holodeck map and changed most of the scenes to use the holodeck instead of the basic map

Note:
as the title states, this is in fact a multipart pr.
this being the phase one, the next phase will concentrate on replacing the pickable models along with the interactables

[DigitalN8m4r3]

DemoShowcase.mp4

[DigitalN8m4r3]

new interactable models preview
planed for Phase Two

[BastiaanOlij]

First and most important, as a long time Star Trek fan, I love the look.

My biggest concerns are technical ones but I think all can be simply solved.

Sky
This is pure nitpicking, the holodeck obscures the sky completely, but we still render a full panoramic sky. Edit the demo_env.tres file that is used by every test scene and change the background to custom color and just make it black. Instance performance boost.

I do think we should have one demo that isn't using the holodeck and does have a panoramic sky, so an outdoor scene just to show the option.

Triplanar mapping
Triplanar mapping is cool and incredibly useful especially for texturing differently sized geometry without needing to tweak things. I use it way too much but I've been thinking about undoing this in XR Tools as it sets a bad example.

The problem with triplanar is that it puts a rather complex UV conversion in the fragment shader. Not a big problem on desktops, but on mobile devices (Quest, Pico, HTC, etc) it disables something called pre-fetch. Basically if you can calculate the UV coordinates in the vertex shader, and just use them in a texture lookup without further modification in the fragment shader, you get a performance boost.

Seeing we're just dealing with a simple rectangle wall we have a few options:

• we can just use UV scale, but that could require creating several materials (annoying)
• we can use UV scale but make all the walls the same size, they just clip through eachother but you can create the same internal volume
• we can use a (visual) shader, possibly the way forward seeing some of the other points I'm about to mention

Distance Fade
Using distance fade to create the fade out effect at the bottom of the grid is very very costly especially on mobile devices. This turns the shader into a transparent shader (not bad in its own right), triggers copying the depth buffer so we can read from it and disables part of the subpass optimisation. This can be worth it but in this case there are better ways to fake the effect and make it look the same.

If transparency is important (I don't think so in this case), we could split the wall into two parts. An upper part that is completely opaque and has no effects applied, and a bottom part that has the fadeout from opaque at the top, to transparent at the bottom.

Seeing in our case we're not dealing with that we can make a fully opaque shader that simply fades from the texture color to a fixed color at the bottom. With a bit of math we could even approximate the fade out effect precisely assuming our ground is always on y = 0. I don't know how important this is for the visual effect.

Emission and glow
Using emission to create the effect that the holodeck is made up of lines that emit yellow light at face value makes sense. However emission can be faked unless you want to use GI (with the light actually lighting the environment) or glow (nice).

GI is out of the question for us.

Glow is turned on in the editor but off in our environment so we don't benefit from this. Again on mobile hardware glow has a disproportional performance impact, it requires copying the end result of our render, creating a number of blurred levels, and then compositing the blur over the original image in a post pass. This also ends up disabling a subpass optimisation.
Worth it if you have the GPU budget and a scene that makes good use of it, costly if you don't. The glow effect can be faked to some extent.

The other problem with the current setup of emission is that we're reading two textures. Again not really something to write home about on desktop, but every texture you read from on mobile costs so you want to minimize that.

In this particular case there isn't much point using the albedo texture. You could just make the albedo color black and purely rely on emission.

However we can also go the other way if you do the following steps:

1. remove the emission
2. make the material unshaded
3. change the color of the material to yellow (and yes, with the white albedo texture you now have control over the color of the holodeck, want it blue instead of yellow....)
4. edit the grid texture and apply a few blur levels to the texture itself, it's not as perfect as real glow but a bit of creativity can approximate it. I did it as follows in Krita:

• open grid.png
• cut out the black so your layer just has the white line, I rename this layer to "lines", make sure this stays your top layer
• create a new layer and make it completely black, this becomes your bottom layer
• turn on view->wrap around mode
• duplicate your "lines" layer, move it underneath lines, and rename it to blur1
• use filter->blur->gaussian blur with a radius of 15
• duplicate your "lines" layer, move it underneath lines, and rename it to blur2
• use filter->blur->gaussian blur with a radius of 5
• export as grid_blur.png

You can play around with different blur radiuses and adding more levels to create a stronger/weaker glow effect.
Again it's not going to be as perfect as real blur, but you can get it close to looking good with no performance impact.

Happy to create the shader for you that applies the above things.

[DigitalN8m4r3]

* we can use a (visual) shader, possibly the way forward seeing some of the other points I'm about to mention

Happy to create the shader for you that applies the above things.

yeah i think we might be better off goin your route with the shader, my trys ended up being not satisfying, after all it is supposed to be a non distracting clean look so yes if you could make this into a shader, would be great, thx for takin the time to review

[DigitalN8m4r3]

thx @BastiaanOlij devine intervention as he optimized the visuals with shaders, this should now consume less performance
from my pov, this is done (thanks to BastiaanOlij)

now onto the pickables/interactables - phase 2

[BastiaanOlij]

@Malcolmnixon would be good if you could have a look at this too and see if there is anything you'd like to tweak. I really enjoy the holodeck look. It's also nice that all the larger scenes still have a normal environment so we're displaying different options.

[pietru2004]

@DigitalN8m4r3 what license is for those pickables/interactables - phase 2? (Personally they got me intrested as I want to try making space game that has support for both XR and desktop)

[DigitalN8m4r3]

@DigitalN8m4r3 what license is for those pickables/interactables - phase 2? (Personally they got me intrested as I want to try making space game that has support for both XR and desktop)

for what its worth the 3d assets that am contributing to the xr tools are all licensed under public domain CC0
and some might be available on opengameart, since am usualy short on time i cant guarantee that am gonna upload em there but yeah, the models are goin to be freely to use for commercial purposes.
and if you want to stay at the bleeding edge of my wip you can take a look at the xr channel thread that i opend for this purose
https://discord.com/channels/212250894228652034/1103314781542285312

[Malcolmnixon]

It looks good to me - especially with the final tweaks for making the tables and the pointer-demo screen more visible.

[BastiaanOlij]

Thanks!