likes
comments
collection
share

一起来探索 WebGL 的魅力吧！🤩

作者站长头像
站长
· 阅读数 36

WebGL 是一项令人兴奋的技术，它赋予了网页浏览器强大的3D图形绘制能力。通过 WebGL，我们可以在浏览器中创建逼真的3D场景、动画和交互体验。本文将带你深入了解 WebGL 的基础知识，并通过简单的示例演示如何利用 WebGL 创建令人惊叹的图形效果，废话不多说，开搞！

一起来探索 WebGL 的魅力吧！🤩

什么是WebGL？

WebGL 是一种基于JavaScript的 图形渲染技术，它使用 HTML5 的 <canvas> 元素作为图形容器，并借助 WebGL API 来进行图形渲染。它的目标是将 硬件加速的3D图形能力 引入到网页浏览器中，使开发者能够创建逼真、流畅的图形和动画效果，而无需依赖额外的插件或扩展

一起来探索 WebGL 的魅力吧！🤩

WebGL的工作原理

WebGL 基于 图形管道 的概念，通过一系列的处理步骤将 3D图形数据 转化为 屏幕上的像素，下面让我们了解一下 WebGL 的工作原理

  • 顶点处理：在这个阶段，你可以对几何数据进行 平移、旋转和缩放 等操作，每个顶点都会经过处理，生成新的位置信息
  • 光栅化：光栅化是一个关键的步骤，它将处理后的几何数据转化为 屏幕上的像素，这决定了图形在屏幕上的位置和大小
  • 片段处理：在这个阶段，对光栅化后生成的片段进行处理，这包括 纹理应用、光照效果、深度测试 和 颜色插值 等操作
  • 像素操作：最后一个阶段是对最终像素进行处理，如 混合和抗锯齿 等

开始WebGL之旅

现在，让我们来编写一个简单的 WebGL 程序，以了解它的基本用法

一起来探索 WebGL 的魅力吧！🤩

我们将创建一个着色器程序，通过它来渲染一个彩色的三角形。首先，在你的 HTML 文件中创建一个 <canvas> 元素，用于显示图形，然后，使用 JavaScript 获取 <canvas> 元素的上下文（context），通过它来操作 WebGL

<!DOCTYPE html>
<html>
<head>
  <title>探索 WebGL 之旅</title>
  <style>
    body { margin: 0; }
    canvas { width: 100%; height: 100%; }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var gl = canvas.getContext("webgl");

    // 设置清空画布的颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 清空画布
    gl.clear(gl.COLOR_BUFFER_BIT);

    // 顶点着色器源码
    var vertexShaderSource = `
      attribute vec2 position;
      void main() {
        gl_Position = vec4(position, 0.0, 1.0);
      }
    `;
    
    // 片段着色器源码
    var fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    `;

    // 创建顶点着色器
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.compileShader(vertexShader);

    // 创建片段着色器
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    gl.compileShader(fragmentShader);

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

    // 定义顶点数据
    var vertices = [
      -0.5, -0.5,
      0.5, -0.5,
      0.0, 0.5
    ];

    // 创建缓冲区
    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

    // 设置顶点属性指针
    var positionAttributeLocation = gl.getAttribLocation(shaderProgram, "position");
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

    // 绘制三角形
    gl.drawArrays(gl.TRIANGLES, 0, 3);
  </script>
</body>
</html>

在上面的代码中，我们定义了 顶点着色器 和 片段着色器 的源码，顶点着色器负责处理 顶点的位置信息，片段着色器负责处理片段（像素）的 颜色信息，这两个着色器一起组成了 着色器程序，用来控制WebGL的渲染过程

在 顶点着色器 中，我们简单地将顶点的位置传递给内置变量 gl_Position，这样 WebGL 就知道如何在屏幕上绘制这些顶点

在 片段着色器 中，我们将颜色设置为红色（1.0, 0.0, 0.0, 1.0），表示绘制的图形将是红色的

通过创建顶点着色器和片段着色器，并将它们编译、链接到着色器程序中，我们能够实现自定义的图形渲染效果

一起来探索 WebGL 的魅力吧！🤩

结语

本文通过一个简单的示例介绍了WebGL的入门知识，并且了解了WebGL的工作原理，但这只是WebGL的冰山一角，我相信通过本文的抛砖引玉，一定会勾起你对它的兴趣，所以心动不如行动，赶快学起来吧！

都看到这里啦，如果本篇文章对你有帮助，希望能 点个赞👍 支持下啦，你们的支持才是我最大的动力！😘

一起来探索 WebGL 的魅力吧！🤩

转载自:https://juejin.cn/post/7242507636700299322
评论
请登录