webgl.js

A simple WebGL library

Installation

$ npm install webgl.js

 import webgl from "webgl.js";

or

<script src="./webgl.js"></script>

Usage

var canvas=document.createElement("canvas");

// WebGL 1.0 
var gl=webgl.getGLContext(canvas,"webgl");

// WebGL 2.0
var gl=webgl.getContext(canvas, "webgl2");

// WebGL Auto
var gl=webgl.getContext(canvas);

console.log(gl.isWebGL2);
console.log(webgl.getVersion(gl));

/////////// buffer context ////////////
var bufferContext = new webgl.BufferContext(gl);

// Reference: name + gl.bufferData(type, data, drawType);
bufferContext.create("vbo", gl.ARRAY_BUFFER, vertices, gl.STATUC_DRAW)
   .create("cbo", gl.ARRAY_BUFFER, colors)
   .create([
        ["vbo2", gl.ARRAY_BUFFER, vertices2],
        ["ibo2", gl.ELEMENT_ARRAY_BUFFER, indices2]
   ]);

////////// Model /////////////
var m1=new WebGL(gl, vertexSource?, fragmentSource?);
var m2=new WebGL(gl, vertextSurce2, fragmentSource2);

// var attribs=m1.attribs;
// var uniforms=m1.uniforms;
// var textures=m1.textures;
// var framebuffers=m1.framebuffers;
// var progam=m1.program;

// Reference: bufferName, bufferObject, gl.vertexAttribPointer(index, size, type, normalized, stride, offset)
m1.presetBuffer([
     ["vbo",bufferContext.vbo, ["a_Position", 3, gl.FLOAT, normalized, stride, offset]],
     ["cbo", bufferContext.cbo, ["a_Color", 3]]
]);

m2.presetBuffer("vbo2",bufferContext.vbo2, ["a_Position", 4 ,gl.FLOAT])
  .presetBuffer("index",bufferContext.ibo2);

///////////// draw ready /////////

gl.clearColor(0, 0, 0, 1);

gl.clear(gl.COLOR_BUFFER_BIT);


var lightPosition=[0, 5, 5];

////////// draw ////////////
m1.useProgram()
  .useBuffer("vbo")
  .useBufefr("cbo")
  .setUniform("lightPosition", lightPosition)
  .setUniform("projectMatrix", projectionMatrix)
  .setUniform("viewMatrix", viewMatrix);

gl.drawArrays(gl.TRIANGES, 0 , count);   

m2.usePromgram()
  .useBuffer("vbo2")
  .useBuffer("index");

gl.drawElements(gl.POINTS, count2, , gl.UNSIGNED_SHORT, 0);

   m1.createFramebuffer("myframebuffer",function(myframebuffer){
        var gl=this.gl;
        var texture=gl.createTexture();
        gl.bindTexture(gl.TEXTURE_2D, texture);

        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, myframebuffer, 0);
        
        gl.bindTexture(gl.TEXTURE_2D, null);
   });

   var myframebuffer=m1.framebuffers.myframebuffer;

// ...
  bufferContext.create("divisorBuffer",gl.ARRAY_BUFFER, data);
// ...
  var divisor=1;
  m1.presetBuffer("divisorBuffer",bufferContext.divisorBuffer, ["divisorPos",2], divisor);
// ...
  gl.drawArraysInstanced(mode, first, count, instanceCount);

webgl METHODS

getContext(canvas: HTMLCanvasElement, contextType: string, contextAttributes: any): WebGL2RenderingContext | WebGLRenderingContext | null;
getVersion(WebGL2RenderingContext | WebGLRenderingContext): string;
BufferContext: typeof BufferContext;
Model: typeof Model;

webgl.BufferContext properties

bufferContext.items

webgl.BufferContext METHODS

 constructor(gl:WebGL2RenderingContext | WebGLRenderingContext);
 create(name: string, type: number, data: number | ArrayBuffer, drawType?: number): BufferContext;
 create(List: [[string, number, number | ArrayBuffer, number?]]): BufferContext;
 bind(name:string):BufferContext;
 delete(name:string):BufferContext   

webgl.Model properties

m1.attribs;
m1.uniforms;
m1.textures;
m1.framebuffers;

webgl.Model METHODS

     constructor(gl: WebGL2RenderingContext | WebGLRenderingContext, vertexSource?: string | WebGLShader | null, fragmentSource?: string | WebGLShader | null);
    createShader(name: string, type: number, source: string): Model;
    createProgram(name: string): Model;
    useProgram(): Model;
    initLocation(): Model;
    presetBuffer(name: string, bufferPack: IBufferPack, attribOptions: [string, number, number?, boolean?, number?, number?], divisor?:number): Model;
    presetBuffer(list: [[string, IBufferPack, [string, number, number?, boolean?, number?, number?], number?]]): Model;
    useBuffer(name: string): Model;
    bindBuffer(type: number, buffer: WebGLBuffer): Model
    setAttrib(attribName: string, size: number, type: number, normalized: boolean, stride: number, offset: number): Model;
    disableAttribs(): Model;
    setUniform(name: string, data: Array<number> | ArrayBuffer, transpose?: boolean): Model;
    createTexture(name: string, img: any, width?:number | null, height?:number | null, parameters?: [[number,number]]): Model;
    useTexture(name: string, channel: number, uniformName?: string): Model;
    useTexture(texture: WebGLTexture, channel: number, uniformName: string): Model;
    createFrameTexture(name: string, useCallback: (framebuffer:WebGLFramebuffer) => void): Model;
    use(fun: (gl: WebGLRenderingContext | WebGL2RenderingContext) => any, _this?: any): Model;