@luma.gl/webgl 9.0.0-alpha.2 → 9.0.0-alpha.20

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@luma.gl/webgl",
-  "version": "9.0.0-alpha.2",
+  "version": "9.0.0-alpha.20",
   "description": "WebGL2 adapter for the luma.gl API",
+  "type": "module",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -16,12 +17,20 @@
     "animation",
     "3d"
   ],
-  "types": "src/index.ts",
-  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "files": [
     "src",
     "dist",
+    "dist.min.js",
     "README.md"
   ],
   "sideEffects": false,
@@ -30,14 +39,14 @@
     "gl/wrap": false
   },
   "scripts": {
-    "pre-build": "npm run build-bundle",
-    "build-bundle": "webpack --display=minimal --config ../../scripts/bundle.config.js"
+    "build-bundle": "ocular-bundle ./src/index.ts",
+    "pre-build": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/api": "9.0.0-alpha.2",
-    "@luma.gl/constants": "9.0.0-alpha.2",
-    "@probe.gl/env": "^3.5.0"
+    "@luma.gl/api": "9.0.0-alpha.20",
+    "@luma.gl/constants": "9.0.0-alpha.20",
+    "@probe.gl/env": "^4.0.2"
   },
-  "gitHead": "81e93840f31f0e32f86dfea6b576acf2c2d9caec"
+  "gitHead": "2c96cf4f25c15483008cb9bfb212a91f91463940"
 }

package/src/adapter/converters/device-parameters.ts

@@ -5,6 +5,8 @@ import {pushContextState, popContextState} from '../../context/state-tracker/tra
 import {setParameters} from '../../context/parameters/unified-parameter-api';
 import WebGLDevice from '../webgl-device';
 
+/* eslint-disable no-unused-expressions */ // For expression ? gl.enable() : gl.disable()
+
 /**
  * Execute a function with a set of temporary WebGL parameter overrides
  * - Saves current "global" WebGL context settings
@@ -12,8 +14,9 @@ import WebGLDevice from '../webgl-device';
  * - Executes supplied function
  * - Restores parameters
  * - Returns the return value of the supplied function
+ * @deprecated use withDeviceParameters instead
  */
