gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix); ... createShader(gl.VERTEX_SHADER); ... var fragementShader=getShader(gl,"shader-fs");.
Skiptocontent
Allgists
BacktoGitHub
Signin
Signup
Sign in
Sign up
{{message}}
Instantlysharecode,notes,andsnippets.
elnaqah/gist:5049691
CreatedFeb27,2013
Star
0
Fork
0
Star
Code
Revisions
1
Embed
Whatwouldyouliketodo?
Embed
Embedthisgistinyourwebsite.
Share
Copysharablelinkforthisgist.
Clonevia
HTTPS
ClonewithGitorcheckoutwithSVNusingtherepository’swebaddress.
LearnmoreaboutcloneURLs
DownloadZIP
webgl_lec1addedanimation
Raw
gistfile1.txt
ThisfilecontainsbidirectionalUnicodetextthatmaybeinterpretedorcompileddifferentlythanwhatappearsbelow.Toreview,openthefileinaneditorthatrevealshiddenUnicodecharacters.
LearnmoreaboutbidirectionalUnicodecharacters
Showhiddencharacters
LearningWebGL
precisionmediumpfloat;
varyingvec4vColor;
voidmain(void)
{
gl_FragColor=vColor;
}
attributevec3aVertexPosition;
attributevec4aVertexColor;
uniformmat4uMVMatrix;
uniformmat4uPMatrix;
varyingvec4vColor;
voidmain(void)
{
gl_Position=uPMatrix*uMVMatrix*vec4(aVertexPosition,1.0);
vColor=aVertexColor;
}
varmvMatrix=mat4.create();
varpMatrix=mat4.create();
varmvMatrixStack=[];
functionmvPushMatrix()
{
varcopy=mat4.create();
mat4.set(mvMatrix,copy);
mvMatrixStack.push(copy);
}
functionmvPopMatrix()
{
if(mvMatrixStack.length==0){
throw"ya3ammeshpop";
}
mvMatrix=mvMatrixStack.pop();
}
functionsetUniforms()
{
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform,false,pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform,false,mvMatrix);
}
functiongetShader(gl,id)
{
varshaderScript=document.getElementById(id);
if(!shaderScript)
{
returnnull;
}
varstr="";
varscript=shaderScript.firstChild;
while(script){
if(script.nodeType==3)
{
str+=script.textContent;
}
script=script.nextSibling;
}
varshader;
if(shaderScript.type=="x-shader/x-fragment")
{
shader=gl.createShader(gl.FRAGMENT_SHADER);
}
elseif(shaderScript.type=="x-shader/x-vertex")
{
shader=gl.createShader(gl.VERTEX_SHADER);
}
else
{
returnnull;
}
gl.shaderSource(shader,str);
gl.compileShader(shader);
if(!gl.getShaderParameter(shader,gl.COMPILE_STATUS))
{
alert(gl.getShaderInfoLog(shader));
returnnull;
}
returnshader;
}
varshaderProgram;
vargl;
functioninitShaders()
{
varfragementShader=getShader(gl,"shader-fs");
varvertexShader=getShader(gl,"shader-vs");
shaderProgram=gl.createProgram();
gl.attachShader(shaderProgram,vertexShader);
gl.attachShader(shaderProgram,fragementShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))
{
alert("cloudnotinitialiseshaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute=gl.getAttribLocation(shaderProgram,"aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute=gl.getAttribLocation(shaderProgram,"aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform=gl.getUniformLocation(shaderProgram,"uPMatrix");
shaderProgram.mvMatrixUniform=gl.getUniformLocation(shaderProgram,"uMVMatrix");
}
functioninitGL(canvas)
{
try{
gl=canvas.getContext("experimental-webgl");
gl.viewportWidth=canvas.width;
gl.viewportHeight=canvas.height;
}
catch(e){}
if(!gl)
{
alert("mafeshwebgl");
}
}
vartriangleVertexPositionBuffer;
vartriangleVertexColorBuffer;
functioninitBuffer()
{
triangleVertexPositionBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
varvertices=[
0.0,1.0,0.0,
-1.0,-1.0,0.0,
1.0,-1.0,0.0
]
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(vertices),gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize=3;
triangleVertexPositionBuffer.numItems=3;
triangleVertexColorBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
varcolors=[
1.0,0.0,0.0,1.0,
0.0,1.0,0.0,1.0,
0.0,0.0,1.0,1.0
];
gl.bufferData(gl.ARRAY_BUFFER,newFloat32Array(colors),gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize=4;
triangleVertexColorBuffer.numItems=3;
}
functiondegree_to_redian(degree)
{
returndegree*Math.PI/180.0;
}
functiondrawScene()
{
gl.viewport(0,0,gl.viewportWidth,gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
mat4.perspective(45,gl.viewportWidth/gl.viewportHeight,0.1,100.0,pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix,[0.0,0.0,-7.0]);
mat4.rotate(mvMatrix,degree_to_redian(rTri),[1.0,1.0,0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,triangleVertexPositionBuffer.itemSize,gl.FLOAT,false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER,triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute,triangleVertexColorBuffer.itemSize,gl.FLOAT,false,0,0);
setUniforms();
gl.drawArrays(gl.TRIANGLES,0,triangleVertexPositionBuffer.numItems);
}
functionwebGLStart()
{
varcanvas=document.getElementById("canvas");
initGL(canvas);
initShaders();
initBuffer();
gl.clearColor(0.0,0.0,0.0,1.0);
gl.enable(gl.DEPTH_TEST)
//drawScene();
tick();
}
varrTri=0;
varlastTime=0;
functionanimate(){
vartimeNow=newDate().getTime();
if(lastTime!=0){
varelapsed=timeNow-lastTime;
rTri+=(90*elapsed)/1000.0;
}
lastTime=timeNow;
}
functiontick()
{
requestAnimFrame(tick);
drawScene();
animate();
}
Signupforfree
tojointhisconversationonGitHub.
Alreadyhaveanaccount?
Signintocomment
Youcan’tperformthatactionatthistime.
Yousignedinwithanothertaborwindow.Reloadtorefreshyoursession.
Yousignedoutinanothertaborwindow.Reloadtorefreshyoursession.
