用matrix类旋转平移缩放

最新推荐文章于 2024-01-29 11:30:43 发布

directx3d_beginner

最新推荐文章于 2024-01-29 11:30:43 发布

阅读量482

点赞数

分类专栏： webgl编程指南学习

本文链接：https://blog.csdn.net/directx3d_beginner/article/details/102467571

版权

webgl编程指南学习专栏收录该内容

38 篇文章 1 订阅

订阅专栏

<html>
<head>11</head>
<body>
<canvas id = "test" width = "200" height = "200">canvas </canvas>
<script src = "webgltest/cuon-matrix.js"></script>
<script>
//顶点着色器
var vertexShaderSource =
   'attribute vec4 a_Position;\n' +
   'uniform mat4 u_RMatrix;\n' +
   'uniform mat4 u_SMatrix;\n' +
    'void main() {\n' +
    'gl_Position = u_RMatrix * u_SMatrix * a_Position;\n'+
    '}\n';

//片元着色器
var fragmentShaderSource =
   'precision mediump float;\n' +
   'uniform vec4 u_FragColor;\n' +
    'void main() {\n' +
    'gl_FragColor = u_FragColor;\n'+ //设置颜色
    '}\n';

//创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source)
{
    //创建着色器对象
    var shader = gl.createShader(type);
    //提供数据源
    gl.shaderSource(shader,source);
    //编译着色器
    gl.compileShader(shader);
    //链接
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if(success)
    {
        return shader;
    }
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);

}
//将顶点着色器和像素着色器链接到一个着色程序
function createProgram(gl, vertexShader, fragmentShader)
{
    var program = gl.createProgram();
    gl.attachShader( program, vertexShader);
    gl.attachShader( program, fragmentShader);
    gl.linkProgram( program );
   var success = gl.getProgramParameter(program, gl.LINK_STATUS);
   if(success)
   {
       console.log("link right");
       return program;
   }
   console.log(gl.getProgramInfoLog(program));
   gl.deleteProgram(program);
}
   var canvas = document.getElementById("test");
   //创建webgl渲染上下文
   var gl = canvas.getContext("webgl");
   //var gl = WebGLUtils.setupWebGL(canvas);
   if(!gl)
   {
       console.log("wrong");
   }
   else
   {
       console.log("right");
   }
   //初始化着色器

   var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
   var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
   var program = createProgram(gl, vertexShader, fragmentShader);
   gl.useProgram(program);
   //创建顶点数组
   var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]);
   var numberVertices = 4;
   //创建缓冲区对象
   var vertexBuffer = gl.createBuffer();
   //将缓冲区对象绑定到目标
   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   //向绑定的缓冲区对象中写入数据
   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   //获取位置变量并传递顶点位置
   var thePosition = gl.getAttribLocation(program, 'a_Position');
   //将缓冲区对象分配给位置变量
   gl.vertexAttribPointer(thePosition, 2, gl.FLOAT, false, 0, 0 );
   //启动缓冲区
   gl.enableVertexAttribArray(thePosition);
   //获取颜色并设置颜色
   var theFragColor = gl.getUniformLocation(program, 'u_FragColor');
   gl.uniform4f(theFragColor, 1.0, 0.0,0.0,1.0);
   //将旋转数据传输给顶点着色器
   //转为弧度制
   var ANGLE = 20.0;
   var radian = Math.PI * ANGLE / 180.0;
   var cosB = Math.cos(radian);
   var sinB = Math.sin(radian);
   var tx = 0.2;
   //webgl矩阵（列主序）
   //旋转矩阵
   /*
   var RMatrix = new Float32Array([
       cosB, sinB, 0.0, 0.0,
       -sinB, cosB, 0.0, 0.0,
       0.0, 0.0, 1.0, 0.0,
       0.0, 0.0, 0.0, 1.0
   ]);*/

   var RMatrix = new Matrix4();
   RMatrix.setRotate(ANGLE, 0, 0, 1);
   RMatrix.translate( tx, 0, 0 );
   var uRMat = gl.getUniformLocation(program, 'u_RMatrix');
   //gl.uniformMatrix4fv(uRMat, false, RMatrix);
   gl.uniformMatrix4fv(uRMat, false, RMatrix.elements);
   /*
   //平移矩阵
   var TMatrix = new Float32Array([
       1.0, 0.0, 0.0, 0.0,
       0.0, 1.0, 0.0, 0.0,
       0.0, 0.0, 1.0, 0.0,
       0.5, 0.5, 0.0, 1.0
   ]);
   var uTMat = gl.getUniformLocation(program, 'u_TMatrix');
   gl.uniformMatrix4fv(uTMat, false, TMatrix);
   */
   //缩放矩阵
   var SMatrix = new Float32Array([
       0.5, 0.0, 0.0, 0.0,
       0.0, 0.5, 0.0, 0.0,
       0.0, 0.0, 1.0, 0.0,
       0.0, 0.0, 0.0, 1.0
   ]);
   var usMat = gl.getUniformLocation(program, 'u_SMatrix');
   gl.uniformMatrix4fv(usMat, false, SMatrix);
   //清除颜色
   gl.clearColor(0.0,0.0,0.0,1.0);
   gl.clear(gl.COLOR_BUFFER_BIT);
   //绘制点
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, numberVertices);

</script>
</body>
</html>

directx3d_beginner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用matrix类旋转平移缩放

<html><head>11</head><body><canvas id = "test" width = "200" height = "200">canvas </canvas><script src = "webgltest/cuon-matrix.js"></script><s...
复制链接

扫一扫