学习WebGl基础知识(二)

学习目标:

  • 掌握WebGl基础知识

学习内容:

创建一个Webgl程序

  1. 创建三维上下文对象
  2. 创建顶点着色器和片元着色器
  3. 创建和编译顶点着色器和片元着色器
  4. 创建着色器程序对象
  5. 绘制图元

创建一个Webgl程序

1.第一步获取画布,创建三维上下文对象

javascript 复制代码
<canvas class="canvas" width="500" height="500"></canvas>

<script>
    const canvas = document.querySelector('.canvas')
    const gl = canvas.getContext('webgl')
</script>

2.第二步创建顶点着色器和片元着色器

顶点着色器和片元着色器(两种方法,一种就是下面这样在script标签内通过type属性创建,第二种就是通过js的模版字符串创建)

方法一:

javascript 复制代码
<!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
        attribute vec2 aPos;
        attribute vec2 aPos1;
        void main(){
            gl_PointSize = 10.0;
            vec2 newPos = aPos + aPos1;
            gl_Position = vec4(newPos, 0.0, 1.0);
        }
        </script>
    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
        </script>
        
<script>
// 获取着色器源码
        const vertexSource = document.getElementById('vertex-shader').innerText
        const fragmentSource = document.getElementById('fragment-shader').innerText
</script>

方法二:

javascript 复制代码
<script>
// 定义顶点着色器
const vertexShaderSource = `
    attribute vec2 position;
        void main(){
            gl_Position = vec4(position, 0.0, 1.0);
        }
`
// 定义片元着色器
const fragmentShaderSource = `
    void main(){
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`
</script>
  • attribute vec2 position;:声明了一个名为 position 的顶点属性,它是一个二维向量。
  • void main(){...}:顶点着色器的主函数,计算每个顶点的最终位置。
  • gl_Position = vec4(position, 0.0,1.0);:将顶点属性 position赋值给gl_Position,这是一个四维向量,表示顶点的最终位置。vec4(position, 0.0, 1.0)表示在二维空间中,顶点的z值为0.0,w值为1.0。
  • gl_FragColor = vec4(1.0,0.0,00,1.0);:将片元的颜色设置为红色,使用 vec4表示颜色,RGBA 分别为(1.0,0.0, 0.0, 1.0)。

3.第三步创建和编译顶点着色器和片元着色器

javascript 复制代码
// 创建顶点着色器对象和片元着色器对象
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
// 绑定着色器源码到对应着色器对象上
gl.shaderSource(vertexShader, vertexSource)
gl.shaderSource(fragmentShader, fragmentSource)
// 编译着色器源码
gl.compileShader(vertexShader)
gl.compileShader(fragmentShader)
  • gl.createShader(gl.VERTEX_SHADER);:创建一个顶点着色器对象。
  • gl.shaderSource(vertexShader, vertexShaderSource);:将顶点着色器源码绑定到顶点着色器对象。
  • gl.compileShader(vertexShader);:编译顶点着色器。

4.第四步创建着色器程序对象

javascript 复制代码
// 创建程序对象
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program);
gl.useProgram(program);
  • gl.createProgram();:创建一个着色器程序对象。
  • gl.attachShader(program, vertexShader);:将顶点着色器附加到着色器程序对象。
  • gl.attachShader(program, fragmentShader);:将片元着色器附加到着色器程序对象。
  • gl.linkProgram(program);:链接着色器程序对象,将顶点着色器和片元着色器链接成一个完整的可执行程序。
  • gl.useProgram(program);:告诉 WebGL使用这个着色器程序对象作为当前的渲染程序。

5.第五步绘制图元

javascript 复制代码
// 绘制图元
gl.drawArrays(gl.POINTS, 0, 1)
  • gl.drawArrays(gl.POINTS, 0, 1);:从当前绑定的缓冲区中提取数据,根据指定的绘制模式进行绘制
  • gl.POINTS:指定绘制图元类型为一个点
  • 0:从顶点数组的第一个点开始绘制
  • 1:绘制一个点

运行结果

完整代码

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个WebGL程序</title>
    <style>
        canvas{
            border: 1px solid #ccc
        }
    </style>
</head>
<body>
    <canvas class="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
        void main(){
            gl_PointSize = 10.0;
            gl_Position = vec4(0.5, 0.0, 0.0, 1.0);
        }
        </script>
    <!-- 片段着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
        void main(){
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
        </script>
    <script>
        const canvas = document.querySelector('.canvas')
        const gl = canvas.getContext('webgl')
        // 创建顶点着色器和片元着色器
        const vertexShader = gl.createShader(gl.VERTEX_SHADER)
        const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
        // 获取着色器源码
        const vertexSource = document.getElementById('vertex-shader').innerText
        const fragmentSource = document.getElementById('fragment-shader').innerText
        // 绑定着色器源码
        gl.shaderSource(vertexShader, vertexSource)
        gl.shaderSource(fragmentShader, fragmentSource)
        // 编译着色器源码
        gl.compileShader(vertexShader)
        gl.compileShader(fragmentShader)
        // 创建程序对象
        const program = gl.createProgram()
        gl.attachShader(program, vertexShader)
        gl.attachShader(program, fragmentShader)
        gl.linkProgram(program);
        gl.useProgram(program);
        // 绘制图元
        gl.drawArrays(gl.POINTS, 0, 1)
    </script>
</body>
</html>

总结

本篇文章讲解了如何通过WebGL绘制一个最基础的点,后续文章会持续更新。

相关推荐
坊钰25 分钟前
【Java 数据结构】时间和空间复杂度
java·开发语言·数据结构·学习·算法
pq113_625 分钟前
ftdi_sio应用学习笔记 4 - I2C
笔记·学习·linux驱动·ftdi_sio
knoci2 小时前
【Go】-go中的锁机制
后端·学习·golang
快乐飒男2 小时前
Linux基础05
linux·笔记·学习
小彭努力中2 小时前
141. Sprite标签(Canvas作为贴图)
前端·深度学习·3d·webgl·three.js
山山而川粤2 小时前
大连环保公益管理系统|Java|SSM|Vue| 前后端分离
java·开发语言·后端·学习·mysql
yuwinter3 小时前
鸿蒙HarmonyOS学习笔记(1)
学习·华为·harmonyos
MC何失眠3 小时前
泷羽sec-----shell编程(完结)
linux·学习·网络安全
键盘敲没电5 小时前
【iOS】知乎日报总结
学习·ios·objective-c·xcode
慕卿扬5 小时前
基于python的机器学习(四)—— 聚类(一)
笔记·python·学习·机器学习·聚类