Is it possible to use 'Custom buffers' on instances to control instance transparency (alpha channel)?

Recently, an awesome feature has been introduced - Custom Instance Buffers - Use Instances - Babylon.js Documentation.

I’ve successfully tested it with manipulating ‘color’ attribute. It looks like this attribute colour is being an additive colour to the main vertex colour, that’s why it’s alpha value has no effect on resulting instance transparency.

Now I’m wondering is it possible to use custom buffers to control instance transparency?

I have a weak knowledge of shaders and don’t know at what level material alpha property is being applied. Is it being sent as an attribute to vertex shader?

have set this to true ? https://doc.babylonjs.com/api/classes/babylon.instancedmesh#hasvertexalpha

1 Like

Hi @jerome! Thank you for your quick response.

The hasVertexAlpha property has resolved the original issue I have described here.

But enabling it causes another problem with instances - their layering behaviour changes.

It is expected that instance which is closest to the camera should be rendered above all other instances, but what happens after hasVertexAlpha has been set to true is that instance created last is being rendered above all other instances regardless their distance to the camera.

Here’s a GIF of what I’ve just described.
layering-issue

Here’s a playground where I tried to demonstrate this - Babylon.js Playground

Well, this is a known issue.
Maybe is it possible to sort the instance array and the instance buffer each frame according to the distance from the camera

maybe something like this (unfinished) : https://www.babylonjs-playground.com/#W1JS3R#1

That doesn’t seem to help.

I’ve just read this doc: Transparency and How Meshes Are Rendered - Babylon.js Documentation

And looks like mesh.material.needDepthPrePass = true fixes the depth sorting issue: https://www.babylonjs-playground.com/#W1JS3R#2

Not sure what possible performance impact of using that option though.

2 Likes

When alphamode = opaque, hasvertexealpha = true does not work;