@xeokit/xeokit-sdk 2.6.87 → 2.6.88-renderers-refactor-v5

package/src/viewer/scene/model/layer/programs/ColorProgram.js

@@ -0,0 +1,35 @@
+export const ColorProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled, lightSetup, sao, primitive) {
+    const vColor = programVariables.createVarying("vec4", "vColor", () => {
+        const attributes = geometry.attributes;
+        const color = (primitive === "points") ? `vec4(${attributes.color}.rgb, 1.0)` : `${attributes.color}`;
+        if (lightSetup) {
+            const lightComponents = [
+                lightSetup.getAmbientColor()
+            ].concat(
+                lightSetup.directionalLights.map(
+                    light => `max(dot(${attributes.normal.view}, ${light.getDirection(geometry.viewMatrix, attributes.position.view)}), 0.0) * ${light.getColor()}`));
+            return `vec4(${lightComponents.join(" + ")}, 1) * ${color}`;
+        } else {
+            return color;
+        }
+    });
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: "Color",
+        getHash: () => [lightSetup ? lightSetup.getHash() : "-", sao ? "sao" : "nosao"],
+        cleanerEdges: true,
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => ((primitive !== "points") && (primitive !== "lines")) ? `${vFragDepth} + length(vec2(dFdx(${vFragDepth}), dFdy(${vFragDepth})))` : vFragDepth),
+        renderPassFlag: 0,  // COLOR_OPAQUE | COLOR_TRANSPARENT
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord, sliceColorOr) => {
+            if ((primitive === "points") || (primitive === "lines")) {
+                src.push(`${outColor} = ${vColor};`);
+            } else {
+                src.push(`vec4 fragColor = ${sliceColorOr(vColor)};`);
+                src.push(`${outColor} = ${(sao ? (`vec4(fragColor.rgb * ${sao.getAmbient(gl_FragCoord)}, fragColor.a)`) : "fragColor")};`);
+            }
+        },
+
+        filterIntensityRange: true,
+        incrementDrawState: true
+    };
+};

package/src/viewer/scene/model/layer/programs/ColorTextureProgram.js

@@ -0,0 +1,46 @@
+import {LinearEncoding, sRGBEncoding} from "../../../constants/constants.js";
+import {setupTexture} from "../../../webgl/WebGLRenderer.js";
+
+export const ColorTextureProgram = function(programVariables, geometry, scene, lightSetup, sao, useAlphaCutoff, gammaOutput) {
+    const colorTexture = setupTexture(programVariables, "sampler2D", "uColorMap", sRGBEncoding, (set, state) => {
+        const texture = state.layerTextureSet.colorTexture;
+        texture && set(texture.texture);
+    });
+    const materialAlphaCutoff = useAlphaCutoff && programVariables.createUniform("float", "materialAlphaCutoff", (set, state) => set(state.layerTextureSet.alphaCutoff));
+
+    const attributes = geometry.attributes;
+    const vViewPosition = programVariables.createVarying("vec3", "vViewPosition", () => `${attributes.position.view}.xyz`);
+    const vUV           = programVariables.createVarying("vec2", "vUV",           () => attributes.uv);
+    const vColor        = programVariables.createVarying("vec4", "vColor",        () => attributes.color);
+
+    const outColor = programVariables.createOutput("vec4", "outColor");
+
+    return {
+        programName: "ColorTexture",
+        getHash: () => [lightSetup.getHash(), sao ? "sao" : "nosao", !!gammaOutput, useAlphaCutoff ? "alphaCutoffYes" : "alphaCutoffNo"],
+        getLogDepth: scene.logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,      // COLOR_OPAQUE | COLOR_TRANSPARENT
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord, sliceColorOr) => {
+            src.push(`vec3 viewNormal = normalize(cross(dFdx(${vViewPosition}), dFdy(${vViewPosition})));`);
+            src.push("vec3 reflectedColor = vec3(0.0, 0.0, 0.0);");
+            lightSetup.directionalLights.forEach(light => {
+                src.push(`reflectedColor += max(dot(viewNormal, ${light.getDirection(geometry.viewMatrix, vViewPosition)}), 0.0) * ${light.getColor()};`);
+            });
+
+            src.push(`vec4 color = vec4(${lightSetup.getAmbientColor()} + reflectedColor, 1) * ${sliceColorOr(vColor)};`);
+
+            src.push(`vec4 sampleColor = ${colorTexture(vUV)};`);
+
+            if (materialAlphaCutoff) {
+                src.push(`if (sampleColor.a < ${materialAlphaCutoff}) { discard; }`);
+            }
+
+            src.push("vec4 colorTexel = color * sampleColor;");
+            src.push(`${outColor} = vec4(colorTexel.rgb${(sao ? (" * " + sao.getAmbient(gl_FragCoord)) : "")}, color.a);`);
+
+            getGammaOutputExpression && src.push(`${outColor} = ${getGammaOutputExpression(outColor)};`);
+        },
+
+        incrementDrawState: true
+    };
+};

