计算机图形学——实验二几何图形变换实验

weixin_50780569

1357人浏览 · 2024-07-31 16:08:54

weixin_50780569 · 2024-07-31 16:08:54 发布

实验内容

已知某三角形的三顶点坐标{0.0,1.0},{-1.0,-1.0},{1.0,-1.0}。绘制一个由上述顶点所描绘的三角形；对三角形进行下列的几何变换：首先使三角形沿着其中心的x轴，y轴方向缩小到原来的25%;然后绕中心旋转-90度；最后沿着x轴平移0.5个单位，绘制出变换后的结果。通过按键或者鼠标点击来控制变换的执行。
绘制一个彩色的正三棱锥，对三棱锥分别进行缩放、旋转和平移变换，绘制出变换后的结果。正三棱锥四个顶点坐标可以取 ( 0.0, 0.0, -1.0 ), ( 0.0, 0.942809, 0.333333 ), ( -0.816497, -0.471405, 0.333333 ), ( 0.816497, -0.471405, 0.333333 )。
通过摆放摄像机，绘制上题三棱锥的透视投影图，并使三棱锥旋转起来，通过按键来选择旋转轴（x轴，y轴或z轴）。

实验设计思路

任务1：总体和实验一中的绘制三角形变化不大，和之前的相比，多了变换矩阵。这里采用glMatrix的mat4里的相关功能，如生成平移矩阵mat4.translate()，生成旋转矩阵mat4.rotateX()，生成缩放矩阵mat4.scale()，矩阵乘法mat4.multiply()等来进行图形变换操作。首先创建一个单位矩阵modelMatrix，当变换时，modelMatrix左乘变换矩阵再将计算结果传入着色器中进行一次绘制即可得到变换后的图形。

glMatrix.mat4的说明文档

任务2：将任务1中二维的点改为三维的点，并修改索引和颜色，得到正三棱锥的数据。这里比前面多了视图矩阵和正交投影矩阵，因此在着色器中应当将mvpMatrix拆开成modelMatrix，visionMatrix,orthoMatrix，gl_Position的结果为orthoMatrix * visionMatrix * modelMatrix *vec4(position,1.0)。在着色器外分别计算出模型矩阵、视图矩阵、正交投影矩阵并传入着色器。

任务3：将任务2中的正交投影矩阵orthoMatrix改为透视投影矩阵perspectiveMatrix，其他差别不大。

实验结果

任务1

任务2

任务3

绕x轴旋转

绕y轴旋转

绕z轴旋转

实验代码

任务1

 // 获取WebGL上下文  
    const canvas = document.getElementById('webglCanvas');
    const gl = canvas.getContext('webgl');

    //编写Shader代码并编译  
    const vertexShaderSource = `  
    attribute vec2 position;  
    uniform mat4 mvpMatrix;  
    void main() {  
        gl_Position = mvpMatrix * vec4(position, 0.0, 1.0);  
    }  
`;

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    const fragmentShaderSource = `  
    precision mediump float;  
    void main() {  
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色  
    }  
`;

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    //创建并设置着色器程序
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    //初始化数据
    const vertices = new Float32Array([
      -1, -1,
      0, 1,
      1, -1
    ]);
    var mvpMatrix = glMatrix.mat4.create();

    // 创建顶点缓冲区  
    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    //传入顶点数据
    const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(positionAttributeLocation);

    //传入默认mvp矩阵数据 
    const mvpMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'mvpMatrix');
    gl.uniformMatrix4fv(mvpMatrixUniformLocation, false, mvpMatrix);

    //绘制初始图形
    gl.clearColor(0, 0, 0, 0.5)
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    //平移、旋转、缩放
    function rotate1() {
      let rotateMatrix = glMatrix.mat4.rotateZ(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 2);
      mvpMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, mvpMatrix);
      drawTriangle();
    }

    function translate1() {
      let translateMatrix = glMatrix.mat4.translate(glMatrix.mat4.create(), glMatrix.mat4.create(), [0.5, 0, 0]);
      mvpMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), translateMatrix, mvpMatrix);
      drawTriangle();
    }

    function scale1() {
      let scaleMatrix = glMatrix.mat4.scale(glMatrix.mat4.create(), glMatrix.mat4.create(), [0.25, 0.25, 1]);
      mvpMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), scaleMatrix, mvpMatrix);
      drawTriangle();
    }

    //绘制图形
    function drawTriangle() {
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.uniformMatrix4fv(mvpMatrixUniformLocation, false, mvpMatrix);
      gl.drawArrays(gl.TRIANGLES, 0, 3);
    }

