A petit JS libraries to handle WebGL more easily
GitHub repo
huge thanks to wgld.org
-
instance
new PetitGL(canvas, color, blend);
canvas
Optional HTMLCanvasElement
canvas to draw. if undefined creates new canvas.
stored inthis.c
color
Optional Array(4)
rgba normalized array to clear canvas.
default is[0,0,0,0]
blend
Optional Boolean
defines BLEND
default istrue
-
resize
this.resize(width, height);
width
Number
defines canvas width with Number.height
Number
defines canvas height with Number.
- compile
this.compile(programName, vertexShader, fragmentShader);
programName
programName:String
defines program name with String.vertexShader
String
vertex shader used in this program.fragmentShader
String
fragment shader used in this program.
- tex
this.tex(textures);
textures
Array[{name, data, animate, flush}...]
name
texName:String
defines texture to access from uniforms name with String.
always required.data
Optinal HTMLImageElement || HTMLVideoElement || HTMLCanvasElement specify loaded HTMLElement applied to texture.
required when initialize.data
Optinal Object
required when initialize.{url, type, fx}
url
String
defines location of the file with String.type
String
defines type of the file with String.
specifyimg
orvid
.fx
Optinal Function
callback function runs after file is loaded.
current object of textures array that data property is replaced with proper HTMLElement will be taken as argument.
animate
Optinal Boolean
defines whether this texture needs update every frame or not.
default isfalse
.flush
Insider Boolean
if true this texture will updated in next uni() call.
use when texture refresh is needed.
default istrue
.
example:this.tex([{name:'texture0',flush:true}]);
- buffer
this.buffer(bufs);
bufs
Array[{name, tex, w, h, mip}...]
name
bufName:String
defines buffer name with String.tex
texName:String
defines texture name to access from uniforms with String.w
Optional Number
defines width of buffer with Number.h
Optional Number
defines height of buffer with Number.mip
Optional Boolean
defines mipmap generation.
default tofalse
-
defAtt
this.defAtt(prgName, alocs);
prgName
prgName:String
specify program to get attribute location with prgName.alocs
Array[alocName...]
alocName
alocName:String
defines attribute location name with String.
-
att
this.att(atts);
atts
Array[{name, data, slice}...]
name
attName:String
defines attribute name with String.data
Array
defines attribute data with Array.slice
Number
defines length of attribute. ie 2 for vec2, 4 for vec4.
-
ibo
this.ibo(ibos);
ibos
Array[{name, data}...]
name
iboName:String
defines ibo name with String.data
Array
defines ibo data with Array.
-
defUni
this.defUni(prgName, ulocs);
prgName
prgName:String
specify program to get uniform location with prgName.ulocs
Array[ulocName...]
ulocName
ulocName:String
defines uniform location name with String.
after recompiled, running defUni is necessary.
-
uni
this.uni(prgName, unis);
prgName
prgName:String
specify program to get uniform location with prgName.unis
Array
can be combined- float, vec, int…
[{loc, data, type}...]
loc
ulocName:String
specify uniform location name with String.data
Array
defines uniform data with Array.type
String
defines uniforms type with String.
specifyf
(float,vec) ori
(int).
- texture
[{loc, data, rloc}...]
loc
ulocName:String
specify uniform location name with String.data
texName:String
specify texture name with Array.rloc
Optional ulocName:String
specify uniform location name with String.
for texture size (vec2).
- float, vec, int…
- draw
this.draw(prgName, atts, ibo, clear, buf, mode, drawArr);
prgName
prgName:String
specify program to get uniform location with prgName.atts
Array[{loc, att}...],
loc
alocName:String
specify attribute location.att
attName:String specify attribute for the attribute location.
ibo
iboName:String
specify ibo matches for atts.clear
Optional Boolean
defines clear canvas(or buffer) or not.
default istrue
.buf
Optionl bufName
specify target buffer name. falsy value to draw canvas.mode
Optional glDrawMode
defines drawmode with String.
default isTRIANGLES
.drawArr
Optional Boolean
defines drawmode with Boolean.
settrue
to usedrawArrays
otherwise it will executedrawElements
default isfalse
.
see index.html