A rendering library with portability and compatibility in mind.

DaveShade is meant to abstract WebGL and any future rendering libraries into a set of easy to use and easy to manage components and functions.

Getting Started

To get started get the latest version from dist/DS3.js and drop it into your project. After that you should be good to add the script to your main HTML file.

Once DaveShade is added you can create an instance like this,

const instance = DaveShade.createInstance(CANVAS);

If you would like you can also add a secondary option specifying WebGL arguments.

//DaveShade also includes an additional option
//for initilizing with a blend function
const instance = DaveShade.createInstance(CANVAS, {
    blendFunc: "ONE_MINUS_CONSTANT_COLOR"
});

If you have more than one module installed you can also specify the module after the options

//WEBGL is the default module, we have no other modules by default
const instance = DaveShade.createInstance(CANVAS, {}, "WEBGL");

Creating a shader is fairly straightforward, you will need to call DaveShade.createShader

const myShader = instance.createShader(`//Vertex
    attribute highp vec4 a_position;
    
    void main() {
        gl_Position = a_position;
    }
`, `//Fragment
    void main() {
        gl_FragColor = vec4(0,0,1,1);
    }
`);

After shader creation you will want to assign a buffer to it.

//We will create a buffer as shown
const myBuffer = instance.buffersFromJSON({
    a_position: [
        0,0,1,1,
        1,0,1,1,
        0,1,1,1
    ]
});

//Then we will bindit to our shader.
myShader.setBuffers(myBuffer);
//There is also "shader.setBuffersRaw" but that uses the raw json and is slower.

//There is an optional secondary option that allows you to change the render mode.
//EG lines, triangles, etc... It defaults to triangles.
myShader.drawFromBuffers(3);

Thank you for using or contributing to DaveShade ❤️