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 { program // gm.useProgram(program.program), attrbute1, // gm.bindAttribute(buffer, program.attrbute1) attrbute2, // ... ... }
2.3 useProgram(program)
Start a program
2.4 createTexture(filter, data, width, height)
Same with webgl's texture
2.5 createQuadTexture(width, height)
Similiar with createTexture, but 1st, it returns a empty texture, second it's a square texture
2.6 bindTexture(texture, unit)
Bind texture with its id
2.7 drawTexture(textureIndex)
Draw texture to screen or framebuffer
2.8 bindAttribute(buffer, attribute, num)
Bind attribute
2.9 createBuffer(data)
CreateBuffer
2.10 bindFramebuffer(framebuffer, texture)
BindFramebuffer
2.11 enableFrameBuffer(texture)
disable frameBuffer
2.12 disableFrameBuffer()
disable frameBuffer
2.13 clearGL(r, g, b, a)
Clear current canvas.r,g,b,a => 0.0 ~ 1.0
2.14 clearTexture(texture, r, g, b, a)
Clear texture. r,g,b,a => 0.0 ~ 1.0