9.变换之平移

愿你出走半生,归来仍是少年

        通过顶点着色器实现图形的整体平移。

1.知识点

1.1.齐次坐标

        在GLSL 中Vec4进行坐标表达时，作为齐次坐标(x,y,z,w).当w=1时，这个vec4可以表达一个点的三维坐标。在进行平移时，应保证偏移量的W为0。

1.2矢量相加运算

        在GLSL中提供了矢量相加运算，在进行平移时可通过矢量相加，进行图形的整体平移。

2.代码

 
<template>
 
    <div class="demo_main">
 
        <canvas id="canvas">canvas>
    div>
template>
 
<style scoped>
 
    #canvas {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: blue;
    }
 
    .demo_main {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
style>

3.效果