Sacred Pearl [underwater warmness]

Hi community!

Picture:


Demo: https://codepen.io/prisoner849/full/qEqOoPB

This one started with the thought: “Once upon a time, I made an example with a fat line of uneven width, so why not make something more serious than that example”. And here we are: those “petals” of wire-like/twig-like structures, with white-ish tips, around the pearl are fat lines. :innocent:

23 Likes

Beautiful, artistic and so bangarangish.

And I like that the flowers on the walls are not flat.

2 Likes

I believe there are some people whose mental visualization and creativity exist on another level, and you are definitely among them. The way you transformed the idea into something this visually beautiful and artistic is genuinely impressive.

2 Likes

Truely excellent, which means: outstanding, and by far!

1 Like

These flowers remind me of the mosaic from this project…

2 Likes

@prisoner849 I can think of no one better suited to design a mini game world. I hope that one day you will!

1 Like

Oh, wow! So many nice comments. Thank you, guys :slight_smile: :heart:

And you posted the source code so other programmers can learn. Very nice.

1 Like

Oh, yes. That’s exactly the reason why I post the source code. It’s also kind of a rule I set for myself, and that I follow since I registered here :slight_smile:

5 Likes

Looks really impressive like some fiction scene from tinkerbell movie!

1 Like

I love this so much! Been trying to make it work on iPhone. Neither Chrome nor Safari are able to render the wall flowers. I am stumped as to why. Any guesses?

Here’s what I see on my iPhone

It looks the same on my iPhone.

One thing I discovered recently is that the iPhone seems to be doing a better job of displaying WebGPU programs than WebGL programs. For example, my WebGPU ocean modules now display on the iPhone, but not my WebGL module. Oddly, the WebGPU module that uses fragment shaders is faster than the one using compute shaders.

This conversion would take a bit of work because the shaders would have to be converted from glsl to wgsl. And I am not 100% sure if that would make it work with iPhone.

1 Like

@prisoner849 to make this work on iPhones, you’d have to replace LinearFilter with NearestFilter in 3 places:

curveTexture.minFilter = curveTexture.magFilter = THREE.NearestFilter;
instead of
curveTexture.minFilter = curveTexture.magFilter = THREE.LinearFilter;

baseCurveTexture.minFilter = baseCurveTexture.magFilter = THREE.NearestFilter;
instead of
baseCurveTexture.minFilter = baseCurveTexture.magFilter = THREE.LinearFilter;

dataTexture.minFilter = dataTexture.magFilter = THREE.NearestFilter;
instead of
dataTexture.minFilter = dataTexture.magFilter = THREE.LinearFilter;

I took the liberty of cloning your code with the fix applied – for easy quick validation.

Conclusion: Just a matter of unreliable iOS support for linear filtering on floating-point textures… would be my guess. The rendering logic was / is just fine.

@phil_crowther FYI

1 Like

This is why I use codepen :slight_smile: Easy to fix/validate and share.

With this, you gave me the idea to use HalfFloatType (Uint16Array) textures instead of FloatType (Float32Array) with LinearFilter.
Thus, I changed all the DataTextures in the demo to HalfFloatType. It works perfectly fine on PC and Android (checked on my tablet and handy). But I don’t have iPhone, so I would like to ask you (or anyone else, who has one) to check, if the demo works on it with half-float textures.

1 Like

Bravo! It works on iPhone :+1::clap:

1 Like

Pheww :folded_hands: Thanks for testing :slight_smile: :handshake: