1、WebGL初識(shí),我是董美琪,CPU 與 GPU,CPU 中央處理器 GPU 圖形處理器,webgl產(chǎn)生背景,WebGL是一種3D繪圖標(biāo)準(zhǔn)，這種繪圖技術(shù)標(biāo)準(zhǔn)允許把JavaScript和OpenGL ES 2.0結(jié)合在一起，通過增加OpenGL ES 2.0的一個(gè)JavaScript綁定，WebGL可以為HTML5 Canvas提供硬件3D加速渲染，這樣Web開發(fā)人員就可以借助系統(tǒng)顯卡來(lái)在瀏覽器里更流暢地展示3D場(chǎng)景和模型了，還能創(chuàng)建復(fù)雜的導(dǎo)航和數(shù)據(jù)視覺化。顯然，WebGL技術(shù)標(biāo)準(zhǔn)免去了開發(fā)網(wǎng)頁(yè)專用渲染插件的麻煩，可被用于創(chuàng)建具有復(fù)雜3D結(jié)構(gòu)的網(wǎng)站頁(yè)面，甚至可以用來(lái)設(shè)計(jì)3D網(wǎng)頁(yè)游戲等等。,webG

2、L概念,WebGL (Web圖形庫(kù)) 是一種JavaScript API，用于在任何兼容的Web瀏覽器中呈現(xiàn)交互式3D和2D圖形。webgl完全集成到瀏覽器的所有網(wǎng)頁(yè)標(biāo)準(zhǔn)中，可將影像處理和效果的GPU加速使用方式當(dāng)做網(wǎng)頁(yè)Canvas的一部分。webGL元素可以加入其他HTML元素之中并與網(wǎng)頁(yè)或網(wǎng)頁(yè)背景的其他部分混合。WebGL程序由Javascript編寫的句柄和OpenGL Shading Lanugage(GLSL) 編寫的著色器代碼組成。 信息點(diǎn)： 1. 函數(shù)庫(kù) 2. WEBGL是用來(lái)實(shí)現(xiàn)2d 3d 動(dòng)畫效果的 3. webgl 他是瀏覽器端識(shí)別的， 可以與canvas結(jié)合使用， 他是由

3、GPU加速渲染的 4. webgl的代碼 是由javascript + GLSL組合而成 webgl就是繪制2d 、3d圖形的一種技術(shù) 著色器： 繪制圖形的語(yǔ)言 類似c語(yǔ)言、c+語(yǔ)言,webgl可繪制的圖元,1. 點(diǎn) 2. 線段 3. 三角形,應(yīng)用,1./registry/webgl/sdk/demos/webkit/Earth.html 2./registry/webgl/sdk/demos/webkit/TeapotPerPixel.html 3./regis

4、try/webgl/sdk/demos/webkit/SpinningBox.html 4./registry/webgl/sdk/demos/webkit/WebGL+CSS.html 5./registry/webgl/sdk/demos/google/san-angeles/index.html,webgl的工作原理,webgl的工作方式和流水線類似，將一個(gè)繪圖過程分成了多個(gè)步驟，當(dāng)前步驟只對(duì)前一步驟打的結(jié)果進(jìn)行處理，然后將處理后的結(jié)果傳遞給下一個(gè)步驟，最終渲染到2d屏幕上， 業(yè)界把這周渲染方式稱之為

5、圖形管線或者渲染管線。 GPU渲染管線的主要處理過程： 1.首先進(jìn)入頂點(diǎn)著色器階段，利用GPU的并行計(jì)算優(yōu)勢(shì)對(duì)頂點(diǎn)逐個(gè)進(jìn)行坐標(biāo)變換 2.然后進(jìn)入圖源裝配階段，將頂點(diǎn)按照?qǐng)D源類型組裝成圖形。 3.接下來(lái)到光柵化階段，光柵化階段將圖形用不包含顏色信息的像素填充 4.在之后進(jìn)入片元著色器階段，該階段為像素著色器，并最終顯示在屏幕上,webgl頁(yè)面與正常頁(yè)面對(duì)比,openGL,一種兼容多種語(yǔ)言使用的開放式圖形化語(yǔ)言。用于制作2d或3d圖形的API。 改語(yǔ)言類似于C或C+，并在計(jì)算機(jī)的圖形處理器（GPU）上運(yùn)行,webgl渲染管線的簡(jiǎn)單演示圖,webGL優(yōu)點(diǎn),1. 只需要一個(gè)編輯器和一個(gè)瀏覽器就可以編寫三維圖形程序 2. 使用通用的web技術(shù)發(fā)布三維圖形程序顯示 3. 充分利用了瀏覽器的功能 4. 資料豐富 /webgl/lessons/zh_cn/,webgl是