初始WebGL

最新推荐文章于 2024-09-08 10:30:27 发布

啥也不会的毛不会

最新推荐文章于 2024-09-08 10:30:27 发布

阅读量153

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/mhc20201554114/article/details/126819902

版权

本文介绍了WebGL的基础概念，如光栅、像素和帧缓存，以及它与CPU和GPU的关系。重点讲解了WebGL如何作为OpenGL子集在Web上实现3D绘图，包括创建WebGL上下文、着色器编程和数据操作。通过实例展示了如何创建3D图形和使用WebGL进行硬件加速渲染。

摘要由CSDN通过智能技术生成

WebGL是什么

光栅: 几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。像素: 一个像素对应图像上的一个点它通常保存图像上的某个具体位置的颜色等信息。帧缓存: 在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。 CPU: 中央处理单元，负责逻辑计算。 GPU: 图形处理单元，负责图形计算。由于cpu串行处理，因此在计算图形时并不好用，因为图形计算要计算大量的简单的计算。而GPU由大量的小运算单元构成，每个运算单元只负责处理很简单的计算，且彼此独立，因此所有计算可以并行处理，有利于进行图形计算。

WebGL是OpenGL的子集，是OpenGL在web端的实现。OpenGL是图形渲染引擎。 WebGL是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，通过它Web开发人员可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型.

使用WebGL要做什么

创建WebGL上下文
创建WebGL Program
将数据存入缓冲区
将缓冲区数据读取到GPU
GPU执行WebGL程序，输出结果

创建WebGL上下文

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

function create3DContext( canvas, options) {
    const names = ['webgt', 'exper imental-webgt', 'webkit-3d', ' moz-webgL'];
    if(options.webgl2)names.unshift('webgl2');
    let context = null;
    for(let ii = 0; ii < names. length; ++ii) {
        try {
            context = canvas . getContext(names[ii], options );
        } catch (e) {
            //no-empty
        }
        if(context) {
            break;
        }
    }
    return context;
}

着色器————1.vertex shadow 用于处理图形轮廓

attribute vec2 position; 
void main() {
    gL_PointSize = 1.0;
    gl_Position = vec4( position, 1.0, 1.0);
}

着色器————2.Fragment shadow 处理完轮廓后将点颜色映射

precision mediump float ; 
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}

const vertexShader = gl.createShader(g.VERTEX_SHADER) ;
gl.shaderSource(vertexShader,vertex);
gl.compileShader (vertexShader);
const fragmentShader = gl.createShader( gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragment);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader( program, vertexShader );
gl.attachShader ( program, fragmentShader ); 
gl.linkProgram( program );
gl.useProgram( program);

将数据存入缓存区

const bufferId = gl.createBuffer();
gl.bindBuffer(gL.ARRAY_BUFFER, bufferId);
gl. bufferData(gL.ARRAY_BUFFER,points, gL.STATIC_DRAW);

将缓冲区数据读取到GPU

const vPosition = gl.getAttribLocation(program,'position'); //获取顶点着色器中的position变量的地址
gl.vertexAttribPointer(vPosition, 2, gL.FLOAT, false, 0, 0); //给变量设置长度和类型
gl.enableVertexAttribArray(vPosition); //激活这个变量