package/src/viewer/scene/model/layer/programs/DepthProgram.js

@@ -0,0 +1,11 @@
+export const DepthProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled) {
+    const vHighPrecisionZW = programVariables.createVarying("highp vec2", "vHighPrecisionZW", () => `${geometry.attributes.position.clip}.zw`);
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: "Depth",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,  // COLOR_OPAQUE | COLOR_TRANSPARENT
+        // isn't it the same as vec4(vec3(1.0 - gl_FragCoord.z), 1.0) ?
+        appendFragmentOutputs: (src) => src.push(`${outColor} = vec4(vec3((1.0 - ${vHighPrecisionZW}[0] / ${vHighPrecisionZW}[1]) / 2.0), 1.0);`)
+    };
+};

package/src/viewer/scene/model/layer/programs/EdgesProgram.js

@@ -0,0 +1,12 @@
+export const EdgesProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled, colorUniform) {
+    const edgeColorUniform = colorUniform && programVariables.createUniform("vec4", "edgeColor", (set, state) => set(state.legacyFrameCtx.programColor));
+    const color = geometry.attributes.color;
+    const vColor = (!colorUniform) && programVariables.createVarying("vec4", "vColor", () => `vec4(${color}.rgb * 0.5, ${color}.a)`);
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: colorUniform ? "Edges" : "EdgesColor",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 2,  // EDGES_COLOR_OPAQUE | EDGES_COLOR_TRANSPARENT | EDGES_HIGHLIGHTED | EDGES_XRAYED | EDGES_SELECTED
+        appendFragmentOutputs: (src) => src.push(`${outColor} = ${edgeColorUniform || vColor};`)
+    };
+};

package/src/viewer/scene/model/layer/programs/FlatColorProgram.js

@@ -0,0 +1,24 @@
+export const FlatColorProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled, lightSetup, sao) {
+    const attributes = geometry.attributes;
+    const vViewPosition = programVariables.createVarying("vec3", "vViewPosition", () => `${attributes.position.view}.xyz`);
+    const vColor = programVariables.createVarying("vec4", "vColor", () => attributes.color);
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: "FlatColor",
+        getHash: () => [lightSetup.getHash(), sao ? "sao" : "nosao"],
+        cleanerEdges: true,
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,      // COLOR_OPAQUE | COLOR_TRANSPARENT
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord, sliceColorOr) => {
+            src.push(`vec3 viewNormal = normalize(cross(dFdx(${vViewPosition}), dFdy(${vViewPosition})));`);
+            const lightComponents = [
+                lightSetup.getAmbientColor()
+            ].concat(
+                lightSetup.directionalLights.map(
+                    light => `max(dot(viewNormal, ${light.getDirection(geometry.viewMatrix, vViewPosition)}), 0.0) * ${light.getColor()}`));
+
+            src.push(`vec4 fragColor = vec4(${lightComponents.join(" + ")}, 1) * ${sliceColorOr(vColor)};`);
+            src.push(`${outColor} = ${sao ? `vec4(fragColor.rgb * ${sao.getAmbient(gl_FragCoord)}, fragColor.a)` : "fragColor"};`);
+        }
+    };
+};

package/src/viewer/scene/model/layer/programs/OcclusionProgram.js

@@ -0,0 +1,12 @@
+export const OcclusionProgram = function(programVariables, logarithmicDepthBufferEnabled) {
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: "Occlusion",
+        // Logarithmic depth buffer involves an accuracy tradeoff, sacrificing
+        // accuracy at close range to improve accuracy at long range. This can
+        // mess up accuracy for occlusion tests, so we'll disable for now.
+        getLogDepth: false && logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,  // COLOR_OPAQUE // Only opaque objects can be occluders
+        appendFragmentOutputs: (src) => src.push(`${outColor} = vec4(0.0, 0.0, 1.0, 1.0);`) // Occluders are blue
+    };
+};

