Hey guys… I cant seem to find anywhere in the Material Plugins docs or examples that does a basic texture sample in WGSL. the only thing i seen that comes close is some sort of textureArray example.
But i need to do the equivalent of the following GLSL but in WGSL:
logger.ts:107 BJS - [07:07:42]: WebGPU uncaptured error (1): [object GPUValidationError] - Error while parsing WGSL: :886:44 error: unresolved value 'testTexture'
let customColor: vec4<f32> = textureSample(testTexture, testSampler, vMainUV1);
^^^^^^^^^^^
- While validating [ShaderModuleDescriptor ""fragment""]
- While calling [Device "BabylonWebGPUDevice0"].CreateShaderModule([ShaderModuleDescriptor ""fragment""]).
Its hard for me to make this exact material plugin on the playground.
Do I need to explicitly define anything in a fragment definitions section ?
Do I use vAlbedoUV or `fragmentInputs.vAlbedoUV’
Do we have an existing playground that just uses a basic texture ?
I do define the texture, its the same exact class used for the GLSL version. So the bindForSubMesh should be doing the same thing and calling setTexture unless that part works differently for WGSL.
Take a look at my Material Plugin class, where the getUniforms and getCustomCode are the only two functions that handle the GLSL and WGSL differences
namespace PROJECT {
/**
* Custom Shader Material (BABYLON.PBRMaterial)
* @class MyTestMaterial
*/
export class MyTestMaterial extends TOOLKIT.CustomShaderMaterial {
public constructor(name: string, scene: BABYLON.Scene) {
super(name, scene);
this.shader = this.getClassName();
this.plugin = new PROJECT.MyTestMaterialPlugin(this, this.shader);
}
public update(): void {
/* Update values before binding */
}
public getClassName(): string {
return "MyTestMaterial";
}
}
/**
* Custom Shader Material Plugin (BABYLON.MaterialPluginBase)
* @class MyTestMaterialPlugin
*/
export class MyTestMaterialPlugin extends TOOLKIT.CustomShaderMaterialPlugin {
public constructor(customMaterial: TOOLKIT.CustomShaderMaterial, shaderName: string) {
// The second parameter is the name of this plugin.
// The third one is a priority, which lets you define the order multiple plugins are run. Lower numbers run first.
// The fourth one is a list of defines used in the shader code.
super(customMaterial, shaderName, 100, { MYTESTMATERIAL: false });
}
public getClassName(): string {
return "MyTestMaterialPlugin";
}
/** This is used to inform the system which languages are supported */
public isCompatible(shaderLanguage: BABYLON.ShaderLanguage): boolean {
return (shaderLanguage === BABYLON.ShaderLanguage.WGSL || shaderLanguage === BABYLON.ShaderLanguage.GLSL);
}
/** This is used to create define custom shader code */
public getCustomCode(shaderType: string, shaderLanguage: BABYLON.ShaderLanguage): any {
if (shaderType === "vertex") {
if (shaderLanguage === BABYLON.ShaderLanguage.WGSL) {
return {
// EXAMPLE OUTPUT COLOR VERTEX
// CUSTOM_VERTEX_MAIN_END: `
// output.color = vec4<f32>(input.color.r*0.299 + input.color.g*0.587 + input.color.b*0.114, 1.0);
// `,
};
} else if (shaderLanguage === BABYLON.ShaderLanguage.GLSL) {
return {
// EXAMPLE FRONT COLOR VERTEX
// CUSTOM_VERTEX_MAIN_END: `
// gl_FrontColor = vec4(gl_Color.r*0.299 + gl_Color.g*0.587 + gl_Color.b*0.114, 1.0);
// `,
};
}
} else if (shaderType === "fragment") {
if (shaderLanguage === BABYLON.ShaderLanguage.WGSL) {
return {
CUSTOM_FRAGMENT_DEFINITIONS: `
var testTexture: texture_2d<f32>;
var testSampler: sampler;
`,
CUSTOM_FRAGMENT_MAIN_END: `
#ifdef MYTESTMATERIAL
let customColor: vec4<f32> = textureSample(testTexture, testSampler, fragmentInputs.vAlbedoUV);
fragmentOutputs.color = mix(fragmentOutputs.color, customColor, 0.5);
#endif
`,
};
} else if (shaderLanguage === BABYLON.ShaderLanguage.GLSL) {
return {
CUSTOM_FRAGMENT_MAIN_END: `
#ifdef MYTESTMATERIAL
vec4 customColor = texture2D(testTexture, vAlbedoUV);
gl_FragColor = mix(gl_FragColor, customColor, 0.5);
#endif
`,
};
}
}
return null;
}
/** This gets the uniforms used in the shader code */
public getUniforms(shaderLanguage: BABYLON.ShaderLanguage): any {
let result: any = null;
const customUniforms: TOOLKIT.CustomUniformProperty[] = this.getCustomShaderMaterial().getCustomUniforms();
if (shaderLanguage === BABYLON.ShaderLanguage.WGSL) {
result = { "ubo": customUniforms };
} else if (shaderLanguage === BABYLON.ShaderLanguage.GLSL) {
const customFragment: string = this.getCustomShaderMaterial().getCustomFragmentCode();
const customVertex: string = null; // Note: Set Custom Vertex Properties Here
result = { "ubo": customUniforms, "fragment": customFragment, "vertex": customVertex };
}
console.warn("Get Custom Uniforms(): ", result);
return result;
}
/** This gets the samplers used in the shader code */
public getSamplers(samplers: string[]): void {
const customSamplers: string[] = this.getCustomShaderMaterial().getCustomSamplers();
if (customSamplers != null && customSamplers.length > 0) samplers.push(...customSamplers);
console.warn("Get Custom Samplers(): ", samplers);
}
/** This get the attributes used in the shader code */
public getAttributes(attributes: string[], scene: BABYLON.Scene, mesh: BABYLON.AbstractMesh): void {
const customAttributes: string[] = this.getCustomShaderMaterial().getCustomAttributes();
if (customAttributes != null && customAttributes.length > 0) attributes.push(...customAttributes);
}
/** This prepares the shader defines */
public prepareDefines(defines: BABYLON.MaterialDefines, scene: BABYLON.Scene, mesh: BABYLON.AbstractMesh): void {
if (!this.isEnabled) return;
this.getCustomShaderMaterial().prepareCustomDefines(defines);
}
/** This is used to update the uniforms bound to a mesh */
public bindForSubMesh(uniformBuffer: BABYLON.UniformBuffer, scene: BABYLON.Scene, engine: BABYLON.AbstractEngine, subMesh: BABYLON.SubMesh): void {
if (!this.isEnabled) return;
this.getCustomShaderMaterial().updateCustomBindings(uniformBuffer);
}
}
}
I think i got it… We are missing a CRUCIAL step when dealing with textureSample and WGSL…
You MUST create an additional sampler property for your actual texture2D property that is bound with setTexture… and that sampler MUST have the EXACT name as the texture2d plus Sampler.
So in my case the actual texture was testTexture that is the name in the setTexture and that is the name that is return from getSamplers. So the additional sampler for WGSL MUST be called testTextureSampler and not testSampler
like in webgl