學習WebGL 013 材質

2021-09-29 05:49:17 字數 2171 閱讀 6373

參考:

funwithwebgl2 023 - viva la fungi

材質這個概念是虛構出來的,webgl 中並沒有這個概念。這裡提出來是為了將部分webgl的引數抽象出來成為乙個集合。

class


material


}
1)對光照的反應ambient(環境光)、diffuse(漫反射光)、specular(鏡面高光), 該部分由shader**負責。

2)背面剔除

乙個封閉不透明的幾何體一定是由很多三角形拼接而成, 背向我們的三角形，一般來說都是看不見的，為了提高執行效率可以不進行繪製，這就是背面剔除技術。

webgl中,設定乙個三角形三個點的連線順序:

// 逆時針頂點順序為正面


gl.frontface


(gl.


ccw)


;// 順時針頂點順序為正面


gl.frontface


(gl.cw)


;// 開啟背面剔除


gl.enable


(gl.


cull_face);


// 剔除背面


gl.cullface


(gl.


back


);
3)融合把某一畫素位置上原來的顏色和將要畫上去的顏色，通過某種方式混在一起，從而實現特殊的效果。目標顏色可以表達為:

// 源顏色: (rs, gs, bs, as)


// 目標顏色: (rd, gd, bd, ad)


// 源因子: (sr, sg, sb, sa)


// 目標因子 :(dr, dg, db, da)


r= rssr+rddr


g= gssg+gddg


b= bssb+bddb


a= assa+adda


目標顏色=(r


,g,b,a)
混合值:名字值

zero

0, 0, 0, 0

one1, 1, 1, 1

src_color

sr, sg, sb, sa

dst_color

dr, dg, db, da

one_minus_src_color

1-sr, 1-sg, 1-sb, 1-sa

one_minus_dst_color

1-dr, 1-dg, 1-db, 1-da

src_alpha

sa, sa, sa, sa

dst_alpha

da, da, da, da

one_minus_src_alpha

1-sa, 1-sa, 1-sa, 1-sa

one_minus_dst_alpha

1-da, 1-da, 1-da, 1-da

// 啟用混合


glenable


(gl_blend);


// 關閉混合


gldisable


(gl_blend);


gl.blendfunc


(gl.


src_alpha


, gl.


one_minus_src_alpha


)
4)深度檢測深度檢測不屬於材質部分。但是和混合和背面剔除都是關於webgl的設定,這裡就順帶提一下。該功能啟用了之後，opengl在繪製的時候就會檢查，當前畫素前面是否有別的畫素，如果別的畫素擋道了它，那它就不會繪製，也就是說，opengl就只繪製最前面的一層。

// 深度檢測開啟


gl.enable


(gl.


depth_test);


// 深度評價函式


gl.depthfunc


(gl.


lequal


)
參考

opengl——背面剔除

webgl學習筆記（四）：繪圖

glblendfunc顏色混合

學習進度 013

本週花費在 上的時間為 包括上課時間 18 小時 量 2000 行左右共1個程式3個專案 遇到的問題 php連線資料庫問題 php連線資料庫有三中常見的方式 1 mysql conn mysql connect 主機名，使用者名稱，密碼 關閉 close conn mysql connect 主機名...

WebGL程式設計（1） 學習總結之WebGL常用方法

webgl簡介 webgl，是一項使用canvas在網頁上繪製和渲染複雜三維圖形 3d圖形 並允許使用者與之進行互動的技術，webgl的技術規範繼承自免費和開源的opengl標準，而後者在計算機圖形學 電子遊戲 計算機輔助設計等領域已被廣泛使用多年。由於webgl處理的是三維圖形，所以它使用的是三維...

threejs學習筆記 材質

meshbasematerial 網格基礎材質 meshbasematerial 網格基礎材質 是一種非常簡單的材質，這種材質不會考慮光照的影響。使用這種材質網格備渲染成簡單的平面多邊形，可以用它賦予幾何體一種簡單的顏色,並且可以顯示幾何體的線框。meshdepthmaterial 網格深度材質 m...