package/src/viewer/scene/model/layer/programs/PBRProgram.js

@@ -0,0 +1,180 @@
+import {LinearEncoding, sRGBEncoding} from "../../../constants/constants.js";
+import {setupTexture} from "../../../webgl/WebGLRenderer.js";
+
+export const PBRProgram = function(programVariables, geometry, scene, lightSetup, sao) {
+    const setup2dTexture = (name, isSrgb, getTexture) => {
+        return setupTexture(programVariables, "sampler2D", name, isSrgb ? sRGBEncoding : LinearEncoding, (set, state) => {
+            const texture = getTexture(state.layerTextureSet);
+            texture && set(texture.texture);
+        });
+    };
+
+    const attributes = geometry.attributes;
+    const getIrradiance = lightSetup.getIrradiance;
+
+    const colorMap         = setup2dTexture("uColorMap",         true,  textureSet => textureSet.colorTexture);
+    const metallicRoughMap = setup2dTexture("uMetallicRoughMap", false, textureSet => textureSet.metallicRoughnessTexture);
+    const emissiveMap      = setup2dTexture("uEmissiveMap",      true,  textureSet => textureSet.emissiveTexture);
+    const normalMap        = setup2dTexture("uNormalMap",        false, textureSet => textureSet.normalsTexture);
+    const aOMap            = setup2dTexture("uAOMap",            false, textureSet => textureSet.occlusionTexture);
+
+    const vViewPosition      = programVariables.createVarying("vec3", "vViewPosition",      () => `${attributes.position.view}.xyz`);
+    const vViewNormal        = programVariables.createVarying("vec3", "vViewNormal",        () => attributes.normal.view);
+    const vColor             = programVariables.createVarying("vec4", "vColor",             () => attributes.color);
+    const vUV                = programVariables.createVarying("vec2", "vUV",                () => attributes.uv);
+    const vMetallicRoughness = programVariables.createVarying("vec2", "vMetallicRoughness", () => attributes.metallicRoughness);
+    const vWorldNormal       = programVariables.createVarying("vec3", "vWorldNormal",       () => `${attributes.normal.world}.xyz`);
+
+    const outColor = programVariables.createOutput("vec4", "outColor");
+
+    const saturate = programVariables.createFragmentDefinition(
+        "saturate",
+        (name, src) => src.push(`float ${name}(const in float a) { return clamp(a, 0.0, 1.0); }`));
+
+    const BRDF_Specular_GGX = programVariables.createFragmentDefinition(
+        "BRDF_Specular_GGX",
+        (name, src) => {
+            src.push("vec3 F_Schlick(const in vec3 specularColor, const in float dotLH) {");
+            src.push("   float fresnel = exp2( ( -5.55473 * dotLH - 6.98316 ) * dotLH );");
+            src.push("   return ( 1.0 - specularColor ) * fresnel + specularColor;");
+            src.push("}");
+
+            src.push("float G_GGX_Smith(const in float alpha, const in float dotNL, const in float dotNV) {");
+            src.push("   float a2 = ( alpha * alpha );");
+            src.push("   float gl = dotNL + sqrt( a2 + ( 1.0 - a2 ) * ( dotNL * dotNL ) );");
+            src.push("   float gv = dotNV + sqrt( a2 + ( 1.0 - a2 ) * ( dotNV * dotNV ) );");
+            src.push("   return 1.0 / ( gl * gv );");
+            src.push("}");
+
+            src.push("float G_GGX_SmithCorrelated(const in float alpha, const in float dotNL, const in float dotNV) {");
+            src.push("   float a2 = ( alpha * alpha );");
+            src.push("   float gv = dotNL * sqrt( a2 + ( 1.0 - a2 ) * ( dotNV * dotNV ) );");
+            src.push("   float gl = dotNV * sqrt( a2 + ( 1.0 - a2 ) * ( dotNL * dotNL ) );");
+            src.push("   return 0.5 / max( gv + gl, 1e-6 );");
+            src.push("}");
+
+            src.push("float D_GGX(const in float alpha, const in float dotNH) {");
+            src.push("   float a2 = ( alpha * alpha );");
+            src.push("   float denom = ( dotNH * dotNH) * ( a2 - 1.0 ) + 1.0;");
+            src.push("   return 0.31830988618 * a2 / ( denom * denom);"); // 1/PI
+            src.push("}");
+
+            src.push(`vec3 ${name}(const in vec3 incidentLightDirection, const in vec3 viewNormal, const in vec3 viewEyeDir, const in vec3 specularColor, const in float roughness) {`);
+            src.push("   float alpha = ( roughness * roughness );");
+            src.push("   vec3 halfDir = normalize( incidentLightDirection + viewEyeDir );");
+            src.push(`   float dotNL = ${saturate}( dot( viewNormal, incidentLightDirection ) );`);
+            src.push(`   float dotNV = ${saturate}( dot( viewNormal, viewEyeDir ) );`);
+            src.push(`   float dotNH = ${saturate}( dot( viewNormal, halfDir ) );`);
+            src.push(`   float dotLH = ${saturate}( dot( incidentLightDirection, halfDir ) );`);
+            src.push("   vec3  F = F_Schlick( specularColor, dotLH );");
+            src.push("   float G = G_GGX_SmithCorrelated( alpha, dotNL, dotNV );");
+            src.push("   float D = D_GGX( alpha, dotNH );");
+            src.push("   return F * (G * D);");
+            src.push("}");
+        });
+
+    const BRDF_Specular_GGX_Environment = programVariables.createFragmentDefinition(
+        "BRDF_Specular_GGX_Environment",
+        (name, src) => {
+            src.push(`vec3 ${name}(const in vec3 viewNormal, const in vec3 viewEyeDir, const in vec3 specularColor, const in float roughness) {`);
+            src.push(`   float dotNV = ${saturate}(dot(viewNormal, viewEyeDir));`);
+            src.push("   const vec4 c0 = vec4( -1, -0.0275, -0.572,  0.022);");
+            src.push("   const vec4 c1 = vec4(  1,  0.0425,   1.04, -0.04);");
+            src.push("   vec4 r = roughness * c0 + c1;");
+            src.push("   float a004 = min(r.x * r.x, exp2(-9.28 * dotNV)) * r.x + r.y;");
+            src.push("   vec2 AB    = vec2(-1.04, 1.04) * a004 + r.zw;");
+            src.push("   return specularColor * AB.x + AB.y;");
+            src.push("}");
+        });
+
+    const perturbNormal2Arb = programVariables.createFragmentDefinition(
+        "perturbNormal2Arb",
+        (name, src) => {
+            src.push(`vec3 ${name}( vec3 eye_pos, vec3 surf_norm, vec2 uv, vec4 texel ) {`);
+            src.push("      if (texel.r == 0.0 && texel.g == 0.0 && texel.b == 0.0) {");
+            src.push("             return surf_norm;");
+            src.push("      }");
+            src.push("      vec3 q0 = vec3( dFdx( eye_pos.x ), dFdx( eye_pos.y ), dFdx( eye_pos.z ) );");
+            src.push("      vec3 q1 = vec3( dFdy( eye_pos.x ), dFdy( eye_pos.y ), dFdy( eye_pos.z ) );");
+            src.push("      vec2 st0 = dFdx( uv.st );");
+            src.push("      vec2 st1 = dFdy( uv.st );");
+            src.push("      vec3 S = normalize( q0 * st1.t - q1 * st0.t );");
+            src.push("      vec3 T = normalize( -q0 * st1.s + q1 * st0.s );");
+            src.push("      vec3 N = normalize( surf_norm );");
+            src.push("      vec3 mapN = texel.xyz * 2.0 - 1.0;");
+            src.push("      mat3 tsn = mat3( S, T, N );");
+            //     src.push("      mapN *= 3.0;");
+            src.push("      return normalize( tsn * mapN );");
+            src.push("}");
+        });
+
+    return {
+        programName: "PBR",
+        getHash: () => [lightSetup.getHash(), sao ? "sao" : "nosao", !!scene.gammaOutput],
+        getLogDepth: scene.logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,      // COLOR_OPAQUE | COLOR_TRANSPARENT
+        clippingCaps: scene._sectionPlanesState.clippingCaps && outColor,
+        incrementDrawState: true,
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord) => {
+            src.push("const float PI = 3.14159265359;");
+            src.push("vec3 reflDiff = vec3(0.0);");
+            src.push("vec3 reflSpec = vec3(0.0);");
+
+            src.push(`vec3 rgb = ${vColor}.rgb;`);
+            src.push(`float opacity = ${vColor}.a;`);
+
+            src.push("vec3  baseColor  = rgb;");
+            src.push("float specularF0 = 1.0;");
+            src.push(`float metallic   = float(${vMetallicRoughness}.r) / 255.0;`);
+            src.push(`float roughness  = float(${vMetallicRoughness}.g) / 255.0;`);
+            src.push("float dielectricSpecular = 0.16 * specularF0 * specularF0;");
+
+            src.push(`vec4 colorTexel = ${colorMap(vUV)};`);
+            src.push("baseColor *= colorTexel.rgb;");
+            // src.push("opacity *=/= colorTexel.a;"); // batching had "*=", instancing had "="
+
+            src.push(`vec3 metalRoughTexel = ${metallicRoughMap(vUV)}.rgb;`);
+            src.push("metallic *= metalRoughTexel.b;");
+            src.push("roughness *= metalRoughTexel.g;");
+
+            src.push("vec3 diffuseColor       = baseColor * (1.0 - dielectricSpecular) * (1.0 - metallic);");
+            src.push("float specularRoughness = clamp(roughness, 0.04, 1.0);");
+            src.push("vec3 specularColor      = mix(vec3(dielectricSpecular), baseColor, metallic);");
+
+            src.push(`vec3 viewNormal = -${perturbNormal2Arb}(${vViewPosition}, normalize(${vViewNormal}), ${vUV}, ${normalMap(vUV)});`);
+            src.push(`vec3 viewEyeDir = normalize(${vViewPosition});`);
+
+            getIrradiance && src.push(`reflDiff += ${getIrradiance(`normalize(${vWorldNormal})`)};`);
+
+            if (lightSetup.getReflection) {
+                const reflectVec = `reflect(viewEyeDir, viewNormal)`;
+                const viewReflectVec = `normalize((vec4(${reflectVec}, 0.0) * ${geometry.viewMatrix}).xyz)`;
+                const maxMIPLevel = "8.0";
+                const blinnExpFromRoughness = `(2.0 / pow(specularRoughness + 0.0001, 2.0) - 2.0)`;
+                const desiredMIPLevel = `${maxMIPLevel} - 0.79248 - 0.5 * log2(pow(${blinnExpFromRoughness}, 2.0) + 1.0)`;
+                const specularMIPLevel = `0.5 * clamp(${desiredMIPLevel}, 0.0, ${maxMIPLevel})`; // TODO: a random factor - fix this
+                const radiance = lightSetup.getReflection(viewReflectVec, specularMIPLevel);
+                const specularBRDFContrib = `${BRDF_Specular_GGX_Environment}(viewNormal, viewEyeDir, specularColor, specularRoughness)`;
+                src.push(`reflSpec += ${radiance} * ${specularBRDFContrib};`);
+            }
+
+            lightSetup.directionalLights.forEach((light, i) => {
+                src.push(`vec3 lightDirection${i} = -${light.getDirection(geometry.viewMatrix, vViewPosition)};`); // This "-" might be wrong, but it used to be like that
+                const dotNL = `${saturate}(dot(viewNormal, lightDirection${i}))`;
+                src.push(`vec3 irradiance${i} = ${dotNL} * ${light.getColor()};`);
+                src.push(`reflDiff += irradiance${i};`);
+                src.push(`reflSpec += irradiance${i} * PI * ${BRDF_Specular_GGX}(lightDirection${i}, viewNormal, viewEyeDir, specularColor, specularRoughness);`);
+            });
+
+            src.push(`vec3 emissiveColor = ${emissiveMap(vUV)}.rgb;`); // TODO: correct gamma function
+            src.push(`float aoFactor = ${aOMap(vUV)}.r;`);
+
+            const ambient = `${lightSetup.getAmbientColor()} * baseColor * opacity * rgb`;
+            src.push(`vec3 outgoingLight = emissiveColor + reflDiff * diffuseColor + reflSpec + ${ambient};`);
+
+            src.push(`${outColor} = vec4(outgoingLight * aoFactor${sao ? ` * ${sao.getAmbient(gl_FragCoord)}` : ""}, opacity);`);
+
+            getGammaOutputExpression && src.push(`${outColor} = ${getGammaOutputExpression(outColor)};`);
+        }
+    };
+};

