【愚公系列】2023年12月 WEBGL专题-坐标系

愚公搬代码

发布于 2025-05-28 16:31:30

2170

🚀前言

坐标系是一个用于确定物体或点在空间中位置的图形系统。坐标系由两条相互垂直的线段组成，分别称为x轴和y轴，它们交叉于原点（0,0）处。通过在x轴和y轴上选择合适的点（坐标），可以描述出点或物体在平面上的位置。在三维空间中，通常会加上第三条垂直于x轴和y轴的z轴，从而形成三维坐标系。坐标系在数学、物理、计算机科学等领域中都具有重要的应用。

🚀一、坐标系

🔎1.canvas坐标系

Canvas坐标系是指在HTML5中，Canvas元素中所有图形的坐标系。Canvas坐标系的原点（0,0）在Canvas元素的左上角，x轴向右延伸，y轴向下延伸。例如，如果你想在Canvas元素中绘制一个圆形，你需要指定圆心的x和y坐标，这些坐标需要以Canvas坐标系中的值为准。

🔎2.webgl坐标系

WebGL坐标系是基于笛卡尔坐标系的，并使用右手坐标系。X轴指向右侧，Y轴指向上方，Z轴指向读者。原点位于屏幕中心。在WebGL中，可以使用透视投影或正交投影来定义视图。在透视投影中，远离观察者的对象比靠近观察者的对象更小。在正交投影中，所有对象都以相同比例缩放。

🔎3.案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #canvas{
      background: gray;
    }
    body::after{
      content: ' ';
      display: block;
      width: 1px;
      height: 400px;
      background: red;
      position: absolute;
      top: 0;
      left: 200px;
    }
    body::before{
      content: ' ';
      display: block;
      width: 400px;
      height: 1px;
      background: red;
      position: absolute;
      top: 200px;
      left: 0;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
  此浏览器不支持canvas
</canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 必须要存在 main 函数
    void main() {
      // 要绘制的点的坐标
      gl_Position = vec4(0.5,0.5,0.5,1.0);
      // 点的大小
      gl_PointSize = 30.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  gl.drawArrays(gl.POINTS, 0, 1);
</script>