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、調用繪制方法進行繪制。

 

  WebGL API

WebGL API指的就是gl=canvas.getContext('webgl')返回對象gl的一系列繪制渲染方法, GPU相比CPU最大的特點是並行計算，不過WebGL API都 進行了封裝，如果你想學習並行計算可以關注CUDA或OpenCL。

 

<!-- 頂點着色器源碼 -->
<script id="vertexShader" type="x-shader/x-vertex">
  void main() {
    //給內置變量gl_PointSize賦值像素大小
    gl_PointSize=20.0;
    //頂點位置，位於坐標原點
    gl_Position =vec4(0.0,0.0,0.0,1.0);
  }
</script>
<!-- 片元着色器源碼 -->
<script id="fragmentShader" type="x-shader/x-fragment">
  void main() {
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  }
</script>

把代碼放在script 標簽中獨立開來也是可行的。

//頂點着色器源碼
var vertexShaderSource = document.getElementById('vertexShader').innerText;
//片元着色器源碼
var fragShaderSource = document.getElementById('fragmentShader').innerText;
//初始化着色器
var program = initShader(gl,vertexShaderSource,fragShaderSource);

支持的數據類型

 

 

 參閱： https://www.khronos.org/registry/OpenGL/specs/es/2.0/GLSL_ES_Specification_1.00.pdf