《WebGL編程指南》筆記——1 WebGL入門

時間 2019-12-07

標籤 WebGL編程指南筆記 webgl 入門简体版

原文原文鏈接

本篇內容對應《WebGL編程指南》第一章概述，以及第二章canvas部分。
主要介紹webgl的歷史背景，以及重溫一下canvas的使用。

第一章：WEBGL概述

有一種專門用來開發3D圖形的語言，叫OpenGL，WebGL正是OpenGL的其中一個版本——OpenGL ES在瀏覽器端的實現。
WebGL在語法上和OpenGL沒有任何差異，除了在寫法上略有不一樣，基本能夠認爲WebGL就是OpenGL套了一個HTML／JavaScript的殼。
WebGL在瀏覽器中的實現方式是在Html中，經過JavaScript字符串編寫OpenGL的着色器，繪製到H5的canvas元素上。由於如今的瀏覽器大多都支持的webgl，canvas可以獲取webgl上下文，從而能夠調用webgl的方法完成圖形繪製。
OpenGl着色器，能夠理解爲用來定義圖形該如何繪製的方法，好比圖形應該在座標中什麼位置，什麼顏色等。
編寫着色器的語言叫作着色器語言（GLSL ES)。這個語言和C語言很類似，在JS中咱們用字符串做爲載體書寫GLSL ES。javascript

第二章：WEBGL入門

重溫canvas

用canvas畫一個矩形

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>

<script type="text/javascript">
  var canvas = document.getElementById('canvas') // 獲取canvas

  var ctx = canvas.getContext('2d') // 獲取上下文

  ctx.fillStyle = 'rgba(0,0,0,0.1)'
  ctx.fillRect(0, 0, 400, 400) // 先繪製一個以canvas原點爲起點，寬高等於canvas畫布寬高的矩形，看成背景
  ctx.fillStyle = 'rgba(0,0,255,1.0)'
  ctx.fillRect(120, 10, 150, 150) // 接着繪製一個藍色的矩形
</script>
</body>
</html>

能夠看出，使用canvas繪製矩形能夠分爲這麼幾步：html