webGL 基础学习备份

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

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

webgl学习备份

  1. 设置画布颜色
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) 搭配使用
  1. 着色器
    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;
        }
Created with Raphaël 2.3.0 创建顶点着色器 创建片元着色器 关联着色器和着色器源码 编辑着色器 创建progarm 关联着色器和 program 使用 program
  1. 绘制一个点
		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);
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值