-export function withDeviceParameters<T = unknown>(device: Device, parameters: Parameters & GLParameters, func: (device?: Device) => T): T {
+export function withGLParameters<T = unknown>(device: Device, parameters: GLParameters, func: (device?: Device) => T): T {
   if (isObjectEmpty(parameters)) {
     // Avoid setting state if no parameters provided. Just call and return
     return func(device);
@@ -24,6 +27,31 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
   pushContextState(device.gl);
   try {
     setParameters(device, parameters);
+    return func(device);
+  } finally {
+    // @ts-expect-error
+    popContextState(device.gl);
+  }
+}
+
+/**
+ * Execute a function with a set of temporary WebGL parameter overrides
+ * - Saves current "global" WebGL context settings
+ * - Sets the supplies WebGL context parameters,
+ * - Executes supplied function
+ * - Restores parameters
+ * - Returns the return value of the supplied function
+ */
+export function withDeviceParameters<T = unknown>(device: Device, parameters: Parameters, func: (device?: Device) => T): T {
+  if (isObjectEmpty(parameters)) {
+    // Avoid setting state if no parameters provided. Just call and return
+    return func(device);
+  }
+
+  // Wrap in a try-catch to ensure that parameters are restored on exceptions
+  // @ts-expect-error
+  pushContextState(device.gl);
+  try {
     setDeviceParameters(device, parameters);
     return func(device);
   } finally {
@@ -36,7 +64,7 @@ export function withDeviceParameters<T = unknown>(device: Device, parameters: Pa
 /** Set WebGPU Style Parameters */
 export function setDeviceParameters(device: Device, parameters: Parameters) {
   const webglDevice = WebGLDevice.attach(device);
-  const {gl, gl2} = webglDevice;
+  const {gl} = webglDevice;
 
   // RASTERIZATION SETTINGS
   if (parameters.cullMode) {
@@ -76,7 +104,8 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     gl.depthMask(mapBoolean('depthWriteEnabled', parameters.depthWriteEnabled));
   }
 
- if (parameters.depthCompare) {
+  if (parameters.depthCompare) {
+
     parameters.depthCompare !== 'always' ? gl.enable(GL.DEPTH_TEST) : gl.disable(GL.DEPTH_TEST);
     gl.depthFunc(convertCompareFunction('depthCompare', parameters.depthCompare));
   }
@@ -101,7 +130,7 @@ export function setDeviceParameters(device: Device, parameters: Parameters) {
     gl.stencilFuncSeparate(GL.BACK, glValue, 0, mask);
   }
 
-  if (parameters.stencilPassOperation) {
+  if (parameters.stencilPassOperation && parameters.stencilFailOperation && parameters.stencilDepthFailOperation) {
     const dppass = convertStencilOperation('stencilPassOperation', parameters.stencilPassOperation);
     const sfail = convertStencilOperation('stencilFailOperation', parameters.stencilFailOperation);
     const dpfail = convertStencilOperation('stencilDepthFailOperation', parameters.stencilDepthFailOperation);
@@ -198,16 +227,16 @@ function convertStencilOperation(parameter: string, value: StencilOperation): GL
   });
 }
 
-function convertBlendOperationToEquation(parameter, value): number {
-  return map(parameter, value, {
-    'add': GL.FUNC_ADD,
-    'sub': GL.FUNC_SUBTRACT,
-    'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
-    // When using a WebGL 2 context, the following values are available additionally:
-    'min': GL.MIN,
-    'max': GL.MAX
-  });
-}
+// function convertBlendOperationToEquation(parameter: string, value: string): number {
+//   return map(parameter, value, {
+//     'add': GL.FUNC_ADD,
+//     'sub': GL.FUNC_SUBTRACT,
+//     'reverse-subtract': GL.FUNC_REVERSE_SUBTRACT,
+//     // When using a WebGL 2 context, the following values are available additionally:
+//     'min': GL.MIN,
+//     'max': GL.MAX
+//   });
+// }
 
 function message(parameter: string, value: any): string {
   return `Illegal parameter ${value} for ${parameter}`;
@@ -220,6 +249,6 @@ function map(parameter: string, value: any, valueMap: Record<string, any>): any
   return valueMap[value];
 }
 
-function mapBoolean(parameter, value) {
+function mapBoolean(parameter: string, value: boolean): boolean {
   return value;
 }

package/src/adapter/converters/sampler-parameters.ts

@@ -1,15 +1,17 @@
 // SAMPLER FILTERS
 import {SamplerParameters} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
-import {WebGLSamplerParameters} from '../../types/webgl';
+import {GLSamplerParameters} from '../../types/webgl';
 import {convertCompareFunction, convertToCompareFunction} from './device-parameters';
 
+/* eslint-disable consistent-return */
+
 /**
  * Convert WebGPU-style sampler props to WebGL
  * @param props
  * @returns
  */
-export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGLSamplerParameters {
+export function convertSamplerParametersToWebGL(props: SamplerParameters): GLSamplerParameters {
   const params: Record<number, number> = {};
   if (props.addressModeU) {
     params[GL.TEXTURE_WRAP_S] = convertAddressMode(props.addressModeU);
@@ -33,14 +35,16 @@ export function convertSamplerParametersToWebGL(props: SamplerParameters): WebGL
   if (props.lodMaxClamp !== undefined) {
     params[GL.TEXTURE_MAX_LOD] = props.lodMaxClamp;
   }
-  if (props.compare) {
+  if (props.type === 'comparison-sampler') {
     // Setting prop.compare turns this into a comparison sampler
     params[GL.TEXTURE_COMPARE_MODE] = GL.COMPARE_REF_TO_TEXTURE;
+  }
+  if (props.compare) {
     params[GL.TEXTURE_COMPARE_FUNC] = convertCompareFunction('compare', props.compare);
   }
   // Note depends on WebGL extension
   if (props.maxAnisotropy) {
-    props[GL.TEXTURE_MAX_ANISOTROPY_EXT] = props.maxAnisotropy;
+    params[GL.TEXTURE_MAX_ANISOTROPY_EXT] = props.maxAnisotropy;
   }
   return params;
 }
@@ -82,7 +86,7 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
  * @param props
  * @returns
  */
- export function convertToSamplerParameters(params: WebGLSamplerParameters): SamplerParameters {
+export function convertToSamplerParameters(params: GLSamplerParameters): SamplerParameters {
   const props: SamplerParameters = {};
   if (params[GL.TEXTURE_WRAP_S]) {
     props.addressModeU = convertToAddressMode(params[GL.TEXTURE_WRAP_S]);
@@ -108,7 +112,10 @@ function convertMinFilterMode(minFilter: 'nearest' | 'linear', mipmapFilter?: 'n
   if (params[GL.TEXTURE_MAX_LOD]) {
     props.lodMaxClamp = params[GL.TEXTURE_MAX_LOD];
   }
-  if (params[GL.TEXTURE_COMPARE_MODE] === GL.COMPARE_REF_TO_TEXTURE) {
+  if (params[GL.TEXTURE_COMPARE_MODE]) {
+    props.type = params[GL.TEXTURE_COMPARE_MODE]  === GL.COMPARE_REF_TO_TEXTURE ? 'comparison-sampler' : 'color-sampler';
+  }
+  if (params[GL.TEXTURE_COMPARE_FUNC]) {
     props.compare = convertToCompareFunction('compare', params[GL.TEXTURE_COMPARE_FUNC]);
   }
   // NOTE depends on extension (very common)
@@ -124,6 +131,7 @@ function convertToAddressMode(addressMode: number): 'clamp-to-edge' | 'repeat' |
     case GL.CLAMP_TO_EDGE: return 'clamp-to-edge';
     case GL.REPEAT: return 'repeat';
     case GL.MIRRORED_REPEAT: return 'mirror-repeat';
+    default: throw new Error('address');
   }
 }
 
@@ -131,6 +139,7 @@ function convertToMaxFilterMode(filterMode: number): 'nearest' | 'linear' {
   switch (filterMode) {
     case GL.NEAREST: return 'nearest';
     case GL.LINEAR: return 'linear';
+    default: throw new Error('maxfilter');
   }
 }
 
@@ -144,6 +153,7 @@ function convertToMinFilterMode(filterMode: number): 'nearest' | 'linear' {
     case GL.LINEAR_MIPMAP_NEAREST: return 'linear';
     case GL.NEAREST_MIPMAP_LINEAR: return 'nearest';
     case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    default: throw new Error('minfilter');
   }
 }
 
@@ -156,13 +166,14 @@ function convertToMipmapFilterMode(filterMode: number): 'nearest' | 'linear' {
     case GL.LINEAR_MIPMAP_NEAREST: return 'nearest';
     case GL.NEAREST_MIPMAP_LINEAR: return 'linear';
     case GL.LINEAR_MIPMAP_LINEAR: return 'linear';
+    default: throw new Error('mipmap');
   }
 }
 
 /**
  * Override sampler settings that are not supported by Non-Power-of-Two textures in WebGL1.
 */
-export function updateSamplerParametersForNPOT(parameters: WebGLSamplerParameters): WebGLSamplerParameters {
+export function updateSamplerParametersForNPOT(parameters: GLSamplerParameters): GLSamplerParameters {
   const newParameters = {...parameters};
   if (parameters[GL.TEXTURE_MIN_FILTER] !== GL.NEAREST) {
     // log.warn(`texture: ${this} is Non-Power-Of-Two, forcing TEXTURE_MIN_FILTER to LINEAR`)();

package/src/adapter/converters/texture-formats.ts

@@ -1,8 +1,10 @@
-import type {TextureFormat, DeviceFeature, Device} from '@luma.gl/api';
+import type {TextureFormat, DeviceFeature} from '@luma.gl/api';
 import {decodeTextureFormat} from '@luma.gl/api';
 import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 
+/* eslint-disable camelcase */
+
 // TEXTURE FEATURES
 
 // Define local device feature strings to optimize minification
@@ -29,7 +31,7 @@ const EXT_SRGB = 'EXT_sRGB'; // https://developer.mozilla.org/en-US/docs/Web/API
 const EXT_TEXTURE_NORM16 = 'EXT_texture_norm16';
 const EXT_FLOAT_WEBGL1 = 'WEBGL_color_buffer_float';
 const EXT_FLOAT_RENDER_WEBGL2 = 'EXT_color_buffer_float';
-const EXT_HALF_FLOAT_WEBGL1 = 'WEBGL_color_buffer_half_float';
+// const EXT_HALF_FLOAT_WEBGL1 = 'EXT_color_buffer_half_float';
 // const DEPTH = 'WEBGL_depth_texture';
 
 const checkExtension = (gl: WebGLRenderingContext, extension: string): boolean =>
@@ -64,7 +66,7 @@ const TEXTURE_FEATURE_CHECKS: Partial<Record<DeviceFeature, (gl: WebGLRenderingC
 };
 
 export function checkTextureFeature(gl: WebGLRenderingContext, feature: DeviceFeature): boolean {
-  return TEXTURE_FEATURE_CHECKS[feature]?.(gl);
+  return TEXTURE_FEATURE_CHECKS[feature]?.(gl) || false;
 }
 
 const checkTextureFeatures = (gl: WebGLRenderingContext, features: DeviceFeature[]): boolean =>
@@ -240,7 +242,7 @@ export const TEXTURE_FORMATS: Record<TextureFormat, Format> = {
   // "depth24unorm-stencil8" feature
   'depth24unorm-stencil8': {gl: GL.DEPTH24_STENCIL8, b: 4, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
   // "depth32float-stencil8" feature
-  "depth32float-stencil8": {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
+  'depth32float-stencil8': {gl: GL.DEPTH32F_STENCIL8, b: 5, c: 2, p: 1, attachment: GL.DEPTH_STENCIL_ATTACHMENT},
 
   // BC compressed formats: check device.features.has("texture-compression-bc");
 
@@ -380,22 +382,22 @@ export function getTextureFormatSupport(
   if (!info) {
     return {supported: false};
   }
-  let decoded;
-  try {
-    decoded = decodeTextureFormat(format);
-  } catch {}
+  // let decoded;
+  // try {
+  //   decoded = decodeTextureFormat(format);
+  // } catch {}
 
   // Support Check that we have a GL constant
   let supported = isWebGL2(gl) ? info.gl === undefined : info.gl1 === undefined;
   supported = supported && checkTextureFeatures(gl, [info.f]);
 
   // Filtering
-  const filterable = info.filter
-    ? checkTextureFeatures(gl, [info.filter])
-    : decoded && !decoded.signed;
-  const renderable = info.filter
-    ? checkTextureFeatures(gl, [info.render])
-    : decoded && !decoded.signed;
+  // const filterable = info.filter
+  //   ? checkTextureFeatures(gl, [info.filter])
+  //   : decoded && !decoded.signed;
+  // const renderable = info.filter
+  //   ? checkTextureFeatures(gl, [info.render])
+  //   : decoded && !decoded.signed;
 
   return {
     supported,
@@ -520,8 +522,8 @@ export function _checkFloat32ColorAttachment(
   srcFormat = GL.RGBA,
   srcType = GL.UNSIGNED_BYTE
 ) {
-  let texture: WebGLTexture;
-  let framebuffer: WebGLFramebuffer;
+  let texture: WebGLTexture | null = null;
+  let framebuffer: WebGLFramebuffer | null = null;
   try {
     texture = gl.createTexture();
     gl.bindTexture(GL.TEXTURE_2D, texture);

package/src/adapter/converters/vertex-formats.ts

@@ -8,6 +8,7 @@ export function getVertexFormat(type: GL, components: number): VertexFormat {
     case 2: return `${base}x2`;
     case 3: return `${base}x3`;
     case 4: return `${base}x4`;
+    default: throw new Error(String(components));
   }
 }
 

package/src/adapter/device-helpers/device-features.ts

@@ -3,7 +3,6 @@
 // available in an WebGL1 or WebGL2 environment.
 
 import {DeviceFeature} from '@luma.gl/api';
-import GL from '@luma.gl/constants';
 import {isWebGL2} from '../../context/context/webgl-checks';
 import {isOldIE} from './is-old-ie';
 import {getTextureFeatures, _checkFloat32ColorAttachment} from '../converters/texture-formats';
@@ -47,7 +46,12 @@ export function getWebGLFeatures(gl: WebGLRenderingContext): Set<DeviceFeature>
 }
 
 function isFeatureSupported(gl: WebGLRenderingContext, feature: DeviceFeature): boolean {
-  const [webgl1Feature, webgl2Feature] = WEBGL_FEATURES[feature];;
+  const featureInfo = WEBGL_FEATURES[feature];
+  if (!featureInfo) {
+    return false;
+  }
+
+  const [webgl1Feature, webgl2Feature] = featureInfo || [];
 
   // Get extension name from table
   const featureDefinition = isWebGL2(gl) ? webgl2Feature : webgl1Feature;
@@ -100,6 +104,9 @@ export function canCompileGLSLExtension(gl: WebGLRenderingContext, extensionName
   const source = `#extension GL_${extensionName} : ${behavior}\nvoid main(void) {}`;
 
   const shader = gl.createShader(gl.VERTEX_SHADER);
+  if (!shader) {
+    throw new Error('shader');
+  }
   gl.shaderSource(shader, source);
   gl.compileShader(shader);
   const canCompile = gl.getShaderParameter(shader, gl.COMPILE_STATUS);

package/src/adapter/device-helpers/device-limits.ts

@@ -5,7 +5,7 @@ import {getWebGL2Context} from '../../context/context/webgl-checks';
 
 /** Populate a WebGPU style device limits */
 export function getDeviceLimits(gl: WebGLRenderingContext): DeviceLimits {
-  const gl2: WebGL2RenderingContext = getWebGL2Context(gl);
+  const gl2: WebGL2RenderingContext | null = getWebGL2Context(gl);
   return {
     maxTextureDimension1D: 0, // WebGL does not support 1D textures
     maxTextureDimension2D: gl.getParameter(GL.MAX_TEXTURE_SIZE),

package/src/adapter/device-helpers/get-device-info.ts

@@ -27,23 +27,27 @@ export function getDeviceInfo(gl: WebGLRenderingContext): DeviceInfo {
   };
 }
 
-function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'unknown' {
-  if (vendor.match(/NVIDIA/i) || renderer.match(/NVIDIA/i)) {
+function identifyGPUVendor(vendor: string, renderer: string): 'nvidia' | 'intel' | 'apple' | 'amd' | 'software' | 'unknown' {
+  if ((/NVIDIA/i.exec(vendor)) || (/NVIDIA/i.exec(renderer))) {
     return 'nvidia';
   }
-  if (vendor.match(/INTEL/i) || renderer.match(/INTEL/i)) {
+  if ((/INTEL/i.exec(vendor)) || (/INTEL/i.exec(renderer))) {
     return 'intel';
   }
-  if (vendor.match(/Apple/i) || renderer.match(/Apple/i)) {
+  if ((/Apple/i.exec(vendor)) || (/Apple/i.exec(renderer))) {
     return 'apple';
   }
   if (
-    vendor.match(/AMD/i) ||
-    renderer.match(/AMD/i) ||
-    vendor.match(/ATI/i) ||
-    renderer.match(/ATI/i)
+    (/AMD/i.exec(vendor)) ||
+    (/AMD/i.exec(renderer)) ||
+    (/ATI/i.exec(vendor)) ||
+    (/ATI/i.exec(renderer))
   ) {
     return 'amd';
   }
+  if ((/SwiftShader/i.exec(vendor)) || (/SwiftShader/i.exec(renderer))) {
+    return 'software';
+  }
+  
   return 'unknown';
 }

package/src/adapter/helpers/get-shader-info.ts

@@ -0,0 +1,37 @@
+// luma.gl, MIT license
+
+/** Information extracted from shader source code */
+export type ShaderInfo = {
+  name: string;
+  language: 'glsl' | 'wgsl';
+  version: number;
+};
+
+/** Extracts information from shader source code */
+export function getShaderInfo(source: string, defaultName?: string): ShaderInfo {
+  return {
+    name: getShaderName(source, defaultName),
+    language: 'glsl',
+    version: getShaderVersion(source)
+  };
+}
+
+/** Extracts GLSLIFY style naming of shaders: `#define SHADER_NAME ...` */
+function getShaderName(shader: string, defaultName: string = 'unnamed'): string {
+  const SHADER_NAME_REGEXP = /#define[\s*]SHADER_NAME[\s*]([A-Za-z0-9_-]+)[\s*]/;
+  const match = SHADER_NAME_REGEXP.exec(shader);
+  return match ? match[1] : defaultName;
+}
+
+/** returns GLSL shader version of given shader string */
+function getShaderVersion(source: string): number {
+  let version = 100;
+  const words = source.match(/[^\s]+/g);
+  if (words && words.length >= 2 && words[0] === '#version') {
+    const v = parseInt(words[1], 10);
+    if (Number.isFinite(v)) {
+      version = v;
+    }
+  }
+  return version;
+}

package/src/adapter/helpers/get-shader-layout.ts

@@ -1,12 +1,14 @@
+// luma.gl, MIT license
+
 import {
   ShaderLayout,
-  BindingLayout,
+  // BindingLayout,
   UniformBinding,
   UniformBlockBinding,
   ProgramBindings,
   AttributeBinding,
   VaryingBinding,
-  AttributeLayout,
+  // AttributeLayout,
   AccessorObject
 } from '@luma.gl/api';
 import GL from '@luma.gl/constants';
@@ -15,6 +17,7 @@ import Accessor from '../../classic/accessor'; // TODO - should NOT depend on cl
 import {decodeUniformType, decodeAttributeType} from './uniforms';
 import {getVertexFormat} from '../converters/vertex-formats';
 import {isSamplerUniform} from './uniforms';
+
 /**
  * Extract metadata describing binding information for a program's shaders
  * Note: `linkProgram()` needs to have been called
@@ -29,9 +32,11 @@ export function getShaderLayout(gl: WebGLRenderingContext, program: WebGLProgram
   };
 
   for (const attribute of programBindings.attributes) {
+    // TODO - multicolumn attributes like a matrix4 can be up to 16 elts...
+    const size = Math.min(attribute.accessor.size, 4);
     const format =
       // attribute.accessor.format ||
-      getVertexFormat(attribute.accessor.type || GL.FLOAT, attribute.accessor.size);
+      getVertexFormat(attribute.accessor.type || GL.FLOAT, size);
     shaderLayout.attributes.push({
       name: attribute.name,
       location: attribute.location,
@@ -123,7 +128,11 @@ function readAttributeBindings(
   const count = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
 
   for (let index = 0; index < count; index++) {
-    const {name, type: compositeType, size} = gl.getActiveAttrib(program, index);
+    const activeInfo = gl.getActiveAttrib(program, index);
+    if (!activeInfo) {
+      throw new Error('activeInfo');
+    }
+    const {name, type: compositeType, size} = activeInfo;
     const location = gl.getAttribLocation(program, name);
     // Add only user provided attributes, for built-in attributes like
     // `gl_InstanceID` locaiton will be < 0
@@ -158,7 +167,11 @@ function readVaryings(gl: WebGLRenderingContext, program: WebGLProgram): Varying
 
   const count = gl.getProgramParameter(program, GL.TRANSFORM_FEEDBACK_VARYINGS);
   for (let location = 0; location < count; location++) {
-    const {name, type: compositeType, size} = gl2.getTransformFeedbackVarying(program, location);
+    const activeInfo = gl2.getTransformFeedbackVarying(program, location);
+    if (!activeInfo) {
+      throw new Error('activeInfo');
+    }
+    const {name, type: compositeType, size} = activeInfo;
     const {glType, components} = decodeUniformType(compositeType);
     const accessor = new Accessor({type: glType, size: size * components});
     const varying = {location, name, accessor}; // Base values
@@ -179,7 +192,11 @@ function readUniformBindings(gl: WebGLRenderingContext, program: WebGLProgram):
 
   const uniformCount = gl.getProgramParameter(program, GL.ACTIVE_UNIFORMS);
   for (let i = 0; i < uniformCount; i++) {
-    const {name: rawName, size, type} = gl.getActiveUniform(program, i);
+    const activeInfo = gl.getActiveUniform(program, i);
+    if (!activeInfo) {
+      throw new Error('activeInfo');
+    }
+    const {name: rawName, size, type} = activeInfo;
     const {name, isArray} = parseUniformName(rawName);
     let webglLocation = gl.getUniformLocation(program, name);
     const uniformInfo = {
@@ -234,8 +251,8 @@ function readUniformBlocks(
 
   const blockCount = gl2.getProgramParameter(program, GL.ACTIVE_UNIFORM_BLOCKS);
   for (let blockIndex = 0; blockIndex < blockCount; blockIndex++) {
-    const blockInfo = {
-      name: gl2.getActiveUniformBlockName(program, blockIndex),
+    const blockInfo: UniformBlockBinding = {
+      name: gl2.getActiveUniformBlockName(program, blockIndex) || '',
       location: getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_BINDING),
       byteLength: getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_DATA_SIZE),
       vertex: getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER),
@@ -244,33 +261,38 @@ function readUniformBlocks(
       uniforms: [] as any[]
     };
 
-    const uniformIndices = getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES);
+    const uniformIndices = getBlockParameter(blockIndex, GL.UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES) as number[] || [];
 
     const uniformType = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_TYPE); // Array of GLenum indicating the types of the uniforms.
     const uniformArrayLength = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_SIZE); // Array of GLuint indicating the sizes of the uniforms.
-    const uniformBlockIndex = gl2.getActiveUniforms(
-      program,
-      uniformIndices,
-      GL.UNIFORM_BLOCK_INDEX
-    ); // Array of GLint indicating the block indices of the uniforms.
+    // const uniformBlockIndex = gl2.getActiveUniforms(
+    //   program,
+    //   uniformIndices,
+    //   GL.UNIFORM_BLOCK_INDEX
+    // ); // Array of GLint indicating the block indices of the uniforms.
     const uniformOffset = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_OFFSET); // Array of GLint indicating the uniform buffer offsets.
     const uniformStride = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_ARRAY_STRIDE); // Array of GLint indicating the strides between the elements.
-    const uniformMatrixStride = gl2.getActiveUniforms(
-      program,
-      uniformIndices,
-      GL.UNIFORM_MATRIX_STRIDE
-    ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
-    const uniformRowMajor = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
+    // const uniformMatrixStride = gl2.getActiveUniforms(
+    //   program,
+    //   uniformIndices,
+    //   GL.UNIFORM_MATRIX_STRIDE
+    // ); // Array of GLint indicating the strides between columns of a column-major matrix or a row-major matrix.
+    // const uniformRowMajor = gl2.getActiveUniforms(program, uniformIndices, GL.UNIFORM_IS_ROW_MAJOR);
     for (let i = 0; i < blockInfo.uniformCount; ++i) {
+      const activeInfo = gl2.getActiveUniform(program, uniformIndices[i]);
+      if (!activeInfo) {
+        throw new Error('activeInfo');
+      }
+  
       blockInfo.uniforms.push({
-        name: gl2.getActiveUniform(program, uniformIndices[i]).name,
+        name: activeInfo.name,
         format: decodeUniformType(uniformType[i]).format,
         type: uniformType[i],
         arrayLength: uniformArrayLength[i],
         byteOffset: uniformOffset[i],
         byteStride: uniformStride[i],
-        matrixStride: uniformStride[i],
-        rowMajor: uniformRowMajor[i]
+        // matrixStride: uniformStride[i],
+        // rowMajor: uniformRowMajor[i]
       });
     }
 
@@ -305,18 +327,18 @@ const SAMPLER_UNIFORMS_GL_TO_GPU: Record<
   [GL.UNSIGNED_INT_SAMPLER_2D_ARRAY]: ['2d-array', 'uint']
 };
 
-function getSamplerInfo(type: GL):
-  | {
-      viewDimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
-      sampleType: 'float' | 'unfilterable-float' | 'depth' | 'sint' | 'uint';
-    }
-  | undefined {
-  let sampler = SAMPLER_UNIFORMS_GL_TO_GPU[type];
-  if (sampler) {
-    const [viewDimension, sampleType] = sampler;
-    return {viewDimension, sampleType};
+type SamplerInfo =   | {
+  viewDimension: '1d' | '2d' | '2d-array' | 'cube' | 'cube-array' | '3d';
+  sampleType: 'float' | 'unfilterable-float' | 'depth' | 'sint' | 'uint';
+};
+
+function getSamplerInfo(type: GL): SamplerInfo {
+  const sampler = SAMPLER_UNIFORMS_GL_TO_GPU[type];
+  if (!sampler) {
+    throw new Error('sampler');
   }
-  return null;
+  const [viewDimension, sampleType] = sampler;
+  return {viewDimension, sampleType};
 }
 
 // HELPERS
@@ -333,7 +355,7 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
 
   // if array name then clean the array brackets
   const UNIFORM_NAME_REGEXP = /([^[]*)(\[[0-9]+\])?/;
-  const matches = name.match(UNIFORM_NAME_REGEXP);
+  const matches = UNIFORM_NAME_REGEXP.exec(name);
   if (!matches || matches.length < 2) {
     throw new Error(`Failed to parse GLSL uniform name ${name}`);
   }
@@ -351,7 +373,7 @@ function parseUniformName(name: string): {name: string; length: number; isArray:
 * Extract info about all "active" uniform blocks
  * ("Active" just means that unused (inactive) blocks may have been optimized away during linking)
  *
- function getUniformBlockBindings(gl, program): Binding[] {
+ function getUniformBlockBindings(gl: WebGLRenderingContext, program): Binding[] {
   if (!isWebGL2(gl)) {
     return;
   }