js 判断支持webgl_WebGL入门教程01

点击蓝字，关注我们

AUT

WebGL

# CPC与GPU

CPU 中央处理器

GPU 图形处理器

# WebGL概念

WebGL (Web图形库) 是一种JavaScript API，用于在任何兼容的Web浏览器中呈现交互式3D和2D图形。WebGL程序由Javascript编写的句柄和OpenGL Shading Lanugage(GLSL) 编写的着色器代码组成。

要点：

1. 函数库

2. WEBGL是用来实现2d 3d 动画效果的

3. webgl 他是浏览器端识别的， 可以与canvas结合使用， 他是由GPU加速渲染的

4. webgl的代码是由javascript + GLSL组合而成

webgl就是绘制2d 、3d图形的一种技术

着色器：绘制图形的语言  类似c语言、c++语言

# WebGL可绘制的图元

1. 点

2. 线段

3. 三角形

# WebGL绘图流程

01

# 获取上下文对象

var gl = canvas.getContext('webgl');

02

# 初始化着色器

着色器语言：

    着色器分为顶点着色器和片元着色器。

    顶点着色器：用来描述顶点特征的程序

    片元着色器：进行逐片元处理过程如光照的程序

变量声明

着色器的变量声明方式——存储限定符

1. attribute变量：传输的是与顶点有关的数据

2. uniform变量：传输的是对于所有顶点都相关(或与顶点无关)的数据(全局变量)

3. textures变量：纹理(纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。)

4. Varying可变变量：

可变量是一种顶点着色器给片断着色器传值的方式，依照渲染的图元是点， 线还是三角形，顶点着色器中设置的可变量会在片断着色器运行中获取不同的插值。

GLSL ES数据类型

顶点着色器的内置变量

片元着色器的内置变量

03

# WebGL常用方法API

创建着色器

创建着色器：

gl.createShader(type):

type: gl.VERTEX_SHADER/gl.FRAGMENT_SHADER;

向着色器中添加资源：

gl.shaderSource(shader, source);

shader:  着色器

source: 添加的程序(字符串类型)

编译着色器代码：

gl.compileShader(shader)；

shader 要编译的着色器

创建程序

创建程序：

gl.createProgram();

绑定着色器程序：

gl.attachShader(program, shader);

program: 被插入的程序

shader：要绑定的着色器

连接着色器程序：

gl.linkProgram(program)；

# 代码案例

        void main(){

            gl_Position = vec4(0,0,0,0);

            gl_PointSize = 10.0;

        }

        void main(){

            gl_FragColor = vec4(0,0,0,1);

        }

        // 获取WebGL绘图上下文

        var canver = document.querySelector('#canvas')

        var gl = canver.getContext('webgl')

        // 判断浏览器是否支持webgl

        if (!gl) {

            alert('浏览器不支持')

        }

        // 创建着色器函数

        function createShader(gl, type, source) {

            // 创建着色器

            var shader = gl.createShader(type)

            // 向着色器中添加资源 shader:着色器 source:添加的程序(字符串类型)

            gl.shaderSource(shader, source)

            // 编译着色器代码 shader:要编译的着色器

            gl.compileShader(shader)

            // 判断着色器是否创建成功

            var success = gl.getShaderParameter(shader, gl.COMPLETE_STATUS)

            if (success) {

                // 成功返回着色器

                return shader

            }

            // 失败返回错误信息

            console.log(gl.getShaderInfoLog(shader));

        }

        // 获取着色器代码 

        var vetexStr = document.getElementById('vertex').innerText

        var fragmentStr = document.getElementById('fragment').innerText

        // 创建定点着色器

        var vetexShader = createShader(gl, gl.VERTEX_SHADER, vetexStr)

        // 创建片元着色器

        var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr)

        // 创建程序函数

        function createProgram(gl,vertexShader,fragmentShader) {

            // 创建程序

            var program = gl.createProgram()

            // 绑定着色器程序 program:插入的程序 shader:要绑定的着色器

            gl.attachShader(program,vertexShader)

            gl.attachShader(program,fragmentShader)

            // 连接着色器程序

            gl.linkProgram(program)

        }

        var program = createProgram(gl,vetexShader,fragmentShader)

        gl.useProgan(program)