fix sss, add examples

README.md

@@ -34,10 +34,15 @@ The javascript rendering library for [Khronos glTF 2.0 format](https://github.co
 • KHR_draco_mesh_compression
 
 • KHR_materials_dispersion
+<p><img src="./img/dispersion.webp" alt="KHR_materials_dispersion"></p>
 
 &bull; KHR_materials_anisotropy
+<p><img src="./img/anisotropy.webp" alt="KHR_materials_anisotropy"></p>
 
 &bull; KHR_materials_diffuse_transmission
+<p><img src="./img/translucency.webp" alt="KHR_materials_diffuse_transmission"></p>
+&bull; KHR_materials_diffuse_transmission + subsurface scatering
+<p><img src="./img/sss.webp" alt="sss"></p>
 
 &bull; KHR_lights_punctual
 <p><img src="./img/lights.webp" alt="KHR_lights_punctual"></p>
@@ -48,6 +53,7 @@ The javascript rendering library for [Khronos glTF 2.0 format](https://github.co
 &bull; KHR_materials_pbrSpecularGlossiness
 
 &bull; KHR_materials_sheen
+<p><img src="./img/sheen.webp" alt="KHR_materials_sheen"></p>
 
 &bull; KHR_materials_transmission
 <p><img src="./img/transmission.webp" alt="KHR_materials_transmission"></p>

index.html

@@ -34,7 +34,7 @@
             }
             document.write('<script src="./dist/redcube.webgpu.js"><\/script>');
         } else {
-            document.write('<script src="./redcube.js"><\/script>');
+            document.write('<script src="./dist/redcube.js"><\/script>');
         }
     </script>
 </head>

src/objects/material.ts

@@ -571,7 +571,7 @@ export class Material extends M {
             materialUniformBuffer.add('emissiveStrength', this.emissiveStrength ?? 1);
             materialUniformBuffer.add('anisotropy', [this.anisotropyStrength ?? 0, this.anisotropyRotation ?? 0]);
             materialUniformBuffer.add('iridescence', [this.iridescenceFactor, this.iridescenceIOR, this.iridescenceThicknessMaximum, this.iridescenceThicknessMinimum] ?? [0, 0, 0, 0]);
-            materialUniformBuffer.add('diffuseTransmissionFactor', [this.diffuseTransmissionFactor ?? 0, ...this.diffuseTransmissionColorFactor]);
+            materialUniformBuffer.add('diffuseTransmissionFactor', [this.diffuseTransmissionFactor ?? 1, ...this.diffuseTransmissionColorFactor]);
             materialUniformBuffer.add('dispersionFactor', [this.dispersion ?? 0]);
             materialUniformBuffer.done();
             this.materialUniformBuffer = materialUniformBuffer;

src/postprocessing.ts

@@ -32,6 +32,7 @@ export class PostProcessing {
     screenTexture: Texture;
     normalTexture: Texture;
     irradianceTexture: Texture;
+    specTexture: Texture;
     albedoTexture: Texture;
     depthTexture: Texture;
     preDepthTexture: Texture;
@@ -157,6 +158,7 @@ export class PostProcessing {
         gl.uniform1i(gl.getUniformLocation(this.program, 'normal'), this.normalTexture.index);
         gl.uniform1i(gl.getUniformLocation(this.program, 'depth'), this.depthTexture.index);
         gl.uniform1i(gl.getUniformLocation(this.program, 'preDepth'), this.preDepthTexture.index);
+        gl.uniform1i(gl.getUniformLocation(this.program, 'spec'), this.specTexture.index);
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
     }
@@ -256,15 +258,17 @@ export class PostProcessing {
         this.screenTexture = this.createDefaultTexture();
         this.normalTexture = this.createDefaultTexture();
         this.irradianceTexture = this.createDefaultTexture();
+        this.specTexture = this.createDefaultTexture();
         this.albedoTexture = this.createDefaultTexture();
         this.depthTexture = this.createDepthTexture();
 
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.screenTexture, 0);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT1, gl.TEXTURE_2D, this.normalTexture, 0);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT2, gl.TEXTURE_2D, this.irradianceTexture, 0);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT3, gl.TEXTURE_2D, this.albedoTexture, 0);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT4, gl.TEXTURE_2D, this.specTexture, 0);
         gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0);
-        gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2, gl.COLOR_ATTACHMENT3]);
+        gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2, gl.COLOR_ATTACHMENT3, gl.COLOR_ATTACHMENT4]);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
         this.preframebuffer = gl.createFramebuffer();

src/redcube.ts

