Fallback to int-texture based morphing instead of attribute when floa…

…t texture rendering is not supported (#6771)

* Fallback to int-texture based morphing instead of attribute when float texture rendering is not supported

* lint

* added spaces

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

examples/src/examples/graphics/mesh-morph-many.example.mjs

@@ -93,12 +93,6 @@ assetListLoader.load(() => {
         for (let i = 0; i < targetsCount; i++) {
             morphInstance.setWeight(i, Math.abs(Math.sin(time + i * 0.4)));
         }
-
-        // debug display the morph target textures blended together
-        if (morphInstance.texturePositions) {
-            // @ts-ignore
-            app.drawTexture(-0.7, -0.7, 0.4, 0.4, morphInstance.texturePositions);
-        }
     });
 });
 

examples/src/examples/graphics/mesh-morph.example.mjs

@@ -196,17 +196,6 @@ app.on('update', function (dt) {
     // orbit camera around
     camera.setLocalPosition(16 * Math.sin(time * 0.2), 4, 16 * Math.cos(time * 0.2));
     camera.lookAt(pc.Vec3.ZERO);
-
-    // debug display the morph target textures blended together
-    if (morphInstances[0].texturePositions) {
-        // @ts-ignore
-        app.drawTexture(-0.7, -0.7, 0.4, 0.4, morphInstances[0].texturePositions);
-    }
-
-    if (morphInstances[0].textureNormals) {
-        // @ts-ignore
-        app.drawTexture(0.7, -0.7, 0.4, 0.4, morphInstances[0].textureNormals);
-    }
 });
 
 export { app };

src/framework/parsers/glb-parser.js

