three.js 着色器材質之glsl內置函數
郭先生發現在開始學習three.js着色器材質時，我們經常會無從下手，辛苦寫下的着色器，也會因莫名的報錯而手足無措。原因是着色器材質它涉及到另一種語言–GLSL，只有懂了這個語言，我們才能更好的寫出着色器材質，利用好的我們的GPU。這篇說一說glsl內置函數。 1. 和角度相關的函數 下面 ...
原文：three.js 着色器材質之紋理
今天郭先生說一說如何在three.js着色器中添加紋理，先看看今天要完成的效果，在線案例請點擊博客原文。 這里我們分別引入三個紋理，分別是地球的表面紋理，對應的海拔灰度圖，和雲朵的紋理。使用表面紋理還是地球的外貌，海拔灰度圖給地球添加凹凸效果，雲朵紋理給地球添加雲朵效果。下面我們說一說代碼。 . 繪制幾何體，加載貼圖 我們只需要在一個球體中進行操作，所以新建一個球體。然后分別加載三張紋理。 . 使 ...
2020-08-10 12:06 6 1808 推薦指數：
相關推薦
three.js 着色器材質之變量（二）
上一篇郭先生在例子中用到了着色器變量中的uniform和varying。這篇繼續結合例子將一下attribute變量，在使用過程中也發現由於three.js的版本迭代，之前的一些屬性和參數已經發生了改變，ShaderMaterial也不需要傳遞attributes屬性值，查看源碼我們可以看到 ...
three.js 着色器材質內置變量
這篇郭先生說一下three.js着色器的內置變量，分別是 gl_PointSize：在點渲染模式中，控制方形點區域渲染像素大小（注意這里是像素大小，而不是three.js單位，因此在移動相機是，所看到該點在屏幕中的大小不變） gl_Position：控制頂點選完的位置 ...
three.js 着色器材質之變量（三）
這篇郭先生在練習一下着色器變量，在度娘上面或者官網上經常看到類似水波一樣的效果，這篇就試着做一個這樣的效果，順便鞏固一下頂點着色器和片元着色器，畢竟多多練習才能更好地掌握。效果如下圖，在線案例請點擊博客原文。 這里用到了用到了頂點着色器和片元着色器。 1. 設置幾何體 設置一個幾何體 ...
three.js 着色器材質之變量（一）
上一篇說頂點着色器和片元着色器的皮毛，這篇郭先生說一說着色器變量，通過變量可以設置材質。先看看今天要做的如下圖。在線案例請點擊博客原文。 在這個案例之前，我們先復習一下着色器變量 Uniforms是所有頂點都具有相同的值的變量。 比如燈光，霧，和陰影貼圖就是被儲存在uniforms中 ...
three.js 着色器材質之初識着色器
說起three.js，着色器材質總是繞不過的話題，今天郭先生就說一說什么是着色器材質。着色器材質是很需要靈感和數學知識的，可以用簡短的代碼和繪制出十分豐富的圖像，可以說着色器材質是脫離three.js的另一塊知識，因此它十分難講，我們只能在一個一個案例中逐漸掌握着色器語言的使用技巧。 1. ...
Three.js基礎探尋八——法向材質與材質的紋理貼圖
4.法向材質 法向材質可以將材質的顏色設置為其法向量的方向，有時候對於調試很有幫助。 法向材質的設定很簡單，甚至不用設置任何參數： 材質的顏色與照相機與該物體的角度相關，下面我們只改變照相機位置，觀察兩個角度的顏色變化： camera.position.set ...
three.js 材質
今天郭先生說一說three.js的材質。材質描述了對象objects的外觀。它們的定義方式與渲染器無關， 因此，如果您決定使用不同的渲染器，不必重寫材質。 1. three.js材質基類 所有其他材質類型都繼承了Material。 下面是一些屬性： .alphaTest : Float設置 ...