【WebGL】一、画布创建和着色器基本操作及封装

zmsup

已于 2023-07-03 17:18:58 修改

阅读量1.4k

点赞数

分类专栏： WebGL 文章标签： webgl 着色器 vue

于 2023-07-01 16:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_44431812/article/details/131491735

版权

WebGL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、画布创建和着色器基本操作及封装

一、基本信息
- 1、WebGL简介
- 2、WebGL的优势
二、基本操作
三、着色器基本操作
三、WebGL组件化绘制流程

一、基本信息

1、WebGL简介

webgl是一种3D绘图协议，衍生于 OpenGL ES2.0，可以结合Html5 和 JavaScript 在网页上绘制和渲染二/三维图形

2、WebGL的优势

●内嵌在浏览器中，不需要安装任何插件即可运行
●只需要一个文本编辑器和浏览器，就可以编写三维图形程序
●学习和使用比较简单

二、基本操作

1、画布创建

<body>
    <canvas id="canvas" width="400" height="400"/>
</body>
</html>
<script type="text/javascript">
    const stx=document.getElementById("canvas");
    const gl = stx.getContext("webgl");
</script>

2、clearColor—清空颜色

gl.clearColor(r,g,b,a)指定清空的颜色，接收四个参数取值区间为( 0.0~1.0)

gl.clearColor(1.0,0.0,0.0,1.0);

3、clear—清空canvas

gl.clear(buffer)

●gl.clear(gl.COLOR_BUFFER_BIT) 清空颜色缓存 == glclearColor(0.0,0.0,0.0,1.0)
●gl.clear(gl.DEPTH_BUFFER_BIT) 清空深度缓冲区 == glclearDepth(1.0)
●gl.clear(gl.STENCIL_BUFFER_BIT) 清空模板缓冲区 == gl.clearStencil(0)

三、着色器基本操作

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

顶点着色器：

片元着色器：

JavaScript 读取相关着色器信息，传递给 webgl并进行使用

1、顶点着色器

//1.顶点着色器源码
const VERTEX_SHADER_SOURCE = `
// 必须存在 main 函数
void main() {
    //点坐标所绘制的位置
    //gl_Position vec4(0.0, 0.0, 0.0, 1.0)  x , y , z , w其次坐标(x/w , y/w , z/w)
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    //点的大小
    gl_PointSize = 10.0;
}`;
console.log('VERTEX_SHADER_SOURCE',VERTEX_SHADER_SOURCE);
//创建着色器
const vertexSharder=gl.createShader(gl.VERTEX_SHADER);
//指定顶点着色器的源码
gl.shaderSource(vertexSharder,VERTEX_SHADER_SOURCE);
//编译着色器
gl.compileShader(vertexSharder);

2、片元着色器

  //2.片元着色器源码
    const FRAGMENT_SHADER_SOURCE = `
    // 必须存在 main 函数
    void main(){
        //片的颜色
        //gl_FragColor vec4(1.0, 0.0, 0.0, 1.0)  x , y , z , a
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;
    //创建着色器
    const fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
    //指定片元着色器的源码
    gl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE);
    //编译着色器
    gl.compileShader(fragmentShader);

3、程序对象

//创建一个程序对象
    const program = gl.createProgram();
    //传入程序对象，着色器
    gl.attachShader(program, vertexSharder);
    gl.attachShader(program, fragmentShader);

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

三、WebGL组件化绘制流程

在这里插入图片描述

PS：严格注意【分号】的使用！否则不会生效
代码展示：

index.html主体文件

<body>
    <canvas id="canvas" width="400" height="400"></canvas>
</body>

<script type="text/javascript">
    const ctx = document.getElementById("canvas");
    const gl = ctx.getContext("webgl");
    // gl.clearColor(1.0,0.0,0.0,1.0);
    // gl.clear(gl.COLOR_BUFFER_BIT)

    //1.顶点着色器源码
    const VERTEX_SHADER_SOURCE = `
    // 必须存在 main 函数
    void main() {
        //点坐标所绘制的位置
        //gl_Position vec4(0.0, 0.0, 0.0, 1.0)  x , y , z , w其次坐标(x/w , y/w , z/w)
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        //点的大小
        gl_PointSize = 10.0;
    }`;
    //2.片元着色器源码
    const FRAGMENT_SHADER_SOURCE = `
    // 必须存在 main 函数
    void main(){
        //片的颜色
        //gl_FragColor vec4(1.0, 0.0, 0.0, 1.0)  x , y , z , a
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }`;
    const program = initShader(gl,VERTEX_SHADER_SOURCE,FRAGMENT_SHADER_SOURCE);
    //执行绘制
    //点 要绘制的图形， 从哪个开始， 使用几个顶点
    gl.drawArrays(gl.POINTS,0, 1);
</script>

index.js组件文件

 -function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
  //创建着色器
  const vertexSharder = gl.createShader(gl.VERTEX_SHADER);
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  //指定着色器的源码
  gl.shaderSource(vertexSharder, VERTEX_SHADER_SOURCE);
  gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE);
  //编译着色器
  gl.compileShader(vertexSharder);
  gl.compileShader(fragmentShader);

  //创建一个程序对象
  const program = gl.createProgram();
  //传入程序对象，着色器
  gl.attachShader(program, vertexSharder);
  gl.attachShader(program, fragmentShader);

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