wrap-gl

Intro

🎃 A wrapped, elegant webGL library.

Installation

CDN

<script src="https://unpkg.com/wrap-gl"></script>

npm

npm i wrap-gl

Usage

1. new a glManager Object

CDN

var glManager/gm = new GLManager()

npm

import GLManager/GM from "wrap-gl"

var glManager/gm = new GLManager()

2. usage

var gm = new GLManager("canvas", { fixRetina: false })

let gl = gm.gl

const vertexShader = `
    attribute vec2 a_pos;
    void main() {
        gl_Position = vec4(a_pos, 0.0, 1.0);
        gl_PointSize = 10.0;
    }
`

const fragShader = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`
gm.adjustViewport()

var program = gm.createProgram(vertexShader, fragShader)

gl.useProgram(program.program)

let buffer = gm.createBuffer(new Float32Array([-0.5, -0.5, 0.5, 0.5]))

gm.bindAttribute(buffer, program.a_pos, 2)

gl.drawArrays(gl.POINTS, 0, 2)

And you'll get this =>

3. have fun!

API(GLManager)

1. props

1.1 canvas

gm.canvas.width | gm.canvas.height

1.2 gl

1.3 framebuffer

gm.enableFramebuffer(gm.framebuffer)
gm.disableFramebuffer

1.4 quadBuffer

A Square buffer. Used for a whole screen

#source code

this.quadBuffer = this.createBuffer(
    new Float32Array([0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1])
)

2. methods

2.1 adjustViewport()

AdjustViewport. Usually use it once on beginning.

2.2 createProgram(vertexSource, fragmentSource)

Create a program

return program