webgl工作原理

webgl工作原理

"use strict";function main(){ var canvas = document.getElementById("c"); var gl = canvas.getContext("webgl"); if(!gl){ return; } //设置GLSL着色程序 var program = webglUtils.createProgramFromScripts(gl,["2d-vertex-shader","2d-fragment-shader"]); //找到顶点缓存的位置 var positionAttributeLocation = gl.getAttribLocation(program,"a_position"); //查找uniforms 位置 var matrixLocation = gl.getUniformLocation(program,"u_matrix"); //创建一个buffer缓冲 var positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer); setGeometry(gl); var translation = [200,150]; var angleInRadians=0; var scale=[1,1]; drawScene(); //设置ui webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width }); webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height}); webglLessonsUI.setupSlider("#angle", {slide: updateAngle, max: 360}); webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2}); webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2}); function updatePosition(index) { return function(event, ui) { translation[index] = ui.value; drawScene(); }; } function updateAngle(event, ui) { var angleInDegrees = 360 - ui.value; angleInRadians = angleInDegrees * Math.PI / 180; drawScene(); } function updateScale(index) { return function(event, ui) { scale[index] = ui.value; drawScene(); }; }//绘制场景 function drawScene(){ webglUtils.resizeCanvasToDisplaySize(gl.canvas); //告诉webgl怎么从剪裁空间转换到像素空间 gl.viewport(0,0, gl.canvas.width,gl.canvas.height); //清空 canvas gl.clear(gl.COLOR_BUFFER_BIT); //告诉webgl使用的程序 gl.useProgram(program); //告诉webgl从缓冲中获取数据给顶点着色器 gl.enableVertexAttribArray(positionAttributeLocation); //绑定到位置buffer缓冲 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); //告诉属性怎么从positionBuffer取数据 var size=2; //每次迭代运行提取两个数据单元 var type=gl.FLOAT; var normalize= false; var stride=0; var offset=0; gl.vertexAttribPointer(positionAttributeLocation,size,type,normalize,stride,offset); //计算matrix var matrix=m3.projection(gl.canvas.clientWidth,gl.canvas.clientHeight); matrix = m3.translate(matrix,translation[0],translation[1]); matrix = m3.rotate(matrix,angleInRadians); matrix = m3.scale(matrix,scale[0],scale[1]); //设置 matrix gl.uniformMatrix3fv(matrixLocation,false,matrix); //draw geometry var primitiveType = gl.TRIANGLES; var offset=0; var count=3; gl.drawArrays(primitiveType,offset,count); }}//定义一个三角形填充到缓冲里function setGeometry(gl){ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ 0,-100, 150,125, -175,100 ]),gl.STATIC_DRAW);}main();

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。