webGL 基础学习备份

ikun不解释

已于 2023-05-08 00:04:01 修改

阅读量468

点赞数

分类专栏： webgl 文章标签： webgl

于 2023-05-07 23:52:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42309685/article/details/130549336

版权

webgl 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了WebGL的基础知识，包括如何获取canvas的WebGL上下文，清空颜色、深度和模板缓冲区，以及如何创建和使用顶点着色器和片元着色器来定义图形的渲染。示例代码展示了如何绘制一个点，并通过着色器设置其颜色和大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

webgl学习备份

设置画布颜色

const ctx = document.getElementById('canvas');   // 获取canvas DOM 节点
const gl = ctx.getContext('webgl');   // 获取webgl 对象

// 1. 清空颜色缓存
gl.clear(gl.COLOR_BUFFER_BIT);

// 2. 清空深度缓冲区
gl.clear(gl.DEPTH_BUFFER_BIT);

// 3. 清空模板缓冲区
gl.clear(gl.STENCIL_BUFFER_BIT);

// 4. 搭配使用
// 4.1 gl.clear(gl.COLOR_BUFFER_BIT) 与 gl.clearColor(r,g,b,a) 搭配使用
// 4.2 gl.clear(gl.DEPTH_BUFFER_BIT) 与 gl.clearDepth(1.0) 搭配使用
// 4.3 gl.clear(gl.STENCIL_BUFFER_BIT) 与 gl.clearStencil(0) 搭配使用

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

顶点着色器：顶点是指二维三维空间中的一个点，可以理解为一个坐标
片元着色器：片元可以理解为一个个像素

		// 封装着色器通用方法
        function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
            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);
            return program;
        }

绘制一个点

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

        // 创建着色器源码
        // 顶点着色器源码
        const VERTEX_SHADER_SOURCE = `
            void main(){
                gl_Position = vec4(1.0, 1.0, 1.0, 1.0); // vec4(x,y,z,w);
                gl_PointSize = 30.0;
            }
        `;
        // 片元着色器源码
        const FRAGMENT_SHADER_SOURCE = `
            void main(){
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        `;
        // 初始化着色器
        initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

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