package/src/viewer/scene/model/layer/programs/PickDepthProgram.js

@@ -0,0 +1,30 @@
+export const PickDepthProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled) {
+    const far  = programVariables.createUniform("float", "far",  (set, state) => set(state.legacyFrameCtx.viewParams.far));
+    const near = programVariables.createUniform("float", "near", (set, state) => set(state.legacyFrameCtx.viewParams.near));
+    const vViewPosition = programVariables.createVarying("vec3", "vViewPosition", () => `${geometry.attributes.position.view}.xyz`);
+    const outPackedDepth = programVariables.createOutput("vec4", "outPackedDepth");
+    const packDepth = programVariables.createFragmentDefinition(
+        "packDepth",
+        (name, src) => {
+            src.push(`vec4 ${name}(const in float depth) {`);
+            src.push("  const vec4 bitShift = vec4(256.0*256.0*256.0, 256.0*256.0, 256.0, 1.0);");
+            src.push("  const vec4 bitMask  = vec4(0.0, 1.0/256.0, 1.0/256.0, 1.0/256.0);");
+            src.push("  vec4 res = fract(depth * bitShift);");
+            src.push("  res -= res.xxyz * bitMask;");
+            src.push("  return res;");
+            src.push("}");
+        });
+
+    return {
+        programName: "PickDepth",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 3,  // PICK
+        incPointSizeBy10: true,
+        appendFragmentOutputs: (src) => {
+            src.push(`float zNormalizedDepth = abs((${near} + ${vViewPosition}.z) / (${far} - ${near}));`);
+            // isn't zNormalizedDepth the same as gl_FragDepth or gl_FragCoord.z?
+            src.push(`${outPackedDepth} = ${packDepth}(zNormalizedDepth);`); // Must be linear depth
+            // try: src.push("    outPackedDepth = vec4(zNormalizedDepth, fract(zNormalizedDepth * vec3(256.0, 256.0*256.0, 256.0*256.0*256.0)));");
+        }
+    };
+};

