Hey guys and gals
After some time of learning Three.js, I wanted to give my 3D graphics skills a try at making something cool, so I put together this sci-fi scene, based on a composition from this awesome Youtube Video. I failed to make the voronoi animation going, but I still like the result, considering it is real time
The scene is composed out of 7 objects: the pyramid, human, glowy ring, floor, orange particles and 2 glow sprites for both light sources. With the unreal bloom pass it makes for 21 draw calls.
Noise textures were essentials for the effects. I wrote a custom emission shader for the pyramid, while the floor is a plane with a modified MeshStandardMaterial with “color-ramped” (blender node) noise values modifying it’s roughness and bump factors. Different effects can be tested by changing color ramps’ min and max points with controls’ “CR1” & “CR2” properties.
I left behind some values for fun and testing
@Usnul I like how there is no motion blur, so any screenshot reveals, that its not even a ring, but a decagon
@felixmariotto Haha, yeah - 4 vertices, 2 faces . I was thinking exactly the same thing when I first saw that video I linked. It really motivated me to dig deeper into Shaders and Noise effects
Overall texture size goes like this:
10 KB - particle sprite
386 KB - seamless perlin noise
31 KB - glow sprite (was too lazy to do soft particles so I just halved the image )
40 KB - voronoi noise
That gives total of 486 KB, which is a lot and can definitely be improved (probably a lot with basis compression), but this was just a fun project and I liked the look of the loading screen too much
That blue fluid-like effect on the pyramid in the video was so catchy that I wanted to try to re-create it.
It’s kind of similar, but not quite. But I think the idea of getting noise of noise is correct
And a pyramid is here:
On the pyramid, noise is based on the coordinates of vertices, not uvs.
Repeat X & Y are the noise texture.repeat properties, which scale the uvs in the shader.
"Water" Opacity is related to lines 17, 18 of shader chunk code. It affects how transparent the places with little roughness (aka “Water”) should be.
CRs 1&2 min&max are terminology from Blender - Color Ramps. If you watch the video posted, you will see Color Ramp nodes used in the Principled Shader materials (Three.js equivalent is MeshStandardMaterial) for cool effects. Probably best to check Blender docs/tutorials to see what exactly they do. You can Ctrl+F search "CR1min" etc for them in the shader codes I linked above to see how I implemented them.
Rest of the GUI are pretty standard things, like visibility, or UnrealBloomPass options (same as in three.js example).
)
