canvas 与 webGL , openGL

通常我们将 CANVAS 与 webGL 区分开 , 移动端和WEB端区分开

类似于这种关系:

 // 通过getElementById()方法获取canvas画布
 var c2dx=document.getElementById(‘c2dx‘);
 // 通过方法getContext()获取2d上下文
 var c=c2dx.getContext(‘2d‘);
     c.moveTo(0,0); //直线起点坐标
     c.lineTo(50,50); //直线第2个点坐标
     c.lineTo(0,100); //直线第3个点坐标
     c.stroke(); //把点连成直线绘制出来
 //--------------------------------------------------------------------
 // 通过getElementById()方法获取canvas画布
 var wglx=document.getElementById(‘webglxxx‘);
 // 通过方法getContext()获取WebGL上下文
 var gl=wglx.getContext(‘webgl‘);
     console.log(gl);

 

 let [canvas, webgl, opengl] = [‘2d’, ‘web端’, ‘移动端‘]

因为 webgl 通常用GPU的库来处理3D和加速, 所以定义会稍显专业, 但总共分四步骤:

点、线面 、 着色 、绘制。

1、let 3d基础 = [‘顶点位置‘, ‘面颜色定义‘]

2、初始化着色器 , 主要是创建点,创建面, 再引入点和面计算光源阴影,编译并渲染出来

3、创建场景并把 渲染的物体 关联到 具体场景,返回整体参数。

4、调用绘制方法进行绘制。

 

 
 

canvas 与 webGL , openGL

上一篇:[JSC2021 A~D + F]


下一篇:第一个web应用