WebGL实现简单滤镜

1. WebGL介绍

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定。

2. WebGL、OpenGL、OpenGL ES 三者的关系

WebGL实现简单滤镜_第1张图片

3. WebGL 基础介绍

const webgl = document.getElementById("webGl-layer").getContext("webgl");

4. 基本原理

  • 首先使用webgl 纹理绘制图片

这里如果参照 https://webglfundamentals.org...

  • 绘制过程中使用片段做着色器对其 rgb 值进行修改

5. 具体实现

WebGL实现简单滤镜_第2张图片




    
    VertexBuffer



你可能感兴趣的:(webgl,滤镜,javascript,html)