Totentanz (Selective Bloom)

Hi community!

Here is a pic:

And there is a working demo:

Based on the example with Selective Bloom.
The slight change comes with the idea that instead of swapping materials between current ones and total black, we use a global variable for a uniform that gets 0 or 1 in case of what state of scene we need: render with bloom when unnecessary object must be black (1) or render without darkening (0). That variable sets for all the materials via .onBeforeCompile(). Having that uniform we can create custom effects in materials for “bloom” state.

Just press that Tanze! button and enjoy. (:crossed_fingers: so the sound worked in both FF and Chrome :sweat_smile:)

PS Soundtrack: Chris Keya - Totentanz

24 Likes

Looks awesome, love the blood effect. Dance is a bit wonky, but totally in sync, looks great! :+1:

2 Likes

@Usnul Thanks! :beers:
I’ve made just the web, then I thought it would be cool to have a spider there. And it was made just from the scratch with referencing to the Wiki with one eye about how many legs spiders have :smile:
Since the beginning didn’t want to make complex animation (okay, I admit I don’t have mad skillz in it :blush: ), but wanted it synchronized with the music as good as possible (seems I achieved it :partying_face:)

2 Likes

Looking awesome! Nice job! I love the dance as well :man_dancing::dancer::crazy_face:

1 Like

WOW, interesting!

1 Like

:+1:very cool

1 Like

VEry impressive !!

1 Like

Death metal spider, nice! :metal:

The slight change comes with the idea that instead of swapping materials between current ones and total black, we use a global variable for a uniform that gets 0 or 1 in case of what state of scene we need

I was playing with something similar recently, but used the colorWrite property - set colorWrite = false for non bloomed materials in the bloom pass. Then there should be no need to modify materials.

1 Like

@looeee
Yeah! Good option.
Just a stupid question (I haven’t tested it, thus as you already tried it I ask you :blush:): for example, if I set colorWrite = false, does it mean that no matter what texture (.map) I used in a material, the material will become black? And as it’s material’s property, to set it , you need a loop through materials. Having a single global uniform, you don’t need additional loop through materials (I state it as an advantage, but maybe I’m wrong) :beers:

UPD Just tried colorWrite: false. Now I see how it works :slight_smile: Yeah, definitely an option if you don’t need any custom effects. :+1:

1 Like

does it mean that no matter what texture ( .map ) I used in a material, the material will become black?

As I understand it (been meaning to verify this actually), colorWrite = false just means that the material doesn’t write to the color buffer, but still writes to the other buffers. In particular, it writes to the depth buffer, which is needed here. So the object becomes invisible but still occludes other objects behind it.

Initially I tried with object.visible = false but then the bloom layer is always on top. However that does give a cool effect that could be useful for, say, selecting objects in a game, or viewing enemies through walls.

1 Like

Yup, had the same thought about how colorWrite works and exactly about what if to use object.visible = false and what effect it would have :slight_smile: :beers:

1 Like

Good to see appropriate music matched with computer graphics :smiley: Love the little death spider dancing to aggro-tech :heart_eyes:

1 Like

@pailhead Thanks! :beers:

About sound. I planned to use Soundcloud player widget, but I failed to make it work in Chrome. So after 1.5 days of struggling I gave up and made it with audio element :sweat_smile:

If someone has and could provide a working example of how to use that widget correctly in Chrome, I will be very appreciated. :innocent:

2 Likes

So after 1.5 days of struggling I gave up and made it with audio element :sweat_smile:

Ah, the life of a web developer. Nothing but rock and roll and endless parties, don’t let anyone ever tell you otherwise :joy:

3 Likes

Very true! :metal:

Amazing work!

@mrgoonie
Thanks :slight_smile: