透视投影

最新推荐文章于 2019-11-24 12:20:34 发布

directx3d_beginner

最新推荐文章于 2019-11-24 12:20:34 发布

阅读量97

点赞数

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

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

版权

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' +
    'attribute vec4 a_Color;\n' +
   'uniform mat4 u_ModelViewMatrix;\n' +
   'uniform mat4 u_ProjMatrix;\n' +
    'varying vec4 v_Color;\n' +     //varying变量
    'void main() {\n' +
    //'gl_Position = u_ModelViewMatrix * a_Position;\n'+ //设置坐标
    'gl_Position = u_ProjMatrix *u_ModelViewMatrix * a_Position;\n'+ //设置坐标
    'v_Color = a_Color;\n' + //将数据传给片元着色器
    '}\n';

//片元着色器
var fragmentShaderSource =
    'precision mediump float;\n' +
    'varying vec4 v_Color;\n' +     //varying变量
    'void main() {\n' +
    'gl_FragColor = v_Color;\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.0, 0.5, 1.0,0.0, 0.0, 0.1,      //第一个点
    -0.5, -0.5, 0.0,1.0, 0.0,0.3,    //第二个点
    0.5, -0.5, 0.0, 0.0, 1.0,0.5,    //第三个点
    ]);
    var numberVertices = 3;
    //创建缓冲区对象
    var vertexBuffer = gl.createBuffer();
    //将缓冲区对象绑定到目标
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    //向绑定的缓冲区对象中写入数据
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var FSIZE = vertices.BYTES_PER_ELEMENT;
    //获取位置变量并传递顶点位置
    var thePosition = gl.getAttribLocation(program, 'a_Position');
    //将缓冲区对象分配给位置变量
    gl.vertexAttribPointer(thePosition, 2, gl.FLOAT, false, FSIZE * 6, 0 );
    //启动缓冲区
    gl.enableVertexAttribArray(thePosition);

    var theColor = gl.getAttribLocation(program, 'a_Color');
    gl.vertexAttribPointer(theColor, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 2 );
    gl.enableVertexAttribArray(theColor);

   //设置世界坐标系
   var modelMatrix = new Matrix4();
   modelMatrix.setRotate(30.0,0,0,1);
   //设置视点、视线和上方向
   var viewMatrix = new Matrix4();
   viewMatrix.setLookAt(0, 0, 5, 0, 0, -100, 0, 1, 0);
   //两个矩阵相乘
   var modelViewMatrix = viewMatrix.multiply(modelMatrix);
   //获取世界坐标系矩阵和摄像机矩阵
   var u_ViewMatrix = gl.getUniformLocation(program, 'u_ModelViewMatrix');
   //将视图矩阵传给u_ViewMatrix变量
   gl.uniformMatrix4fv(u_ViewMatrix, false, modelViewMatrix.elements);
   //投影矩阵
   var projMatrix = new Matrix4();
   var g_near = 1.0, g_far = 100.0;
   projMatrix.setPerspective(30, canvas.width / canvas.height,g_near, g_far);
   //获取投影矩阵
   var u_ProjMatrix = gl.getUniformLocation(program, 'u_ProjMatrix');
   //将投影矩阵传给u_ProjMatrix变量
   gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
    //清除颜色
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    //绘制点
     gl.drawArrays(gl.TRIANGLES, 0, numberVertices);

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

directx3d_beginner

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
透视投影

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

扫一扫