๐ A wrapped, elegant webGL library.
<script src="https://unpkg.com/wrap-gl"></script>
npm i wrap-gl
var glManager/gm = new GLManager()
import GLManager/GM from "wrap-gl"
var glManager/gm = new GLManager()
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 =>
gm.canvas.width | gm.canvas.height
gm.enableFramebuffer(gm.framebuffer)
gm.disableFramebuffer
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])
)
AdjustViewport. Usually use it once on beginning.
Create a program
return program { program // gm.useProgram(program.program), attrbute1, // gm.bindAttribute(buffer, program.attrbute1) attrbute2, // ... ... }
2.3 useProgram(program)
Start a 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