I am making the simple babylon.js project that can set base texture, pattern overlay texture, pattern tint, lightmap of sphere using glsl.
I tried it but it doesn’t work.
I can see only base texture.
Please help me.
This is glsl code.
var customMaterial = new BABYLON.ShaderMaterial(
"customShader",
scene,
{
vertex: "custom",
fragment: "custom",
},
{
attributes: ["position", "normal", "uv"],
uniforms: ["world", "worldView", "worldViewProjection", "view", "projection", "time",
"baseTexture", "overlayTexture", "lightmapTexture", "tintColor"]
}
);
// GLSL Shader code
BABYLON.Effect.ShadersStore["customVertexShader"] = `
precision highp float;
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
uniform mat4 worldViewProjection;
varying vec2 vUV;
varying vec3 vNormal;
void main() {
gl_Position = worldViewProjection * vec4(position, 1.0);
vUV = uv;
vNormal = normal;
}
`;
BABYLON.Effect.ShadersStore["customFragmentShader"] = `
precision highp float;
varying vec2 vUV;
varying vec3 vNormal;
uniform sampler2D baseTexture;
uniform sampler2D overlayTexture;
uniform sampler2D lightmapTexture;
uniform vec3 tintColor;
void main() {
// Sample textures with proper UV clamping
vec4 baseColor = texture2D(baseTexture, clamp(vUV, 0.0, 1.0));
vec4 overlay = texture2D(overlayTexture, clamp(vUV, 0.0, 1.0));
vec4 lightmap = texture2D(lightmapTexture, clamp(vUV, 0.0, 1.0));
// Create tinted overlay by multiplying pattern with tint color
vec3 tintedOverlay = overlay.rgb * tintColor;
// Combine base and tinted overlay using overlay blend mode
vec3 blendedColor;
for(int i = 0; i < 3; i++) {
float base = baseColor.rgb[i];
float blend = tintedOverlay[i];
if(base < 0.5) {
blendedColor[i] = 2.0 * base * blend;
} else {
blendedColor[i] = 1.0 - 2.0 * (1.0 - base) * (1.0 - blend);
}
}
// Mix based on overlay alpha
vec3 colorWithOverlay = mix(baseColor.rgb, blendedColor, overlay.a);
// Apply lightmap
vec3 finalColor = colorWithOverlay * lightmap.rgb;
// Output final color with base texture alpha
gl_FragColor = vec4(finalColor, baseColor.a);
}
`;
// Set initial textures
customMaterial.setTexture("baseTexture", new BABYLON.Texture('./assets/img/model.png', scene));
customMaterial.setTexture("overlayTexture", new BABYLON.Texture('./assets/img/circleTexture.png', scene));
customMaterial.setTexture("lightmapTexture", new BABYLON.Texture('./assets/img/model.png', scene)); // Adding missing lightmap texture
customMaterial.setVector3("tintColor", new BABYLON.Color3('#ff0000'));
