Writing a Shader sandbox project

[Kromahtique]

Hi everyone!

I am trying to put a foot in the world of WebGL and its shaders and for that I would need to write a super basic PIXI 4 project that would create a WebGLRenderer, create a Sprite, assign it to a very basic Shader and render it. But even though the idea seemed pretty basic to me, there seems to be a step I am missing somewhere since the result I get is my sprite being rendered normally, without the transformation my Shader program should have done to it.

Would anyone be able to point which part I am missing? Finding documentation, tutorials or even discussions about this seems much harder than it should be.

Thank you for your help and I hope this could be helpful to other beginners as well ?

// The two most basic vertex and fragment codes you'll find in town
// Set red pixels to 0 to see my shader in action

<script id="vertex" type="shader">
void main() {
   gl_Position = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>

<script id="fragment" type="shader">
void main() {
   gl_FragColor = vec4(0.0, 1.0, 1.0, 0.0);
}
</script>

function load() {
	const loader = PIXI.loader;
	loader.add("map", "map.jpg");
	loader.load(() => run());
}

function run() {
// Create my custom renderer
	let gl = new PIXI.WebGLRenderer(256, 256);

	let stage = new PIXI.Container();

	let map = PIXI.Sprite.fromImage("map.jpg");
	stage.addChild(map);

// Load the vertex and fragment pieces of code, stored in a html tag
	var fragmentCode = document.getElementById("fragment").innerHTML;
	var vertexCode = document.getElementById("vertex").innerHTML;

// Create my Shader object, feed it with the renderer's view, the vertex and the fragment codes
	var shader = new PIXI.Shader(gl.gl, vertexCode, fragmentCode);

// Assign my newly created shader to the only sprite involved in my scene
	map.shader = shader;

	document.body.appendChild(gl.view);

// That's it, right? Just tell the renderer to render the container
	gl.render(stage);
}

load();