package/src/viewer/scene/model/layer/programs/PickMeshProgram.js

@@ -0,0 +1,12 @@
+export const PickMeshProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled) {
+    const vPickColor = programVariables.createVarying("vec4", "vPickColor", () => `${geometry.attributes.pickColor} / 255.0`);
+    const outPickColor = programVariables.createOutput("vec4", "outPickColor");
+    return {
+        programName: "PickMesh",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 3,  // PICK
+        incPointSizeBy10: true,
+        dontCullOnAlphaZero: true, // should be false?
+        appendFragmentOutputs: (src) => src.push(`${outPickColor} = ${vPickColor};`)
+    };
+};

package/src/viewer/scene/model/layer/programs/PickNormalsProgram.js

@@ -0,0 +1,18 @@
+import {math} from "../../../math/math.js";
+
+export const PickNormalsProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled, isFlat) {
+    const vWorldPosition = programVariables.createVarying("vec3", "vWorldPosition", () => `${geometry.attributes.position.world}.xyz`);
+    const vWorldNormal = programVariables.createVarying("vec3", "vWorldNormal", () => geometry.attributes.normal.world);
+    const outNormal = programVariables.createOutput("highp ivec4", "outNormal");
+    return {
+        programName: isFlat ? "PickNormalsFlat" : "PickNormals",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 3,  // PICK
+        appendFragmentOutputs: (src) => {
+            const worldNormal = (isFlat
+                                 ? `normalize(cross(dFdx(${vWorldPosition}), dFdy(${vWorldPosition})))`
+                                 : vWorldNormal);
+            src.push(`${outNormal} = ivec4(${worldNormal} * float(${math.MAX_INT}), 1.0);`);
+        }
+    };
+};

