Sci-fi Scene that I made

Hey guys and gals :smiley:
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 :innocent:


https://peterstylinsky.com/projects/pyramid/

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 :slight_smile:

My code is still a little messy, but if anyone’s interested, here it is GitHub - DolphinIQ/Pyramid-Scene: Three.js sci-fi scene, based on the composition from https://youtu.be/-h6JLUctbYs video..

Thanks all for the incredible library and awesome community :hugs:
All feedback is appreciated :relaxed:

18 Likes

That looks nice!

1 Like

Very nice! :+1:

1 Like

Pretty, I like what you did with the spinning ring on the ground, neat trick. :ok_hand:

1 Like

That’s awesome ! I can’t believe the ground is just a plane :open_mouth:
What is the total weight in textures for this scene ?

1 Like

Thanks all for kind words :heart_eyes:

@Usnul I like how there is no motion blur, so any screenshot reveals, that its not even a ring, but a decagon :sweat_smile:

@felixmariotto Haha, yeah - 4 vertices, 2 faces :smiley: . 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 :smiley:
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 :rofl:)
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 :face_with_hand_over_mouth:

2 Likes

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 :sweat_smile:

Fluid

And a pyramid is here:

Fluid%20pyramid
On the pyramid, noise is based on the coordinates of vertices, not uvs.

8 Likes

super pretty

2 Likes

How did you bring all these objects into single scene?

All the objects in the scene are built in the code, except the soldier model which was imported with THREE.GLTFLoader

1 Like

Gotcha! Could you help me what does GUI does there?

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).

2 Likes