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