Approach to project a shader of a plane geometry to a box geometry

Hello THREE community!

This is my first post, so I hope this question is a valid one.

My end goal is to have a volumetric cloud shader (preferably raymarched with perlin noise animation) in a box geometry that I can rotate from the outside and also “fly through”.

This here is a beautiful port of a shadertoy into threejs. However, it only works on a 2d plane - when you rotate it, it is flat.

When I simply change the PlaneGeometry to a BoxGeometry it looks like separated animated textures for all side surfaces. So basically PlaneGeometry on all sides.

How do I approach this, to create an actual 3d looking cloud mesh?

Related discussion is here

Here is an approach: three.js examples

Thanks, I know about this one - unfortunately WebGL2 is no option for this project.

Since you reference my discussion, I wanted to share what I learned.

My approach was a bit different in that I searched for a shader that would rotate. The classic example is the 2013 example by Inigo Quilez. My plan was to create a plane that would always be in front of your face (i.e. the camera). Then as you rotated the camera to look around, the program would feed the correct rotations to the shader so that it would look correct. This screen would be in the background like a skycube.

I was able to get the shader to project on the screen and to get the screen to moving properly. I had not figured out how to input the rotations to the shader. However, the problem that killed the project was that viewers were getting extremely slow speeds (4 fps) - even though the ShaderToy example was one of the fastest.

I hope that you have better luck.

However, I am wondering if projecting on a cube will create even more challenges. I am no expert, but I think that doing so will require 6 separate cameras. Also will a cube give the kind of seamless projection that you are looking for? In a skycube, the flat images are slightly distorted at the edges so that the corners are not visible. If my understanding of what you are trying to do is correct, you will also need to find a way to distort the moving images.

What kind of cloud background are you aiming for? One where you are flying inside of constant loose clouds - extremely rare in real life? Or something more commonplace such as an overcast or undercast or random fluffy clouds?

Hi Phil, thanks for your reply!

My end goal is to have a cloud shader applied to a BoxGeometry that I apply to a Mapbox map (similiar to this) and stencil out the negative space using real cloud satellite data (multiplying the alpha) - to achieve a live weather 3d cloud effect.

If you were just going to add a cloud layer to that, all you might need is a flat transparent layer. But I expect that you need the projections because you also want to look up and around? And that you want to use the real world data, but also want something that looks like clouds?

If you are not trying to “fly” through the clouds, frame rate may not be a big issue as it was for me. One possible issue with all these shaders is that they tend to display only one “type” of cloud. But if you want to show a simulation of actual clouds, you will want to distinguish between flat cloud layers, fluffy cumulus, towering cumulus, and stratus clouds.

1 Like