国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webgl （原生）基礎(chǔ)入門指南【一】

JerryC / 1245人閱讀

摘要：本系列將從最簡單最基礎(chǔ)的原生入手，手把手教你寫準(zhǔn)備上下文同二維場景一樣，我們需要一個畫布來繪制，在中建立一個元素。前三個分量表示三原色的飽和度，最后一個表示不透明度。

來看這篇文章的同學(xué)一定是被近來的3D場景效果所震撼，抱著‘這TM怎么做的！’的來心態(tài)來學(xué)習(xí)webgl的吧。
也行你已經(jīng)有threejs或其他3d場景開發(fā)框架的使用經(jīng)驗，卻不知道webgl原生到底怎么寫。本系列將從最簡單最基礎(chǔ)的原生API入手，手把手教你寫webgl
準(zhǔn)備webgl上下文

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

// index.html



  
  
  Webgl  Hello world!

start() 函數(shù)將會在文檔加載完成之后被調(diào)用。它的任務(wù)是設(shè)置 WebGL 上下文并開始渲染內(nèi)容。

// index.js
function start() {
  var canvas = document.getElementById("main");
  // 初始化 WebGL 上下文
  var gl = initWebGL(canvas);
  // 開始渲染
  ......
}
function initWebGL(canvas) {
  // 創(chuàng)建全局變量
  var gl = null;
  
  try {
    // 嘗試獲取標(biāo)準(zhǔn)上下文，如果失敗，回退到試驗性上下文
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  }
  catch(e) {}
  
  // 如果沒有GL上下文，馬上放棄
  if (!gl) {
    alert("WebGL初始化失敗，可能是因為您的瀏覽器不支持。");
    gl = null;
  }
  return gl;
}

getContext("context 參數(shù)") 返回參數(shù)支持的上下文，如果參數(shù)無效，則返回 null 。我們在畫二維canvas的時候才用的是.getContext("2d")，返回 CanvasRenderingContext2D 對象 ;三維卻并不是想當(dāng)然的"3d"而是canvas.getContext("webgl") 或者 canvas.getContext("experimental-webgl")，返回一個WebGLRenderingContext 對象。不同的瀏覽器內(nèi)核支持的參數(shù)不同，具體如下：

清屏clearColor

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

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

這里我們需要進(jìn)行四個初始化步驟

設(shè)置清除顏色(藍(lán)色，不透明)

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

深度清理

gl.clearDepth(1.0);

開啟“深度測試”, Z-緩存

gl.enable(gl.DEPTH_TEST);

設(shè)置深度測試，近的物體遮擋遠(yuǎn)的物體

gl.depthFunc(gl.LEQUAL);

清理畫布的時候調(diào)用 gl.clear(gl.COLOR_BUFFER_BIT);來清理畫布。
這樣我們便準(zhǔn)好了一個webgl的畫布可以開始繪圖了。
demo地址：http://codepen.io/leanneCC/pe...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50665.html

相關(guān)文章

  • Threejs教程之著色器

    摘要：學(xué)習(xí)基礎(chǔ)具備基本和著色器語言知識，不一定要深入學(xué)習(xí)。著色器所謂的材質(zhì)對象本質(zhì)上就是著色器代碼和需要傳遞的數(shù)據(jù)光源顏色矩陣。比更方便些，著色器中的很多變量不用聲明，系統(tǒng)會自動幫你設(shè)置，比如頂點坐標(biāo)變量投影矩陣視圖矩陣 Three.js著色器 很多時候如果想寫一些特效，往往需要編寫著色器代碼GLSL，如果你不熟悉著色器語言，自然需要學(xué)習(xí)著色器語言語法，如果你有著色器語言基礎(chǔ)，直接使用Thr...

    darkbaby123 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.35 - WebGL：打開網(wǎng)頁看大片

    摘要：在文末，我會附上一個可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...

    objc94 評論0 收藏0

  • JavaScript矢量化地圖庫 – 快速入門

    摘要：注意在代碼中將其替換為自己剛剛申請的運行，顯示地圖修改保存之后點擊運行就可以得到一幅矢量地圖了，此過程可能會稍微有點長，要耐心多等一會兒。 VectorMap.js是一個開源地圖渲染JavaScript庫， 可以使用WebGL或者HTML5兩種方式進(jìn)行交互式矢量地圖 （包括矢量瓦片地圖，一般性矢量數(shù)據(jù)地圖）和 柵格瓦片地圖的渲染。 WebGL渲染意味著高性能，大數(shù)據(jù)， HTML5渲染意...

    MiracleWong 評論0 收藏0

  • WebGL入門demo

    摘要：而是一款框架，由于其易用性被廣泛應(yīng)用。如果要學(xué)習(xí)，拋棄那些復(fù)雜的原生接口從這款框架入手是一個不錯的選擇。需要相機(jī)，演員這里是地球，場景，導(dǎo)演。最后拍好了戲交給渲染器來制片，發(fā)布。狀態(tài)也在不停的更新。 WebGL入門demo three.js入門 開場白 哇哦，繪制氣球耶，在網(wǎng)頁上？對啊！厲害了！3D效果圖也能在網(wǎng)頁上繪制出來啊，這么好玩的事情，趕緊來看看！ 這里是屬于WebGL的應(yīng)用，...

    lijinke666 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<