package/src/viewer/scene/model/layer/programs/ShadowProgram.js

@@ -0,0 +1,23 @@
+export const ShadowProgram = function(programVariables, logarithmicDepthBufferEnabled) {
+    // VBOBatchingPointsShadowRenderer has been implemented by 14e973df6268369b00baef60e468939e062ac320,
+    // but never used (and probably not maintained), as opposed to VBOInstancingPointsShadowRenderer in the same commit
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    const encodeFloat = programVariables.createFragmentDefinition(
+        "encodeFloat",
+        (name, src) => {
+            src.push(`vec4 ${name}(const in float v) {`);
+            src.push("  const vec4 bitShift = vec4(256 * 256 * 256, 256 * 256, 256, 1.0);");
+            src.push("  const vec4 bitMask = vec4(0, 1.0 / 256.0, 1.0 / 256.0, 1.0 / 256.0);");
+            src.push("  vec4 comp = fract(v * bitShift);");
+            src.push("  comp -= comp.xxyz * bitMask;");
+            src.push("  return comp;");
+            src.push("}");
+        });
+    return {
+        programName: "Shadow",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 0,
+        isShadowProgram: true,
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord) => src.push(`${outColor} = ${encodeFloat}(${gl_FragCoord}.z);`)
+    };
+};

