"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();