@@ -797,15 +797,13 @@ const createMesh = (device, gltfMesh, accessors, bufferViews, vertexBufferDict,
                     if (target.hasOwnProperty('POSITION')) {
                         accessor = accessors[target.POSITION];
                         options.deltaPositions = getAccessorDataFloat32(accessor, bufferViews);
-                        options.deltaPositionsType = TYPE_FLOAT32;
                         options.aabb = getAccessorBoundingBox(accessor);
                     }
 
                     if (target.hasOwnProperty('NORMAL')) {
                         accessor = accessors[target.NORMAL];
                         // NOTE: the morph targets can't currently accept quantized normals
                         options.deltaNormals = getAccessorDataFloat32(accessor, bufferViews);
-                        options.deltaNormalsType = TYPE_FLOAT32;
                     }
 
                     // name if specified

src/platform/graphics/bind-group-format.js

@@ -5,6 +5,7 @@ import {
     TEXTUREDIMENSION_2D, TEXTUREDIMENSION_CUBE, TEXTUREDIMENSION_3D, TEXTUREDIMENSION_2D_ARRAY,
     SAMPLETYPE_FLOAT, PIXELFORMAT_RGBA8, SAMPLETYPE_INT, SAMPLETYPE_UINT, SHADERSTAGE_COMPUTE, SHADERSTAGE_VERTEX
 } from './constants.js';
+import { DebugGraphics } from './debug-graphics.js';
 
 let id = 0;
 
@@ -306,7 +307,7 @@ class BindGroupFormat {
 
         this.impl = graphicsDevice.createBindGroupFormatImpl(this);
 
-        Debug.trace(TRACEID_BINDGROUPFORMAT_ALLOC, `Alloc: Id ${this.id}`, this);
+        Debug.trace(TRACEID_BINDGROUPFORMAT_ALLOC, `Alloc: Id ${this.id}, while rendering [${DebugGraphics.toString()}]`, this);
     }
 
     /**

src/platform/graphics/constants.js

@@ -1358,9 +1358,6 @@ export const SEMANTIC_TEXCOORD6 = "TEXCOORD6";
  */
 export const SEMANTIC_TEXCOORD7 = "TEXCOORD7";
 
-// private semantic used for programmatic construction of individual attr semantics
-export const SEMANTIC_ATTR = "ATTR";
-
 /**
  * Vertex attribute with a user defined semantic.
  *

src/platform/graphics/null/null-graphics-device.js

@@ -40,7 +40,6 @@ class NullGraphicsDevice extends GraphicsDevice {
         this.maxPixelRatio = 1;
         this.maxAnisotropy = 16;
         this.supportsUniformBuffers = false;
-        this.supportsMorphTargetTexturesCore = true;
         this.supportsAreaLights = true;
         this.supportsGpuParticles = false;
         this.textureFloatRenderable = true;

src/platform/graphics/shader-utils.js

@@ -104,6 +104,7 @@ class ShaderUtils {
         const vertCode = ShaderUtils.versionCode(device) +
             getDefines(webgpuVS, gles3VS, true, options) +
             ShaderUtils.getDefinesCode(options.vertexDefines) +
+            ShaderUtils.precisionCode(device) + '\n' +
             sharedFS +
             ShaderUtils.getShaderNameCode(name) +
             options.vertexCode;
@@ -175,11 +176,13 @@ class ShaderUtils {
 
         const precision = forcePrecision ? forcePrecision : device.precision;
 
-        let code = `precision ${precision} float;\nprecision ${precision} int;\n`;
-
-        if (device.isWebGL2) {
-            code += `precision ${precision} sampler2DShadow;\n`;
-        }
+        const code = `
+            precision ${precision} float;
+            precision ${precision} int;
+            precision ${precision} usampler2D;
+            precision ${precision} isampler2D;
+            precision ${precision} sampler2DShadow;
+        `;
 
         return code;
     }

src/platform/graphics/webgl/webgl-graphics-device.js

@@ -720,8 +720,6 @@ class WebglGraphicsDevice extends GraphicsDevice {
         // render to half float buffers support - either of these two extensions
         this.extColorBufferHalfFloat = this.extColorBufferHalfFloat || !!this.extColorBufferFloat;
 
-        this.supportsMorphTargetTexturesCore = (this.maxPrecision === "highp" && this.maxVertexTextures >= 2);
-
         this._textureFloatHighPrecision = undefined;
 
         this.postInit();

src/platform/graphics/webgpu/webgpu-graphics-device.js

@@ -150,7 +150,6 @@ class WebgpuGraphicsDevice extends GraphicsDevice {
         this.fragmentUniformsCount = limits.maxUniformBufferBindingSize / 16;
         this.vertexUniformsCount = limits.maxUniformBufferBindingSize / 16;
         this.supportsUniformBuffers = true;
-        this.supportsMorphTargetTexturesCore = true;
         this.supportsAreaLights = true;
         this.supportsGpuParticles = true;
         this.supportsCompute = true;

src/scene/constants.js

@@ -654,8 +654,8 @@ export const SHADERDEF_SCREENSPACE = 256;
 export const SHADERDEF_TANGENTS = 512;
 export const SHADERDEF_MORPH_POSITION = 1024;
 export const SHADERDEF_MORPH_NORMAL = 2048;
-export const SHADERDEF_MORPH_TEXTURE_BASED = 4096;
-export const SHADERDEF_LMAMBIENT = 8192; // lightmaps contain ambient
+export const SHADERDEF_LMAMBIENT = 4096; // lightmaps contain ambient
+export const SHADERDEF_MORPH_TEXTURE_BASED_INT = 8192;
 
 /**
  * The shadow map is not to be updated.

src/scene/materials/basic-material.js

@@ -3,7 +3,8 @@ import { Color } from '../../core/math/color.js';
 import { ShaderProcessorOptions } from '../../platform/graphics/shader-processor-options.js';
 
 import {
-    SHADERDEF_INSTANCING, SHADERDEF_MORPH_NORMAL, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_TEXTURE_BASED,
+    SHADERDEF_INSTANCING, SHADERDEF_MORPH_NORMAL, SHADERDEF_MORPH_POSITION,
+    SHADERDEF_MORPH_TEXTURE_BASED_INT,
     SHADERDEF_SCREENSPACE, SHADERDEF_SKIN
 } from '../constants.js';
 import { getProgramLibrary } from '../shader-lib/get-program-library.js';
@@ -92,7 +93,7 @@ class BasicMaterial extends Material {
             useInstancing: objDefs && (objDefs & SHADERDEF_INSTANCING) !== 0,
             useMorphPosition: objDefs && (objDefs & SHADERDEF_MORPH_POSITION) !== 0,
             useMorphNormal: objDefs && (objDefs & SHADERDEF_MORPH_NORMAL) !== 0,
-            useMorphTextureBased: objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED) !== 0,
+            useMorphTextureBasedInt: objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED_INT) !== 0,
 
             alphaTest: this.alphaTest > 0,
             vertexColors: this.vertexColors,

src/scene/materials/lit-material-options-builder.js

@@ -1,8 +1,9 @@
 import {
     CUBEPROJ_NONE, LIGHTTYPE_DIRECTIONAL, LIGHTTYPE_OMNI, LIGHTTYPE_SPOT,
     MASK_AFFECT_DYNAMIC, TONEMAP_NONE, SHADERDEF_INSTANCING, SHADERDEF_MORPH_NORMAL,
-    SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_TEXTURE_BASED, SHADERDEF_SCREENSPACE, SHADERDEF_SKIN,
-    SHADERDEF_NOSHADOW, SHADERDEF_TANGENTS, SPRITE_RENDERMODE_SIMPLE
+    SHADERDEF_MORPH_POSITION, SHADERDEF_SCREENSPACE, SHADERDEF_SKIN,
+    SHADERDEF_NOSHADOW, SHADERDEF_TANGENTS, SPRITE_RENDERMODE_SIMPLE,
+    SHADERDEF_MORPH_TEXTURE_BASED_INT
 } from "../constants.js";
 
 class LitMaterialOptionsBuilder {
@@ -24,7 +25,7 @@ class LitMaterialOptionsBuilder {
         litOptions.useInstancing = objDefs && (objDefs & SHADERDEF_INSTANCING) !== 0;
         litOptions.useMorphPosition = objDefs && (objDefs & SHADERDEF_MORPH_POSITION) !== 0;
         litOptions.useMorphNormal = objDefs && (objDefs & SHADERDEF_MORPH_NORMAL) !== 0;
-        litOptions.useMorphTextureBased = objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED) !== 0;
+        litOptions.useMorphTextureBasedInt = objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED_INT) !== 0;
         litOptions.hasTangents = objDefs && ((objDefs & SHADERDEF_TANGENTS) !== 0);
 
         litOptions.nineSlicedMode = material.nineSlicedMode || SPRITE_RENDERMODE_SIMPLE;

src/scene/materials/standard-material-options-builder.js

@@ -7,10 +7,11 @@ import {
     LIGHTTYPE_DIRECTIONAL, LIGHTTYPE_OMNI, LIGHTTYPE_SPOT,
     MASK_AFFECT_DYNAMIC,
     SHADER_PREPASS_VELOCITY,
-    SHADERDEF_DIRLM, SHADERDEF_INSTANCING, SHADERDEF_LM, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_NORMAL, SHADERDEF_NOSHADOW, SHADERDEF_MORPH_TEXTURE_BASED,
+    SHADERDEF_DIRLM, SHADERDEF_INSTANCING, SHADERDEF_LM, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_NORMAL, SHADERDEF_NOSHADOW,
     SHADERDEF_SCREENSPACE, SHADERDEF_SKIN, SHADERDEF_TANGENTS, SHADERDEF_UV0, SHADERDEF_UV1, SHADERDEF_VCOLOR, SHADERDEF_LMAMBIENT,
     TONEMAP_NONE,
-    DITHER_NONE
+    DITHER_NONE,
+    SHADERDEF_MORPH_TEXTURE_BASED_INT
 } from '../constants.js';
 import { _matTex2D } from '../shader-lib/programs/standard.js';
 import { LitMaterialOptionsBuilder } from './lit-material-options-builder.js';
@@ -74,7 +75,7 @@ class StandardMaterialOptionsBuilder {
         options.litOptions.useInstancing = objDefs && (objDefs & SHADERDEF_INSTANCING) !== 0;
         options.litOptions.useMorphPosition = objDefs && (objDefs & SHADERDEF_MORPH_POSITION) !== 0;
         options.litOptions.useMorphNormal = objDefs && (objDefs & SHADERDEF_MORPH_NORMAL) !== 0;
-        options.litOptions.useMorphTextureBased = objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED) !== 0;
+        options.litOptions.useMorphTextureBasedInt = objDefs && (objDefs & SHADERDEF_MORPH_TEXTURE_BASED_INT) !== 0;
 
         options.litOptions.nineSlicedMode = stdMat.nineSlicedMode || 0;
 

src/scene/mesh-instance.js

@@ -12,9 +12,10 @@ import {
     MASK_AFFECT_DYNAMIC, MASK_BAKE, MASK_AFFECT_LIGHTMAPPED,
     RENDERSTYLE_SOLID,
     SHADERDEF_UV0, SHADERDEF_UV1, SHADERDEF_VCOLOR, SHADERDEF_TANGENTS, SHADERDEF_NOSHADOW, SHADERDEF_SKIN,
-    SHADERDEF_SCREENSPACE, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_NORMAL, SHADERDEF_MORPH_TEXTURE_BASED,
+    SHADERDEF_SCREENSPACE, SHADERDEF_MORPH_POSITION, SHADERDEF_MORPH_NORMAL,
     SHADERDEF_LM, SHADERDEF_DIRLM, SHADERDEF_LMAMBIENT, SHADERDEF_INSTANCING,
-    SORTKEY_FORWARD
+    SORTKEY_FORWARD,
+    SHADERDEF_MORPH_TEXTURE_BASED_INT
 } from './constants.js';
 
 import { GraphNode } from './graph-node.js';
@@ -768,9 +769,9 @@ class MeshInstance {
         this._morphInstance = val;
 
         let shaderDefs = this._shaderDefs;
-        shaderDefs = (val && val.morph.useTextureMorph) ? (shaderDefs | SHADERDEF_MORPH_TEXTURE_BASED) : (shaderDefs & ~SHADERDEF_MORPH_TEXTURE_BASED);
         shaderDefs = (val && val.morph.morphPositions) ? (shaderDefs | SHADERDEF_MORPH_POSITION) : (shaderDefs & ~SHADERDEF_MORPH_POSITION);
         shaderDefs = (val && val.morph.morphNormals) ? (shaderDefs | SHADERDEF_MORPH_NORMAL) : (shaderDefs & ~SHADERDEF_MORPH_NORMAL);
+        shaderDefs = (val && val.morph.intRenderFormat) ? (shaderDefs | SHADERDEF_MORPH_TEXTURE_BASED_INT) : (shaderDefs & ~SHADERDEF_MORPH_TEXTURE_BASED_INT);
         this._updateShaderDefs(shaderDefs);
     }