Custom shader issue "WebGL: INVALID_OPERATION: uniformMatrix4fv: location is not from current program"

Questions
1

Hey, I’m trying to run a custom shader for my Gaussian Splats and I keep getting that error. Can someone help me please? Code below. I am for now just using a copy of the default splat shader, I can’t even get that to load properly.

Scene Initialization
import * as BABYLON from ‘@babylonjs/core’;
import { GaussianSplat } from ‘./GaussianSplat’;

// Get the canvas element from the DOM
const canvas = document.getElementById(‘renderCanvas’) as HTMLCanvasElement;

// Create the Babylon.js engine
const engine = new BABYLON.Engine(canvas, true);

// Create a new scene
const createScene = async () => {
const scene = new BABYLON.Scene(engine);

// Create a camera and attach it to the canvas
const camera = new BABYLON.ArcRotateCamera(‘camera’, -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
camera.attachControl(canvas, true);

// Create a light source
const light = new BABYLON.HemisphericLight(‘light’, new BABYLON.Vector3(0, 1, 0), scene);

// Create a basic sphere
const sphere = BABYLON.MeshBuilder.CreateSphere(‘sphere’, { diameter: 1 }, scene);

// Instantiate the GaussianSplat class
new GaussianSplat(scene);

// Create a plane as the ground
const ground = BABYLON.MeshBuilder.CreateGround(‘ground’, { width: 10, height: 10 }, scene);

// Initialize XR support
const xr = await scene.createDefaultXRExperienceAsync({
floorMeshes: [ground], // Use the ground plane as the floor mesh
});

return scene;
};

// Call the createScene function
createScene().then(scene => {
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(() => {
scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener(‘resize’, () => {
engine.resize();
});
});

Splat Loading
import * as BABYLON from ‘@babylonjs/core’;
import { Effect } from ‘@babylonjs/core/Materials/effect’;

export class GaussianSplat {
constructor(scene: BABYLON.Scene) {
// Gaussian Splatting
const gs = new BABYLON.GaussianSplattingMesh(“Halo”, null, scene);
const gsMesh = gs as BABYLON.GaussianSplattingMesh; // Assign gs to gsMesh

// Load the custom shader material

const shaderMaterial = new BABYLON.ShaderMaterial(
“shader”,
scene,
“./NOROTATION_SPLAT”,
{
attributes: [“position”, “splatIndex”],
uniforms: [
“world”,
“view”,
“projection”,
“viewport”,
“dataTextureSize”,
“focal”,
“covariancesATexture”,
“covariancesBTexture”,
“centersTexture”,
“colorsTexture”,
],
}
);

shaderMaterial.onCompiled = () => {
console.log(“Shader material compiled successfully”);
};

shaderMaterial.onError = (effect: Effect, errors: string) => {
console.error(“Failed to compile shader material:”, errors);
};

// Assign the custom shader material to the Gaussian splat mesh
gs.material = shaderMaterial;

// Wait for the shader material to be ready
shaderMaterial.onBindObservable.add(() => {

	// Set the uniform values
	const worldMatrix = gs.getWorldMatrix();
	shaderMaterial.setMatrix("world", gs.getWorldMatrix());
	shaderMaterial.setMatrix("view", scene.getViewMatrix());
	shaderMaterial.setMatrix("projection", scene.getProjectionMatrix());

	// Set other uniform values from the gsMesh
	shaderMaterial.setVector2("viewport", new BABYLON.Vector2(scene.getEngine().getRenderWidth(), scene.getEngine().getRenderHeight()));

	const camera = scene.activeCamera;
	let focal = 1000;
	if (camera) {
		if (camera.fovMode === BABYLON.Camera.FOVMODE_VERTICAL_FIXED) {
			focal = scene.getEngine().getRenderHeight() / 2.0 / Math.tan(camera.fov / 2.0);
		} else {
			focal = scene.getEngine().getRenderWidth() / 2.0 / Math.tan(camera.fov / 2.0);
		}
	}
	shaderMaterial.setVector2("focal", new BABYLON.Vector2(focal, focal));

if (gsMesh.covariancesATexture != null &&
	gsMesh.covariancesBTexture != null &&
	gsMesh.centersTexture != null &&
	gsMesh.colorsTexture != null) {
	shaderMaterial.setVector2("dataTextureSize", new BABYLON.Vector2(gsMesh.covariancesATexture.getSize().width, gsMesh.covariancesATexture.getSize().height));

	shaderMaterial.setTexture("covariancesATexture", gsMesh.covariancesATexture);
	shaderMaterial.setTexture("covariancesBTexture", gsMesh.covariancesBTexture);
	shaderMaterial.setTexture("centersTexture", gsMesh.centersTexture);
	shaderMaterial.setTexture("colorsTexture", gsMesh.colorsTexture);
} else {
	console.error("One or more textures are null. Unable to assign to shader material.");
}


});
	gs.loadFileAsync("https://assets.babylonjs.com/splats/gs_Skull.splat").then(() => {
	  gs.position.y = 1.7;
	});

}
}

2

hey please create a PG as live debugging text on the forum is impossible ;D