THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

[chenjianan0823]

    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
        "@sparkjsdev/spark": "https://cdn.jsdelivr.net/npm/@sparkjsdev/spark@2.0.0/dist/spark.module.min.js"
      }
    }

I use Chrome browsers, and select the NVIDIA preferred graphics processor for them, but then I get the following error:

Material Name: 
Material Type: RawShaderMaterial

Program Info Log: Fragment shader is not compiled.


FRAGMENT

WARNING: 0:35: '/' : Divide by zero during constant folding
ERROR: 0:221: 'packed' : Illegal use of reserved word
ERROR: 0:221: 'packed' : syntax error

  216: 
  217: uvec4 packSplat(vec3 center, vec3 scales, vec4 quaternion, vec4 rgba) {
  218:     return packSplatEncoding(center, scales, quaternion, rgba, vec4(0.0, 1.0, LN_SCALE_MIN, LN_SCALE_MAX));
  219: }
  220: 
> 221: void unpackSplatEncoding(uvec4 packed, out vec3 center, out vec3 scales, out vec4 quaternion, out vec4 rgba, vec4 rgbMinMaxLnScaleMinMax) {
  222:     uint word0 = packed.x, word1 = packed.y, word2 = packed.z, word3 = packed.w;
  223: 
  224:     uvec4 uRgba = uvec4(word0 & 0xffu, (word0 >> 8u) & 0xffu, (word0 >> 16u) & 0xffu, (word0 >> 24u) & 0xffu);
  225:     float rgbMin = rgbMinMaxLnScaleMinMax.x;
  226:     float rgbMax = rgbMinMaxLnScaleMinMax.y;
  227:     rgba = (vec4(uRgba) / 255.0);

In addition, I tried the same method in Firefox browser, and there was no error.

[chenjianan0823]

Temporary solution for vue project:

import { defineConfig, type Plugin } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import fs from 'fs'
import topLevelAwait from 'vite-plugin-top-level-await'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

function patchSparkPackedKeyword(): Plugin {
  const sparkModulePattern = /sparkjsdev[\\/]spark[\\/]dist[\\/]spark\.module\.js$/
  const patchCode = (code: string) =>
    code.replace(/(?<!\.)\bpacked\b/g, 'packedData')

  return {
    name: 'patch-spark-packed-keyword',
    enforce: 'pre',
    transform(code, id) {
      if (sparkModulePattern.test(id)) {
        return patchCode(code)
      }
    }
  }
}

function patchSparkEsbuildPlugin() {
  return {
    name: 'patch-spark-packed-keyword',
    setup(build: any) {
      build.onLoad({ filter: /spark\.module\.js$/ }, async (args: any) => {
        if (!args.path.includes('sparkjsdev')) return null
        const code = fs.readFileSync(args.path, 'utf-8')
        const contents = code.replace(/(?<!\.)\bpacked\b/g, 'packedData')
        return { contents, loader: 'js' }
      })
    }
  }
}

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    esbuildOptions: {
      target: 'esnext',
      plugins: [patchSparkEsbuildPlugin()]
    }
  },
  build: {
    target: 'esnext'
  },
  plugins: [vue(),
    patchSparkPackedKeyword(),
    topLevelAwait(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: "icon-[dir]-[name]",
    })
  ],
  css: {
    preprocessorOptions: {
      scss: {
        silenceDeprecations: ['legacy-js-api']
      },
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '*': path.resolve('')
    },
  },
  server: {
    host: '0.0.0.0',
    port: 4398,
    open: true,
    proxy: {
      '/test-api': {
        target: 'http://localhost:4399/',
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/test-api/, '')
      }
    }
  }
})

[mrxz]

@chenjianan0823 To pinpoint the issue, which version of Chrome are you using and on which operating system?

I'm somewhat surprises to see this issue, as I believe packed shouldn't be a reserved keyword in WebGL2. Or more specifically the WebGL2 spec indicates that "the WebGL 2.0 API also accepts shaders written in The OpenGL ES Shading Language, Version 3.00 [GLES30GLSL], with some restrictions.".

Where the linked GLES 3.0 GLSL specification explicitly mentions the following:

Removed packed as a reserved keyword

Which would logically mean that it isn't a reserved keyword any more. In any case it might be a good idea to change it either way. Though if it is a regression in Chrome, reporting it and getting it fixed would be nice for any pre-existing websites already using Spark.

[mrxz]

Found the related Chromium issue and changeset: https://issues.chromium.org/issues/507987648
Changes: https://chromium-review.googlesource.com/c/angle/angle/+/7810112?tab=comments

So it seems marking packed as reserved specifically for WebGL based scenarios is intentional... :-/