Webgl学习系列-Webgl 入门

最新推荐文章于 2024-04-09 19:39:36 发布

宇宙☆空间站

最新推荐文章于 2024-04-09 19:39:36 发布

阅读量485

点赞数 3

分类专栏： Webgl&Three.js 文章标签： webgl 学习

本文链接：https://blog.csdn.net/weixin_42826790/article/details/137111151

版权

Webgl&Three.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Webgl学习系列
第二章 Webgl 入门

文章目录

一、最短的webgl程序
二、通过webgl绘制一个点
三、webgl三维坐标

一、最短的webgl程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')
  const gl = ctx.getContext('webgl')

  gl.clearColor(1.0,0.0,0.0,1.0) // red 1.0  green 0.0  blue 0.0 alpha 1.0
  gl.clear(gl.COLOR_BUFFER_BIT)
  //gl.clear 需要和 gl.clearColor 提到的函数搭配使用
  //gl.COLOR_BUFFER_BIT 清空颜色缓存;和 gl.clearColor(0.0,0.0,0.0,1.0)
  //gl.DEPTH_BUFFER_BIT 清空深度缓冲区;和 gl.clearDepth(1.0)
  //gl.STENCIL_BUFFER_BIT 清空模板缓冲区;和 gl.clearStencil(0)
</script>

二、通过webgl绘制一个点

什么是着色器

着色器就是让开发者自己去编写一段程序，用来代替固定渲染管线，来处理图像的渲染。(渲染可控)

在这里插入图片描述

const ctx = document.getElementById("canvas");
const gl = ctx.getContext("webgl");

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

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

/*
创建着色器
*/
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE); // 指定顶点着色器的源码
gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE); // 指定片元着色器的源码

// 编译着色器
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);

// 创建一个程序对象
const program = gl.createProgram();

gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

gl.linkProgram(program);
gl.useProgram(program);

// 创建着色器过程可封装成一个函数initShader，const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

/*
执行绘制
params:要绘制的图形是什么，从哪个开始，使用几个顶点;
*/
gl.drawArrays(gl.POINTS, 0, 1);
gl.drawArrays(gl.LINES, 0, 1); // 最少需要有两个点，
gl.drawArrays(gl.TRIANGLES, 0, 1); // 3个点