package/src/viewer/scene/model/layer/programs/SilhouetteProgram.js

@@ -0,0 +1,15 @@
+export const SilhouetteProgram = function(programVariables, geometry, logarithmicDepthBufferEnabled, isPointsOrLines) {
+    const silhouetteColor = programVariables.createUniform("vec4", "silhouetteColor", (set, state) => set(state.legacyFrameCtx.programColor));
+    const vAlpha = programVariables.createVarying("float", "vAlpha", () => `${geometry.attributes.color}.a`);
+    const outColor = programVariables.createOutput("vec4", "outColor");
+    return {
+        programName: "Silhouette",
+        getLogDepth: logarithmicDepthBufferEnabled && (vFragDepth => vFragDepth),
+        renderPassFlag: 1,  // SILHOUETTE_HIGHLIGHTED | SILHOUETTE_SELECTED | SILHOUETTE_XRAYED
+        appendFragmentOutputs: (src, getGammaOutputExpression, gl_FragCoord, sliceColorOr) => {
+            src.push(`${outColor} = ${isPointsOrLines
+                                      ? silhouetteColor
+                                      : sliceColorOr(`vec4(${silhouetteColor}.rgb, min(${silhouetteColor}.a, ${vAlpha}))`)};`);
+        }
+    };
+};

package/src/viewer/scene/model/layer/programs/SnapProgram.js

@@ -0,0 +1,28 @@
+import {math} from "../../../math/math.js";
+
+export const SnapProgram = function(programVariables, geometry, isSnapInit, isPoints) {
+    const layerNumber      = programVariables.createUniform("int",  "layerNumber",      (set, state) => set(state.legacyFrameCtx.snapPickLayerParams.length));
+    const coordinateScaler = programVariables.createUniform("vec3", "coordinateScaler", (set, state) => set(state.legacyFrameCtx.snapPickCoordinateScale));
+
+    const vWorldPosition = programVariables.createVarying("vec3", "vWorldPosition", () => `${geometry.attributes.position.world}.xyz`);
+    const vPickColor = programVariables.createVarying("vec4", "vPickColor", () => geometry.attributes.pickColor, "flat");
+
+    const outCoords    = programVariables.createOutput("highp ivec4", "outCoords", 0);
+    const outNormal    = programVariables.createOutput("highp ivec4", "outNormal", 1);
+    const outPickColor = programVariables.createOutput("lowp uvec4", "outPickColor", 2);
+
+    return {
+        programName: isSnapInit ? "SnapInit" : "Snap",
+        // Improves occlusion accuracy at distance
+        getLogDepth: true && (vFragDepth => (isSnapInit ? `${vFragDepth} + length(vec2(dFdx(${vFragDepth}), dFdy(${vFragDepth})))` : vFragDepth)),
+        renderPassFlag: 3,  // PICK
+        dontCullOnAlphaZero: !isSnapInit,
+        appendFragmentOutputs: (src) => {
+            src.push(`${outCoords} = ivec4(${vWorldPosition} * ${coordinateScaler}.xyz, ${isSnapInit ? "-" : ""}${layerNumber});`);
+            if (isSnapInit) {
+                src.push(`${outNormal} = ${isPoints ? "ivec4(1.0)" : `ivec4(normalize(cross(dFdx(${vWorldPosition}), dFdy(${vWorldPosition}))) * float(${math.MAX_INT}), 1.0)`};`);
+                src.push(`${outPickColor} = uvec4(${vPickColor});`);
+            }
+        }
+    };
+};

package/src/viewer/scene/scene/Scene.js

@@ -619,6 +619,10 @@ class Scene extends Component {
             premultipliedAlpha: cfg.premultipliedAlpha
         });
 
+        const onContextLost = (event) => this.viewer.destroy();
+        canvas.addEventListener("webglcontextlost", onContextLost, false);
+        this._removeWebglcontextlostListener = () => canvas.removeEventListener("webglcontextlost", onContextLost, false);
+
         this.canvas.on("boundary", () => {
             this.glRedraw();
         });
