WebGL（一）从最简单的代码认识WebGL

最新推荐文章于 2023-07-26 09:52:35 发布

from_the_star

最新推荐文章于 2023-07-26 09:52:35 发布

阅读量583

点赞数

分类专栏： webgl

本文链接：https://blog.csdn.net/from_the_star/article/details/105265085

版权

本文介绍了WebGL的基本运行流程和着色器的概念，包括OpenGL ES的简单介绍，如基本类型、对象类型和内置变量。重点讲解了顶点着色器和片元着色器的作用，并详细阐述了它们各自的内置变量。此外，还提到了存储限定词和初始化着色器的过程，帮助读者从实践中认识WebGL。

摘要由CSDN通过智能技术生成

本节代码在链接的ch02文件夹
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Draw a point (1)</title>
  </head>

  <body onload="main()">
    <canvas id="webgl" width="400" height="400">
    Please use a browser that supports "canvas"
    </canvas>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="HelloPoint1.js"></script>
  </body>
</html>

HelloPoint1.js

// HelloPoint1.js (c) 2012 matsuda
// 顶点着色器
var VSHADER_SOURCE = 
  'void main() {\n' +
  '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // 设置坐标
  '  gl_PointSize = 10.0;\n' +                    // 设置尺寸
  '}\n';

// 片元着色器
var FSHADER_SOURCE =
  'void main() {\n' +
  '  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' + // 设置颜色
  '}\n';

//主函数
function main() {
  // 获取canvas元素
  var canvas = document.getElementById('webgl');

  // 获取WebGL绘图上下文
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }

  //初始化着色器
 // initShaders函数是cuon-utils.js中创建的，并不是webgl中原生的
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }

  // 设置Canvas背景色
  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  // 清空Canvas
  gl.clear(gl.COLOR_BUFFER_BIT);

  // 绘制一个点
  gl.drawArrays(gl.POINTS, 0, 1);
}