Currently experimenting with creating a shader, I am attempting to apply it to an object upon loading using the code snippet below
AFRAME.registerShader('my-simple-shader', {
schema: {
color: {type: 'color', is: 'uniform', default: 'red'}
},
raw: false,
fragmentShader: `
uniform vec3 color;
void main(){
gl_FragColor = vec4(color, 1.0);
}
`
});
AFRAME.registerSystem('shader-preview-loader', {
init: function(){
this.el.sceneEl.addEventListener("scene-loaded", ()=>{
let perry = document.querySelector('.perry-the-planeglb');
perry.setAttribute('material', {shader: 'my-simple-shader'});
})
}
})
The custom scene-loaded event functions properly, ensuring all scene objects are loaded before any operations occur.
New to Aframe, I've been advised by the documentation to embed shaders in HTML markup, but due to using Mozilla Hubs, this is not feasible for me.
If anyone has insights on how to dynamically assign a new shader material through Javascript, please share them