Sign in to follow this  

Writing a Shader sandbox project

Recommended Posts

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 id="fragment" type="shader">
void main() {
   gl_FragColor = vec4(0.0, 1.0, 1.0, 0.0);
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");

// 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(, vertexCode, fragmentCode);

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


// That's it, right? Just tell the renderer to render the container



Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.