Cloud Layer volume shader preset
Cloud Layer is the most direct preset for explaining volumetric accumulation. Each ray moves forward through a procedural 3D noise field, samples cloud density, and adds a small amount of brightness as density builds.
The preset keeps the loop short enough for the browser editor but preserves the shape of a real cloud renderer: a ray, a 3D field, density thresholding, step size, and a final accumulated result. It is a better proxy for shader-heavy browser GPU work than a 2D smoke effect.
Performance factors
3D noise
Each sample interpolates across a 3D lattice, so it costs more than 2D noise.
Loop count
The 64-step loop is the main quality and performance control.
Fill rate
Large bright cloud areas keep many pixels active, which can reveal mobile thermal limits.
Editable parameters
Step count
More steps smooth the cloud but lower FPS.
Density threshold
Lower thresholds make more cloud visible and increase accumulated brightness.
Noise drift speed
Faster drift changes visual motion without changing much GPU cost.
Best fit
- Learning real volumetric accumulation
- Testing shader-heavy browser workloads
- Comparing laptop power modes and mobile sustained performance
Shader preview
#version 300 es
precision highp float;
out vec4 outColor; in vec2 v_uv; uniform float u_time; uniform vec2 u_resolution;
float hash(vec3 p){ p = fract(p*0.3183099 + 0.1); p *= 17.0; return fract(p.x*p.y*p.z*(p.x+p.y+p.z)); }
float noise(vec3 x){ vec3 p=floor(x); vec3 f=fract(x); f=f*f*(3.0-2.0*f);
float n = mix(mix(mix(hash(p+vec3(0,0,0)), hash(p+vec3(1,0,0)), f.x),
mix(hash(p+vec3(0,1,0)), hash(p+vec3(1,1,0)), f.x), f.y),
mix(mix(hash(p+vec3(0,0,1)), hash(p+vec3(1,0,1)), f.x),
mix(hash(p+vec3(0,1,1)), hash(p+vec3(1,1,1)), f.x), f.y), f.z);
return n;
}
void main(){
vec2 uv=v_uv*2.0-1.0; uv.x*=u_resolution.x/u_resolution.y;
vec3 ro=vec3(0.0,0.0,-1.8); vec3 rd=normalize(vec3(uv,1.0));
float t=0.0, dens=0.0; vec3 col=vec3(0.0);
for(int i=0;i<64;i++){