@@ -165,7 +165,7 @@ class RedCube {
         if (hasTransmission) {
             this.PP.addPrepass('refraction');
         }
-        //this.PP.add('scattering');
+       //this.PP.add('scattering');
 
         if (this.PP.postprocessors.some(p => p instanceof PPLight)) {
             this.Particles.build();
@@ -190,7 +190,7 @@ class RedCube {
     renderScene(renderState) {
         this.renderState = renderState;
         this.renderer.renderScene();
-        this.renderState = {};
+        this.renderState = this.PP.hasPostPass ? { isprerefraction: true } : {};
     }
 
     redraw(type, coordsStart, coordsMove) {

src/shaders/composer.glsl

@@ -13,6 +13,7 @@ uniform sampler2D depth;
 uniform sampler2D preDepth;
 uniform sampler2D light;
 uniform sampler2D scattering;
+uniform sampler2D spec;
 
 const float gamma = 2.2;
 
@@ -29,6 +30,7 @@ void main() {
     #endif
     #ifdef SCATTERING
         c = texture(scattering, uv).rgb;
+        c += texture(spec, uv).rgb;
     #endif
 
     c.rgb = c.rgb / (c.rgb + vec3(1.0));

src/shaders/fragment.glsl

@@ -1,6 +1,10 @@
 #version 300 es
 precision highp float;
 
+// #ifdef DIFFUSE_TRANSMISSION
+//     #define SCATTERING 1
+// #endif
+
 in vec4 vColor;
 in vec2 outUV0;
 in vec2 outUV2;
@@ -17,6 +21,7 @@ layout (location = 0) out vec4 color;
 layout (location = 1) out vec3 normalColor;
 layout (location = 2) out vec4 irradianceColor;
 layout (location = 3) out vec4 albedoColor;
+layout (location = 4) out vec4 specColor;
 
 uniform Material {
     vec4 baseColorFactor;
@@ -730,7 +735,7 @@ void main() {
         thickness = thicknessTextureV * thickness;
     #endif
     #ifdef DIFFUSE_TRANSMISSION
-        thickness = 2.2;
+        thickness *= 2.2;
     #endif
     vec3 specularMap = vec3(0);
     #ifdef SPECULARGLOSSINESSMAP
@@ -963,17 +968,17 @@ void main() {
         emissive *= emissiveStrength.x;
 
         #ifdef TRANSMISSION
-        float kT = 1.0 - specEnv(n, viewDir, metallic, roughness, F0, specularWeight);
-        f_transmission = f_transmission * kT;
-        color = vec4((Lo) * clearcoatFresnel + ambientClearcoat, alpha);
-        #ifndef SCATTERING
-        color.rgb += (ambient * ao + f_transmission) * clearcoatFresnel;
-        #endif
+            float kT = 1.0 - specEnv(n, viewDir, metallic, roughness, F0, specularWeight);
+            f_transmission = f_transmission * kT;
+            color = vec4((Lo) * clearcoatFresnel + ambientClearcoat, alpha);
+            #ifndef SCATTERING
+            color.rgb += (ambient * ao + f_transmission) * clearcoatFresnel;
+            #endif
         #else
-        color = vec4(ao * ((emissive + Lo) * clearcoatFresnel + ambientClearcoat), alpha);
-        #ifndef SCATTERING
-        color.rgb += ambient * ao * clearcoatFresnel;
-        #endif
+            color = vec4(Lo, alpha);
+            #ifndef SCATTERING
+            color.rgb += ambient * ao * clearcoatFresnel;
+            #endif
         #endif
 
         color.rgb = f_sheen + color.rgb * albedoSheenScaling;
@@ -1011,6 +1016,9 @@ void main() {
 
     normalColor = n;
 
+    #ifdef SCATTERING
+    specColor = vec4(Lo + aSpecular, 1.0);
+
     vec3 irradiance = finalDiffuse;
     irradiance += ambient;
     irradiance += f_transmission;
@@ -1022,4 +1030,9 @@ void main() {
     #else
     albedoColor = vec4(sqrt(baseColor), 1.0);
     #endif
+    #else
+    irradianceColor = vec4(0.0);
+    albedoColor = vec4(0.0);
+    specColor = vec4(0.0);
+    #endif
 }

src/shaders/scattering.glsl

@@ -229,6 +229,6 @@ void main(void) {
         EvaluateSample(i, n, S, d, centerPosVS, mmPerUnit, pixelsPerMm, phase, totalIrradiance, totalWeight);
     }
     totalWeight = max(totalWeight, HALF_MIN);
-    //color = vec4(inputColor.rgb + albedo * max(totalIrradiance / totalWeight, vec3(0.0f)), 1.f);
-    color = vec4(inputColor.rgb, 1.f);
+    color = vec4(inputColor.rgb + albedo * max(totalIrradiance / totalWeight, vec3(0.0f)), 1.f);
+    //color = vec4(inputColor.rgb, 1.f);
 }