任务2

// 获取WebGL上下文  
    const canvas = document.getElementById('webglCanvas');
    const gl = canvas.getContext('webgl');
    var transformMatrix = [];

    // 编写Shader代码并编译 
    const vertexShaderSource = `  
    attribute vec3 position; 
    attribute vec3 color; 

    uniform mat4 transformMatrix;
    uniform mat4 visionMatrix;
    uniform mat4 orthoMatrix;

    varying vec3 vColor; 
    
    void main() {  
        gl_Position =orthoMatrix* visionMatrix * transformMatrix * vec4(position, 1.0); 
        vColor = color; 
    }  
`;

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    const fragmentShaderSource = `  
    precision mediump float;  

    varying vec3 vColor;

    void main() {  
        gl_FragColor = vec4(vColor ,1.0); 
    }  
`;

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    //创建并设置着色器程序
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    //初始化数据
    const vertices = new Float32Array([
      0, 0, -1,
      0, 0.942809, 0.333333,
      -0.816497, -0.471405, 0.333333,
      0.816497, -0.471405, 0.333333
    ]);

    const indices = new Uint16Array([
      1, 2, 3,
      1, 2, 0,
      1, 3, 0,
      2, 3, 0,
    ]);

    const colors = new Float32Array([
      1, 0, 0,
      0, 1, 0,
      0, 0, 1,
      1, 1, 0,
    ])

    // 创建缓冲区并传入数据 
    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'position');
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(positionAttributeLocation);

    const indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

    const colorAttributeLocation = gl.getAttribLocation(shaderProgram, 'color');
    gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(colorAttributeLocation);

    //设置默认模型矩阵
    const modelMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'transformMatrix');
    var modelMatrix = glMatrix.mat4.create();
    gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrix);

    //设置视图矩阵
    const visionMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'visionMatrix');
    const eye = glMatrix.vec3.fromValues(0, 0, 1);
    const look = glMatrix.vec3.fromValues(0, 0, 0);
    const up = glMatrix.vec3.fromValues(0, 1, 0);
    const visionMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(), eye, look, up);
    gl.uniformMatrix4fv(visionMatrixUniformLocation, false, visionMatrix);

    //设置正交投影矩阵
    const orthoMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'orthoMatrix');
    const orthoMatrix = glMatrix.mat4.ortho(glMatrix.mat4.create(), -1, 1, -1, 1, -100, 100);
    gl.uniformMatrix4fv(orthoMatrixUniformLocation, false, orthoMatrix);

    //绘制初始图形
    gl.clearColor(0, 0, 0, 0.5);
    gl.enable(gl.DEPTH_TEST)
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

    //功能相关
    function rotateX() {
      let rotateMatrix = glMatrix.mat4.rotateX(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 2);
      modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
      drawTriangle();
    }

    function rotateY() {
      let rotateMatrix = glMatrix.mat4.rotateY(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 2);
      modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
      drawTriangle();
    }

    function rotateZ() {
      let rotateMatrix = glMatrix.mat4.rotateZ(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 2);
      modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
      drawTriangle();
    }

    function translate1() {
      let translateMatrix = glMatrix.mat4.translate(glMatrix.mat4.create(), glMatrix.mat4.create(), [0.5, 0, 0]);
      modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), translateMatrix, modelMatrix);
      drawTriangle();
    }

    function scale1() {
      let scaleMatrix = glMatrix.mat4.scale(glMatrix.mat4.create(), glMatrix.mat4.create(), [0.25, 0.25, 0.25]);
      modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), scaleMatrix, modelMatrix);
      drawTriangle();
    }

    function drawTriangle() {
      gl.clearColor(0, 0, 0, 0.5)
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrix);
      gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_SHORT, 0)
    }

