webgl （原生）基礎入門指南一

來看這篇文章的同學一定是被近來的3d場景效果所震撼，抱著『這tm怎麼做的！』的來心態來學習webgl的吧。

也行你已經有threejs或其他3d場景開發框架的使用經驗，卻不知道webgl原生到底怎麼寫。本系列將從最簡單最基礎的原生api入手，手把手教你寫webgl

同二維場景一樣，我們需要乙個畫布來繪製，在html中建立乙個 canvas 元素。**如下：

// index.html

start() 函式將會在文件載入完成之後被呼叫。它的任務是設定 webgl 上下文並開始渲染內容。

// index.js
function start()

function initwebgl(canvas) 
catch(e) {}
// 如果沒有gl上下文，馬上放棄
if (!gl) 
return gl;
}

getcontext('context 引數')返回引數支援的上下文，如果引數無效，則返回null。我們在畫二維canvas的時候才用的是.getcontext('2d')，返回 canvasrenderingcontext2d 物件 ;三維卻並不是想當然的'3d'而是canvas.getcontext("webgl")或者canvas.getcontext("experimental-webgl")，返回乙個webglrenderingcontext 物件。不同的瀏覽器核心支援的引數不同，具體如下：

畫過canvas的親應該都會使用乙個顏色填充來清理幀畫面。webgl同意需要這樣乙個清理函式在繪製下一畫面的時候。webgl才用rgba的四色系統來定義顏色。與我們平時所用的顏色系統不一樣的是，rgba四個分量使用0.0~0.1之間的數值來表示。前三個分量表示三原色的飽和度，最後乙個表示不透明度。

值得一提的是，webgl計算都是才用浮點計算，所以數值一般1寫為1.0,數值 0 寫為0.0

這裡我們需要進行四個初始化步驟

設定清除顏色(藍色，不透明)

gl.clearcolor(0.0, 1.0, 1.0, 1.0);

深度清理

gl.cleardepth(1.0);

開啟「深度測試」, z-快取

gl.enable(gl.depth_test);

設定深度測試，近的物體遮擋遠的物體

gl.depthfunc(gl.lequal);

webgl （原生）基礎入門指南一

webgl （原生）基礎入門指南二

Docker零基礎入門指南一 Docker介紹

JBPM入門指南一

webgl （原生）基礎入門指南 一

webgl （原生）基礎入門指南 二

Docker零基礎入門指南 一 Docker介紹

JBPM入門指南 一

相關推薦

webgl （原生）基礎入門指南一

webgl （原生）基礎入門指南二

Docker零基礎入門指南一 Docker介紹

JBPM入門指南一