@@ -1249,35 +1253,6 @@ class Scene extends Component {
         this._offsetObjectIds = null; // Lazy regenerate
     }
 
-    _webglContextLost() {
-        //  this.loading++;
-        this.canvas.spinner.processes++;
-        for (const id in this.components) {
-            if (this.components.hasOwnProperty(id)) {
-                const component = this.components[id];
-                if (component._webglContextLost) {
-                    component._webglContextLost();
-                }
-            }
-        }
-        this._renderer.webglContextLost();
-    }
-
-    _webglContextRestored() {
-        const gl = this.canvas.gl;
-        for (const id in this.components) {
-            if (this.components.hasOwnProperty(id)) {
-                const component = this.components[id];
-                if (component._webglContextRestored) {
-                    component._webglContextRestored(gl);
-                }
-            }
-        }
-        this._renderer.webglContextRestored(gl);
-        //this.loading--;
-        this.canvas.spinner.processes--;
-    }
-
     /**
      * Returns the capabilities of this Scene.
      *
@@ -1507,12 +1482,7 @@ class Scene extends Component {
 
         renderEvent.sceneId = this.id;
 
-        const passes = this._passes;
-        const clearEachPass = this._clearEachPass;
-        let pass;
-        let clear;
-
-        for (pass = 0; pass < passes; pass++) {
+        for (let pass = 0; pass < this._passes; pass++) {
 
             renderEvent.pass = pass;
 
@@ -1525,9 +1495,10 @@ class Scene extends Component {
              */
             this.fire("rendering", renderEvent, true);
 
-            clear = clearEachPass || (pass === 0);
-
-            this._renderer.render({pass: pass, clear: clear, force: forceRender});
+            if (forceRender) {
+                this._renderer.imageDirty();
+            }
+            this._renderer.render(pass, this._clearEachPass || (pass === 0));
 
             /**
              * Fired when we have just rendered a frame for a Scene.
@@ -2348,6 +2319,11 @@ class Scene extends Component {
      */
     pick(params, pickResult) {
 
+        if (! this.canvas) {
+            this.error("Picking not allowed on a destroyed Scene");
+            return null;
+        }
+
         if (this.canvas.boundary[2] === 0 || this.canvas.boundary[3] === 0) {
             this.error("Picking not allowed while canvas has zero width or height");
             return null;
@@ -2401,6 +2377,10 @@ class Scene extends Component {
      * @deprecated
      */
     snapPick(params) {
+        if (! this.canvas) {
+            this.error("Picking not allowed on a destroyed Scene");
+            return null;
+        }
         if (undefined === this._warnSnapPickDeprecated) {
             this._warnSnapPickDeprecated = true;
             this.warn("Scene.snapPick() is deprecated since v2.4.2 - use Scene.pick() instead")
@@ -2829,6 +2809,9 @@ class Scene extends Component {
 
         super.destroy();
 
+        this._removeWebglcontextlostListener();
+        // this.canvas.gl.getExtension("WEBGL_lose_context").loseContext(); // disabled because of XCD-306 and XEOK-295
+
         for (const id in this.components) {
             if (this.components.hasOwnProperty(id)) {
                 this.components[id].destroy();

package/src/viewer/scene/webgl/ArrayBuf.js

@@ -10,7 +10,6 @@ class ArrayBuf {
         this._gl = gl;
         this.type = type;
         this.allocated = false;
-        this.ConstructorType = data.constructor;
 
         switch (data.constructor) {
 
@@ -95,25 +94,6 @@ class ArrayBuf {
         }
     }
 
-    getData(baseIndex = 0, length = (this.numItems) - baseIndex) {
-        if (!this.allocated) {
-            return [];
-        }
-
-        const array = new (this.ConstructorType)(length * this.itemSize);
-
-        this._gl.bindBuffer(this.type, this._handle);
-        this._gl.getBufferSubData(
-            this.type,
-            baseIndex * this.itemByteSize * this.itemSize,
-            array,
-            0,
-            length * this.itemSize
-        );
-
-        return array;
-    }
-
     bind() {
         if (!this.allocated) {
             return;
@@ -128,6 +108,11 @@ class ArrayBuf {
         this._gl.bindBuffer(this.type, null);
     }
 
+    bindAtLocation(location) {
+        this.bind();
+        this._gl.vertexAttribPointer(location, this.itemSize, this.itemType, this.normalized, 0, 0);
+    }
+
     destroy() {
         if (!this.allocated) {
             return;