Hello everyone.
I’m desperately trying to calculate the depth of my fragment in a shader using raymarching to create a cloudy sky.
I tried many things, such as several formulas to calculate the gl_FragDepth, or even using a depthTexture of my scene.
The objective is to have a correct rendering of the depth of the clouds according to the scene, and therefore to normally manage the different postprocessing passes and above all to correctly manage the intersection of the clouds with other elements.
Thank you in advance for your help !
const vertexShader = /* glsl */ `
uniform vec3 cameraPos;
out vec3 vOrigin;
out vec3 vDirection;
out vec3 vWorldPosition;
#include <common>
#include <fog_pars_vertex>
// #include <shadowmap_pars_vertex>
void main() {
vec4 mvPosition = vec4( position, 1.0 );
vec4 mvSavePosition = instanceMatrix * mvPosition;
mvPosition = modelViewMatrix * mvSavePosition;
vOrigin = vec3( inverse( modelMatrix * instanceMatrix) * vec4( cameraPos, 1.0 ) ).xyz;
vDirection = position - vOrigin;
vec4 worldPosition = mvSavePosition;
worldPosition = modelMatrix * worldPosition;
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * mvPosition;
#include <fog_vertex>
}
`;
const fragmentShader = /* glsl */ `
precision highp float;
precision highp sampler3D;
precision highp float;
precision highp int;
#include <common>
#include <packing>
#include <fog_pars_fragment>
uniform mat4 modelViewMatrix;
uniform mat4 instanceMatrix;
uniform mat4 modelMatrix;
uniform mat4 projectionMatrix;
uniform mat4 cameraMatrixWorldInverse;
in vec3 vOrigin;
in vec3 vDirection;
in vec3 vWorldPosition;
uniform vec3 base;
uniform sampler2D blueNoise;
uniform sampler2D tDepth;
uniform sampler3D map;
uniform sampler3D hdMap;
uniform float radius;
uniform vec2 iResolution;
uniform vec3 center;
uniform float threshold;
uniform float detailsFactor;
uniform vec3 cameraPos;
uniform vec3 vScale;
uniform float range;
uniform float cameraNear;
uniform float cameraFar;
uniform float opacity;
uniform float steps;
uniform float frame;
uniform vec3 lightColor;
uniform vec3 lightPosition;
uniform vec3 lightDirection;
uniform float lightIntensity;
vec2 hitBox( vec3 orig, vec3 dir, vec3 size ) {
const vec3 box_min = vec3( -0.5 );
const vec3 box_max = vec3( 0.5 );
vec3 inv_dir = 1.0 / dir;
vec3 tmin_tmp = ( box_min - orig ) * inv_dir;
vec3 tmax_tmp = ( box_max - orig ) * inv_dir;
vec3 tmin = min( tmin_tmp, tmax_tmp );
vec3 tmax = max( tmin_tmp, tmax_tmp );
float t0 = max( tmin.x, max( tmin.y, tmin.z ) );
float t1 = min( tmax.x, min( tmax.y, tmax.z ) );
return vec2( t0, t1 );
}
float sample1( vec3 p ) {
// Ajustement des coordonnées de texture pour empêcher les nuages de toucher les bords de la texture
vec3 texCoord = mod(p + vec3(frame, 0.0, 0.0), 1.0);
float cloud = texture( map, texCoord + 0.5 ).r;
return cloud;
}
float sample2( vec3 p ) {
// Ajustement des coordonnées de texture pour empêcher les nuages de toucher les bords de la texture
vec3 texCoord = mod(p + vec3(frame * 2.0, 0.0, 0.0), 1.0);
float cloud = texture( hdMap, texCoord + 0.5 ).r;
return cloud;
}
float HenyeyGreenstein(float g, float mu) {
float gg = g * g;
return (1.0 / (4.0 * PI)) * (1.0 - gg) / pow(1.0 + gg - 2.0 * g * mu, 1.5);
}
const float DUAL_LOBE_WEIGHT = 0.8;
const vec3 EXTINCTION_MULT = vec3(0.7, 0.7, 1.0);
float DualHenyeyGreenstein(float g, float costh) {
return mix(HenyeyGreenstein(-g, costh), HenyeyGreenstein(g, costh), DUAL_LOBE_WEIGHT);
}
float PhaseFunction(float g, float costh) {
return DualHenyeyGreenstein(g, costh);
}
vec3 MultipleOctaveScattering(float density, float mu) {
float attenuation = 0.2;
float contribution = 0.2;
float phaseAttenuation = 0.5;
float a = 1.0;
float b = 1.0;
float c = 1.0;
float g = 0.85;
float scatteringOctaves = 4.0;
vec3 luminance = vec3(0.0);
for (float i = 0.0; i < scatteringOctaves; i++) {
float phaseFunction = PhaseFunction(0.35 * c, mu);
vec3 beers = exp(-density * EXTINCTION_MULT * a);
luminance += b * phaseFunction * beers;
a *= attenuation;
b *= contribution;
c *= (1.0 - phaseAttenuation);
}
return luminance;
}
float inverseLerp(float minValue, float maxValue, float v) {
return (v - minValue) / (maxValue - minValue);
}
float remap(float v, float inMin, float inMax, float outMin, float outMax) {
float t = inverseLerp(inMin, inMax, v);
return mix(outMin, outMax, t);
}
vec3 CalculateLightEnergy(vec3 rayPos, vec3 rayDirOrigin, float mu, float density, float timeInfluence) {
float stepLength = 1. / 12.0;
float lightRayDensity = 0.0;
float distAccumulated = 0.0;
for(float j = 0.0; j < 12.0; j++) {
vec3 lightSamplePos = rayPos + lightDirection * distAccumulated;
float cloudSDF = sample1(lightSamplePos);
float distToSample = distance(lightSamplePos, vOrigin);
float t_detailDropout = smoothstep(1000.0, 800., distToSample);
float detailStrength = t_detailDropout * (detailsFactor / 2.);
float detailSDF = sample2(lightSamplePos * 2.);
float cloud = remap(cloudSDF, detailStrength * detailSDF, 1.0, 0.0, 1.0);
float d = smoothstep(threshold - range, threshold + range, cloud) * opacity;
d = d * (timeInfluence + 0.5);
lightRayDensity += d * stepLength;
distAccumulated += stepLength;
}
vec3 beersLaw = MultipleOctaveScattering(lightRayDensity, mu);
vec3 powder = 1.0 - exp(-lightRayDensity * 2.0 * EXTINCTION_MULT);
return beersLaw * mix(powder * 2.0, vec3(1.0), remap(mu, -1.0, 1.0, 0.0, 1.0));
}
float blue_noise() {
ivec2 size = textureSize(blueNoise, 0);
vec2 interleaved_pos = (mod(floor(gl_FragCoord.xy), float(size.x))) + vec2(frame * 0.5, frame * 0.5);
vec2 tex_coord = interleaved_pos / float(size.x) + vec2(0.5f / float(size.x), 0.5f / float(size.x));
float result = texture(blueNoise, tex_coord).r * 2.0f - 1.0f;
return result;
}
float easeInOutCubic(float x) {
return x < 0.5 ? 4. * x * x * x : 1. - pow(-2. * x + 2., 3.) / 2.;
}
void main(){
#ifdef USE_FOG
float targetDensity = fogAtmosphereDensity * fogImpact;
float fogFactor = 1.0 - exp( -targetDensity * targetDensity * vFogDepth * vFogDepth );
float fogGlobalHeightFactor = 1.0 - ((vFogWorldPosition.y / fogMaxHeight) * exp(-cameraPosition.y * fogAtmosphereDensity));
fogFactor = saturate(mix(fogFactor * fogGlobalHeightFactor, fogFactor, fogFactor));
if (fogFactor >= 1.0) {
discard;
}
#endif
vec3 rayDir = normalize( vDirection );
vec2 bounds = hitBox( vOrigin, rayDir, vScale );
if ( bounds.x > bounds.y ) discard;
bounds.x = max( bounds.x, 0.0 );
float rng = blue_noise();
vec3 inc = 1.0 / abs( rayDir );
float delta = min( inc.x, min( inc.y, inc.z ) );
vec3 size = vec3( textureSize( map, 0 ) );
vec3 p = vOrigin + bounds.x * rayDir;
p += rayDir * rng * (1.0 / size);
// Get a random number that we'll use to jitter our ray.
float min_steps = (steps * 0.5f) + (rng * 2.0f);
// The number of ray march steps is determined depending on how steep the viewing angle is.
float num_steps = mix(steps, min_steps, abs(rayDir.y));
delta /= num_steps;
float timeInfluence = clamp(cos(frame * 0.5), 0.1, 1.0);
float a = 0.0;
vec3 scattering = vec3(0.0);
vec3 transmittanceResult = vec3(1.0);
vec3 ambientColor = lightColor * 0.1;
vec3 lightTargetColor = lightColor * lightIntensity;
float dist = 0.0;
for ( float t = bounds.x; t < bounds.y; t += delta ) {
// Influencer la position en fonction de la position dans le monde
vec3 samplePos = p;
float cloudSDF = sample1(samplePos);
float distToSample = distance(vOrigin, p);
float t_detailDropout = smoothstep(1000.0, 800., distToSample);
float detailStrength = t_detailDropout * detailsFactor;
float detailSDF = sample2(samplePos * 2.);
float cloud = remap(cloudSDF, detailStrength * detailSDF, 1.0, 0.0, 1.0);
// Appliquer les autres calculs comme auparavant
float d = smoothstep(threshold - range, threshold + range, cloud) * opacity;
d = d * (timeInfluence + 0.5);
float extinction = d;
if (extinction > 0.01) {
float mu = dot(-(p), lightDirection);
// Calculer la distance par rapport aux bords de la texture
a += (1.0 - a) * d;
vec3 luminance = ambientColor + lightTargetColor * CalculateLightEnergy( -(p), rayDir, mu, d * delta, timeInfluence );
vec3 transmittance = exp(-extinction * EXTINCTION_MULT);
vec3 integScatt = extinction * (luminance - luminance * transmittance) / extinction;
scattering += integScatt * transmittanceResult;
transmittanceResult *= transmittance;
if (length(transmittanceResult) <= 0.01) {
transmittanceResult = vec3(0.0);
break;
}
}
p += rayDir * delta;
dist += delta;
}
vec4 color = vec4(0.0);
color.rgb = transmittanceResult + scattering;
#ifdef USE_FOG
color *= skyExposure;
#endif
color.a = a;
gl_FragColor = color;
#include <fog_fragment>
#include <tonemapping_fragment>
#include <colorspace_fragment>
}
`;
const baseGeometry = new BoxGeometry(1, 1, 1);
const baseMaterial = new ShaderMaterial({
uniforms: UniformsUtils.merge([
ShaderLib.standard.uniforms,
{
blueNoise: { value: null },
base: { value: new Color(0xffffff) },
lightColor: { value: new Color(0x6b839f) },
lightPosition: { value: new Vector3(0, 1, 1) },
lightDirection: { value: new Vector3(0, 1, 1) },
lightIntensity: { value: 25 },
detailsFactor: { value: 0.85 },
vScale: { value: new Vector3() },
cameraMatrixWorldInverse: { value: new Matrix4() },
iResolution: { value: new Vector2() },
tDepth: { value: null },
center: { value: new Vector3() },
radius: { value: 50 },
cameraNear: { value: 0.1 },
cameraFar: { value: 10000 },
map: { value: null },
hdMap: { value: null },
cameraPos: { value: new Vector3() },
threshold: { value: 0.5 },
fogImpact: { value: 0.5 },
range: { value: 0.1 },
steps: { value: 32 },
frame: { value: 0 },
opacity: { value: 0.5 },
},
]),
vertexShader,
fragmentShader,
side: BackSide,
fog: true,
lights: true,
transparent: true,
// depthWrite: false,
// depthTest: false,
});
