資訊專欄INFORMATION COLUMN
摘要：而且，如果將鏡頭大幅度遠(yuǎn)離蘋果，那么也有可能看不到蘋果了。著色器又分為兩種頂點(diǎn)著色器顧名思義它能處理頂點(diǎn)坐標(biāo)大小等矩陣計(jì)算后的結(jié)果，能夠把數(shù)學(xué)坐標(biāo)光柵化。
我對(duì)webgl或者說二維、三維的理解
首先我們要做的就是把三維的東西展現(xiàn)在顯示器里(瀏覽器里)，但瀏覽器是二維的。那么就是把一個(gè)三維的物體用數(shù)學(xué)模型描述出來（x,y,z）然后把這個(gè)三維的數(shù)學(xué)模型轉(zhuǎn)換到二維的瀏覽器里顯示出來。(用webgl來模擬一個(gè)三維的空間）。
無論用DirectX還是OpenGL，最終都需要將三維的情報(bào)向二維進(jìn)行變換。就像剛開始說的那樣，最終的圖像都是由二維顯示器來顯示的。
這時(shí)候，坐標(biāo)變換就是必須的了。坐標(biāo)變換大致可以分為三種，將這些方法正確的組合在一起，最終決定顯示器上的位置。
用身邊的東西舉例說明的話，三維向二維轉(zhuǎn)換的例子就是照相機(jī)。照片和圖像，通過照相機(jī)已經(jīng)全部變?yōu)榱硕S，最終，輸出成了照片和動(dòng)畫。
1.模型變換:在OpenGL的處理中雖然一般叫做模型變換，但是在DirectX中被叫做世界變換。
模型變換，是指為了定義參照物在三維空間的什么位置而進(jìn)行的坐標(biāo)變換。和現(xiàn)實(shí)的世界不同，程序中的三維空間里定義了世界的中心的基準(zhǔn)點(diǎn)，就是原點(diǎn)。從這個(gè)原點(diǎn)出發(fā)，為了知道參照物的相對(duì)位置，就需要進(jìn)行必要的坐標(biāo)變換。假設(shè)，虛擬的三維空間里有一個(gè)蘋果，那么為了表示這個(gè)蘋果在什么位置，就需要進(jìn)行相應(yīng)的模型變換了。
2.視圖變換:定義了鏡頭的實(shí)際位置以及鏡頭的方向。拿剛剛舉例的蘋果來說，即使三維空間中有一個(gè)蘋果，如果鏡頭的方向不對(duì)著蘋果的話，同樣也是看不到這個(gè)蘋果的。而且，如果將鏡頭大幅度遠(yuǎn)離蘋果，那么也有可能看不到蘋果了。為了決定鏡頭的位置和角度所進(jìn)行的坐標(biāo)變換就叫做視圖變換。
3.投影變換:定義了三維空間的攝影區(qū)域。比如，是橫向攝影，還是縱向攝影，最遠(yuǎn)拍攝多遠(yuǎn)距離等。
一般的照相機(jī)，直接拍攝鏡頭前的所有圖像，最遠(yuǎn)拍攝多遠(yuǎn)也基本上沒什么意識(shí)。但是，程序是無法模擬無限大的空間的，所以，從哪里開始拍攝，拍攝到哪里，必須有一個(gè)明確的范圍。投影變幻，通過遠(yuǎn)近法則，可以將近處的物體描畫的比較大，遠(yuǎn)處的物體描畫的比較小。
認(rèn)識(shí)著色器之前得先了解一下什么是固定渲染管線，簡單來說，固定渲染管線就是就是3d渲染所需要進(jìn)行的一連串的計(jì)算流程。也就是上面所說的模型、視圖、投影的三種變化，固定渲染管線都會(huì)替我們完成。
但webgl中不存在固定渲染管線,那么就意味著，坐標(biāo)的變化得由我們自己來解決了。在webgl中這個(gè)解決坐標(biāo)變化的機(jī)制就叫著色器(shader)。而這種可以有程序員來控制的坐標(biāo)變換機(jī)制又叫做，可編輯渲染管線機(jī)制。著色器又分為兩種
1.頂點(diǎn)著色器（vertex shader):顧名思義它能處理頂點(diǎn)坐標(biāo)、大小等（矩陣計(jì)算后的結(jié)果），能夠把數(shù)學(xué)坐標(biāo)光柵化。
2.片元著色器（fragment shader):能夠接收光柵化數(shù)據(jù)并加以處理使其顯示到屏幕上（光柵化數(shù)據(jù)包含了像素的位置、顏色等信息）
光柵化就是把頂點(diǎn)數(shù)據(jù)轉(zhuǎn)換為片元的過程。片元中的每一個(gè)元素對(duì)應(yīng)于幀緩沖區(qū)中的一個(gè)像素。
光柵化其實(shí)是一種將幾何圖元變?yōu)槎S圖像的過程。該過程包含了兩部分的工作。第一部分工作：決定窗口坐標(biāo)中的哪些整型柵格區(qū)域被基本圖元占用；第二部分工作：分配一個(gè)顏色值和一個(gè)深度值到各個(gè)區(qū)域。光柵化過程產(chǎn)生的是片元。把物體的數(shù)學(xué)描述以及與物體相關(guān)的顏色信息轉(zhuǎn)換為屏幕上用于對(duì)應(yīng)位置的像素及用于填充像素的顏色，這個(gè)過程稱為光柵化，這是一個(gè)將模擬信號(hào)轉(zhuǎn)化為離散信號(hào)的過程。
著色器的使用：使用GLSL(openGL Shading Laguage)硬編碼的C語言去使用.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/84591.html
摘要：選擇對(duì)象的本質(zhì)是從點(diǎn)擊位置發(fā)射光線，但屏幕坐標(biāo)系與坐標(biāo)系是不同的，而把屏幕的二維坐標(biāo)轉(zhuǎn)化為三維坐標(biāo)就是關(guān)鍵，做一步換算后交由的方法即可。 Three.js 選擇對(duì)象的本質(zhì)是從點(diǎn)擊位置發(fā)射光線，但屏幕坐標(biāo)系與webgl坐標(biāo)系是不同的，而把屏幕的二維坐標(biāo)轉(zhuǎn)化為三維坐標(biāo)就是關(guān)鍵，做一步換算后交由Raycaster的setFromCamera方法即可。所以思路如下：1.獲取屏幕坐標(biāo)(x, y)...
摘要：在文末，我會(huì)附上一個(gè)可加載的模型方便學(xué)習(xí)中文藝術(shù)字渲染用原生可以很容易地繪制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術(shù)生態(tài)鏈中最為令人振奮的標(biāo)準(zhǔn)之一，它把 Web 帶入了 3D 的時(shí)代。 初識(shí) WebGL 先通過幾個(gè)使用 Web...
摘要：概述最近公司在做一個(gè)大型的應(yīng)用，總結(jié)如下建模軟件建模自定義一套語義化的模型格式，并編寫模型格式轉(zhuǎn)化插件把建模軟件的模型格式轉(zhuǎn)成自定義格式。 概述 最近公司在做一個(gè)大型的webgl應(yīng)用，總結(jié)如下: 1.建模軟件建模(3d Max revit) 2.自定義一套 語義化的模型格式，并編寫模型格式轉(zhuǎn)化插件,把建模軟件的模型格式轉(zhuǎn)成自定義格式。 為什么要自定義語義化的模型格式呢？ 因?yàn)?，現(xiàn)在瀏覽...
閱讀 1713·2021-09-02 09:55
閱讀 1199·2019-08-30 13:19
閱讀 1448·2019-08-26 13:51
閱讀 1534·2019-08-26 13:49
閱讀 2471·2019-08-26 12:13
閱讀 503·2019-08-26 11:52
閱讀 1975·2019-08-26 10:58
閱讀 3142·2019-08-26 10:19