任务3

 // 获取WebGL上下文  
    const canvas = document.getElementById('webglCanvas');
    const gl = canvas.getContext('webgl');

    // 初始化着色器  
    const vertexShaderSource = `  
    attribute vec3 a_Position;
    attribute vec3 a_Color;  

    uniform mat4 modelMatrix;
    uniform mat4 visionMatrix;
    uniform mat4 perspectiveMatrix;


    varying vec3 v_Color; 

    void main() {  
        gl_Position =perspectiveMatrix* visionMatrix * modelMatrix * vec4(a_Position, 1.0); 
        v_Color = a_Color; 
    }  
`;

    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    const fragmentShaderSource = `  
    precision mediump float;

    varying vec3 v_Color;

    void main() {  
        gl_FragColor = vec4(v_Color ,1.0); 
    }  
`;

    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

    //创建并设置着色器程序
    const shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    gl.useProgram(shaderProgram);

    //初始化数据
    const vertices = new Float32Array([
      0, 0, -1,
      0, 0.942809, 0.333333,
      -0.816497, -0.471405, 0.333333,
      0.816497, -0.471405, 0.333333
    ]);

    const indices = new Uint16Array([
      1, 2, 3,
      1, 2, 0,
      1, 3, 0,
      2, 3, 0,
    ]);

    const colors = new Float32Array([
      1, 0, 0,
      0, 1, 0,
      0, 0, 1,
      1, 1, 0,
    ])

    var t1, t2, t3 = null; //t1,t2,t3作为三种旋转的计时器

    // 传入数据  
    const vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    const positionAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_Position');
    gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(positionAttributeLocation);

    const indicesBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

    const colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);

    const colorAttributeLocation = gl.getAttribLocation(shaderProgram, 'a_Color');
    gl.vertexAttribPointer(colorAttributeLocation, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(colorAttributeLocation);

    //设置模型变换矩阵
    const modelMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'modelMatrix');
    var modelMatrix = glMatrix.mat4.create();
    gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrix);

    //设置视图变换矩阵
    const visionMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'visionMatrix');
    const eye = glMatrix.vec3.fromValues(1, 1, 2);
    const look = glMatrix.vec3.fromValues(1, 1, 0);
    const up = glMatrix.vec3.fromValues(0, 1, 0);
    const visionMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(), eye, look, up);
    gl.uniformMatrix4fv(visionMatrixUniformLocation, false, visionMatrix);

    //设置透视投影矩阵
    const perspectiveMatrixUniformLocation = gl.getUniformLocation(shaderProgram, 'perspectiveMatrix');
    const perspectiveMatrix = glMatrix.mat4.perspective(glMatrix.mat4.create(), Math.PI / 2, 1 / 1, 1, -100);
    gl.uniformMatrix4fv(perspectiveMatrixUniformLocation, false, perspectiveMatrix);


    gl.clearColor(0, 0, 0, 0.5);
    gl.enable(gl.DEPTH_TEST)
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_SHORT, 0);

    //功能相关
    function rotateX() {
      clearInterval(t1);
      clearInterval(t2);
      clearInterval(t3);
      t1 = setInterval(function () {
        let rotateMatrix = glMatrix.mat4.rotateX(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 200);
        modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
        drawTriangle();
      }, 10)

    }

    function rotateY() {
      clearInterval(t1);
      clearInterval(t2);
      clearInterval(t3);
      t2 = setInterval(function () {
        let rotateMatrix = glMatrix.mat4.rotateY(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 200);
        modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
        drawTriangle();
      }, 10)
    }

    function rotateZ() {
      clearInterval(t1);
      clearInterval(t2);
      clearInterval(t3);
      t3 = setInterval(function () {
        let rotateMatrix = glMatrix.mat4.rotateZ(glMatrix.mat4.create(), glMatrix.mat4.create(), -Math.PI / 200);
        modelMatrix = glMatrix.mat4.multiply(glMatrix.mat4.create(), rotateMatrix, modelMatrix);
        drawTriangle();
      }, 10)
    }

    function drawTriangle() {
      gl.clear(gl.COLOR_BUFFER_BIT);

      gl.uniformMatrix4fv(modelMatrixUniformLocation, false, modelMatrix);
      gl.drawElements(gl.TRIANGLES, 12, gl.UNSIGNED_SHORT, 0)
    }

DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

机器人项目方案前置评审清单：定方案前先问清 5 个问题

接口文档不要只写正常流程，至少要补充异常状态、恢复动作、责任归属和记录证据。

DAMO开发者矩阵

20_项目实战六_企业文档智能检索平台_LangSmith监控_权限管控_数据看板

前面我们已经做过个人知识库问答助手、客服机器人、SQL 查询助手、代码审查 Agent 和多 Agent 日报系统。这些项目解决的是单点能力。多个部门都要上传文档。不同用户只能看自己有权限的文档。支持 PDF、Word、Markdown、网页、内部 Wiki。文档更新后要增量入库。用户提问时要返回答案和引用来源。管理员要看到 QPS、延迟、Token 消耗、用户活跃度。出问题时要能追踪每一次检索、