本站匯出素材可免費商用與修改

THREE.JS SHADER COLLECTION

看見每一種 Shader 的效果。

從卡通明暗到畫面濾鏡，預覽、比較，下載可用程式。

Three.js 0.187.0 · 18 個核心 + 64 個官方附加 + 38 項本站自訂 Shader

預覽畫質

每張卡片都來自實際 Shader 渲染點選開啟詳細預覽

basic

basic

基本表面直接顯示物件的顏色，不受燈光明暗影響。適合想要顏色清楚、像插畫一樣平坦的表面。材質與卡通

lambert

lambert

漫反射讓朝向燈光的地方變亮，背光的地方變暗。像沒有亮面漆的黏土，不會出現亮亮的小光點。材質與卡通

phong

phong

高光表面讓物件像亮面塑膠玩具，表面有亮亮的小光點，光點大小可以調整。材質與卡通

standard

standard

標準物理材質讓物件像真實物品，可以變得粗粗的，也能像金屬一樣反光。材質與卡通

toon

toon

卡通色階把明暗分成幾塊清楚的顏色，讓物件像卡通人物。材質與卡通

matcap

matcap

光影貼圖用圖片替物件加上亮暗和反光，場景燈光改變時，這些光影不會跟著變。材質與卡通

points

points

點粒子用許多小點畫出形狀，像一團星星。這裡的小點排成球形，可以轉動觀察。背景與特殊渲染

dashed

dashed

虛線把線條畫成一段一段的虛線，像地圖上的路線。這裡用虛線畫出盒子的邊。背景與特殊渲染

depth

depth

深度用明暗記錄物件離鏡頭有多遠。這是電腦判斷前後位置用的圖，不是物件原本的顏色。技術資料

normal

normal

法線方向用紅、綠、藍等顏色標出表面朝向哪裡。顏色像方向標記，幫電腦計算光線怎樣照到物件。技術資料

sprite

sprite

面向鏡頭圖像讓一張圖片一直面向鏡頭，像會跟著你轉的紙卡。常用來做光點、煙霧或頭頂標記。背景與特殊渲染

background

background

平面背景在整個畫面後面放一張圖片。它像舞台布景，鏡頭轉動時也不會變成立體空間。背景與特殊渲染

backgroundCube

backgroundCube

環境背景用六張圖片包住場景，像站在大盒子裡看風景。轉動鏡頭，可以看到不同方向的背景。背景與特殊渲染

cube

cube

立方體貼圖用六個方向的風景圖片顯示周圍景色，也能做出金屬或玻璃上的倒影。背景與特殊渲染

equirect

equirect

全景貼圖把一張全景圖片包成四周的風景，像把世界地圖捲成球。轉動鏡頭就能看不同方向。背景與特殊渲染

distance

distance

距離資料把物件到指定位置的距離變成明暗圖。像一把看不見的尺，這種資料能幫助計算陰影。技術資料

shadow

shadow

陰影接收只畫出物件落下的陰影，其餘地方保持透明。這裡用小圓台接住陰影，方便看出它的位置。背景與特殊渲染

physical

physical

玻璃與清漆讓物件像玻璃或亮面玩具，還能透過它看到後面的東西。材質與卡通

ACESFilmicToneMappingShader

ACESFilmicToneMappingShader

電影色調映射讓太亮的地方仍能看清顏色，像電影畫面；也能調整整體亮度。色彩與濾鏡

AfterimageShader

AfterimageShader

動作殘影讓移動的東西留下慢慢消失的影子，像揮動發光棒。殘影保留越高，拖尾留得越久。背景與特殊渲染

BasicShader

BasicShader

固定紅色輸出把物件變成半透明紅色，能透過它看到後面的東西。材質與卡通

BleachBypassShader

BleachBypassShader

漂白略過讓畫面顏色變淡、明暗差距更強，像一些老電影的冷硬畫面。強度越高，這種感覺越明顯。色彩與濾鏡

BlendShader

BlendShader

影像混合把兩張圖片疊在一起，像疊兩張透明紙。混合比例決定你看到哪張比較多。色彩與濾鏡

BokehShader

BokehShader

景深散景想看的地方保持清楚，前後較遠的景物變模糊，像手機拍人像。模糊與景深

BokehDepthShader

BokehDepthShader

散景深度用明暗畫出物件離鏡頭多遠，幫助決定哪些地方要變模糊。技術資料

BokehShader · 2

BokehShader · 2

景深散景讓想看的地方清楚，其餘地方模糊，模糊處的亮點會散成小光圈。模糊與景深

BrightnessContrastShader

BrightnessContrastShader

亮度與對比調整整張圖有多亮，以及亮處和暗處差多少。就像手機修照片裡的亮度和對比按鈕。色彩與濾鏡

ColorCorrectionShader

ColorCorrectionShader

色彩校正分別調整各種顏色的深淺，像幫照片換一種氣氛。色彩與濾鏡

ColorifyShader

ColorifyShader

單色染色把畫面變成同一種顏色的深淺，像透過有色玻璃看東西。換顏色就能做出不同氣氛。色彩與濾鏡

ConvolutionShader

ConvolutionShader

卷積模糊把附近的顏色輕輕混開，讓畫面柔和模糊。模糊與景深

CopyShader

CopyShader

原樣複製原封不動複製輸入圖片，像影印機。前後看起來一樣就是正確結果，不代表效果壞掉。色彩與濾鏡

DOFMipMapShader

DOFMipMapShader

多層貼圖景深按照遠近讓景物變清楚或模糊，像照片只有一部分看得清楚。模糊與景深

DepthLimitedBlurShader

DepthLimitedBlurShader

保留深度邊界的模糊讓陰影柔和一點，同時盡量不把顏色抹到旁邊的物件上。技術資料

DigitalGlitch

DigitalGlitch

數位故障把畫面切歪、扭曲並錯開顏色，看起來像壞掉的電視。色彩與濾鏡

DotScreenShader

DotScreenShader

網點印刷用黑白小點重畫畫面，像放大後的報紙照片，點的多少和方向能調整。色彩與濾鏡

ExposureShader

ExposureShader

曝光讓整張圖變亮或變暗，像手機拍照時調整亮度。色彩與濾鏡

FXAAShader

FXAAShader

快速抗鋸齒柔化物件邊緣的小階梯，讓斜線看起來更順。細看輪廓就能比較差異，整張圖不會大幅變色。色彩與濾鏡

FilmShader

FilmShader

膠片顆粒加上細小、會變動的顆粒，像用底片拍的電影。顆粒強度越高，沙沙的感覺越明顯。色彩與濾鏡

FocusShader

FocusShader

焦點濾鏡讓中央附近較清楚，四周模糊並帶著彩色邊；不會隨物件遠近改變。模糊與景深

FreiChenShader

FreiChenShader

邊緣偵測找出圖片裡顏色明顯改變的地方，畫成亮線。就像電腦拿筆把看見的邊緣描出來。色彩與濾鏡

GTAOBlendShader

GTAOBlendShader

環境遮蔽混合把陰影加回彩色畫面，讓角落與物件相接處更容易看清楚。技術資料

GTAODepthShader

GTAODepthShader

環境遮蔽深度用明暗顯示物件的遠近，幫助檢查陰影的位置。技術資料

GTAOShader

GTAOShader

環境遮蔽用黑白圖顯示物件旁邊被擋住光的地方，幫助補上陰影。光照與反射

GammaCorrectionShader

GammaCorrectionShader

Gamma 校正整理畫面的亮暗，讓螢幕顯示出合適的顏色。色彩與濾鏡

HalftoneShader

HalftoneShader

彩色半色調用不同顏色的小點重畫圖片，像彩色印刷。點越大，越容易看出圖片是由許多點組成的。色彩與濾鏡

HorizontalBlurShader

HorizontalBlurShader

水平模糊把顏色往左右抹開，像用手橫著擦過還沒乾的顏料。模糊與景深

HorizontalTiltShiftShader

HorizontalTiltShiftShader

水平移軸留下一條橫向清楚的區域，把上方和下方變模糊。像拍攝迷你模型時只有一小條地方對到焦。模糊與景深

HueSaturationShader

HueSaturationShader

色相與飽和度替畫面換顏色，或讓顏色更鮮豔、更接近灰色。色彩與濾鏡

KaleidoShader

KaleidoShader

萬花筒把畫面翻轉、重複排成花形，像透過萬花筒看東西。色彩與濾鏡

LuminosityHighPassShader

LuminosityHighPassShader

擷取亮部只挑出畫面中夠亮的地方，方便接著替它們加上柔光。色彩與濾鏡

LuminosityShader

LuminosityShader

灰階亮度把彩色畫面變成黑白照片。不同顏色依人眼感受到的亮度，變成不同深淺的灰。色彩與濾鏡

MirrorShader

MirrorShader

畫面鏡像複製半邊畫面並翻轉到另一邊，像在圖片中間放鏡子。可以切換左右或上下的鏡像方向。色彩與濾鏡

NormalMapShader

NormalMapShader

高度轉法線把黑白高低圖變成彩色記號，幫表面看起來有凹凸，形狀本身不會改變。技術資料

OutputShader

OutputShader

色調與色彩輸出把太亮的地方和整體顏色整理好，讓最後的畫面適合在螢幕上顯示。色彩與濾鏡

PoissonDenoiseShader

PoissonDenoiseShader

保留輪廓的降噪抹平陰影裡的小雜點，同時盡量保留物件邊緣，讓畫面更乾淨。技術資料

RGBShiftShader

RGBShiftShader

RGB 色差把紅、綠、藍三層顏色稍微錯開，讓邊緣出現彩色重影。像老鏡頭或故障螢幕的色邊。色彩與濾鏡

SAOShader

SAOShader

可擴展環境遮蔽從畫面的距離資料估計哪些地方不容易照到光。暗下來的縫隙和靠近處，能讓形狀更容易辨認。光照與反射

SMAABlendShader

SMAABlendShader

抗鋸齒混合柔化邊緣像小階梯的地方，讓細線和斜線看起來更平順。技術資料

SMAAEdgesShader

SMAAEdgesShader

抗鋸齒邊緣用彩色線標出圖片的邊緣，幫助下一步把邊緣變平順。技術資料

SMAAWeightsShader

SMAAWeightsShader

抗鋸齒權重用彩色記號決定邊緣要混入多少旁邊的顏色，幫助消除小階梯。技術資料

SSAOBlurShader

SSAOBlurShader

環境遮蔽模糊抹平陰影圖裡一粒粒的小雜點，讓陰影看起來更柔和。技術資料

SSAODepthShader

SSAODepthShader

螢幕空間深度用黑白深淺顯示物件遠近，方便檢查前面的東西和背景有沒有分開。技術資料

SSAOShader

SSAOShader

螢幕空間環境遮蔽在物件靠近的地方補上陰影，讓形狀更好認，只處理鏡頭看得到的部分。光照與反射

SSRBlurShader

SSRBlurShader

反射模糊把倒影變柔和、減少雜點，沒有倒影的地方會顯得很暗。技術資料

SSRDepthShader

SSRDepthShader

反射深度用明暗顯示物件遠近，幫助決定倒影裡會出現什麼。技術資料

SSRShader

SSRShader

螢幕空間反射讓亮面出現周圍物件的倒影，畫面外的東西可能不會出現在倒影裡。光照與反射

SepiaShader

SepiaShader

復古褐色把照片染成暖暖的褐色，像舊相簿裡的照片。強度越高，原本的彩色越少。色彩與濾鏡

SobelOperatorShader

SobelOperatorShader

輪廓偵測找出明暗變化大的地方，畫成明亮的輪廓線。適合看物件邊界，也能做出描邊風格。色彩與濾鏡

SubsurfaceScatteringShader

SubsurfaceScatteringShader

透光散射讓光像穿過皮膚、蠟或葉子那樣，在表面下散開。看看背光位置如何透出暖色。材質與卡通

TechnicolorShader

TechnicolorShader

復古彩色電影重新混合紅綠藍，做出早期彩色電影的鮮明色調。這是固定的調色風格，沒有額外滑桿。色彩與濾鏡

ToonShader1

ToonShader1

卡通明暗用簡化的明暗和亮點，把物件畫得像卡通。轉動模型，觀察不同朝向如何變亮或變暗。材質與卡通

ToonShader2

ToonShader2

卡通分層用幾塊分明的顏色畫出立體形狀，像手繪卡通，亮暗分界很清楚。材質與卡通

ToonShaderDotted

ToonShaderDotted

卡通點描用密集小點表現暗處，像漫畫的點描。亮面和暗面的點狀圖案能幫你看出形狀。材質與卡通

ToonShaderHatching

ToonShaderHatching

素描排線用交叉線畫出暗處，像鉛筆素描，越暗的地方線越多。材質與卡通

TriangleBlurShader

TriangleBlurShader

三角權重模糊把附近顏色混開，像用柔軟的刷子把畫面輕輕刷模糊。模糊與景深

UnpackDepthRGBAShader

UnpackDepthRGBAShader

解碼深度把存好的遠近記號變成黑白圖，方便看出物件誰在前、誰在後。技術資料

VelocityShader

VelocityShader

移動速度資料用顏色顯示物件在前後兩張畫面之間移動了多少。靜止時接近底色，移動時才會出現明顯變化。技術資料

VerticalBlurShader

VerticalBlurShader

垂直模糊把顏色往上下抹開，像用手直著擦過還沒乾的顏料。模糊與景深

VerticalTiltShiftShader

VerticalTiltShiftShader

垂直移軸留下一條直向清楚的區域，把左右兩旁變模糊。移動清晰帶，就能選擇畫面中想強調的直條位置。模糊與景深

VignetteShader

VignetteShader

畫面暗角把畫面四周變暗，讓視線集中到中間，像一些相機鏡頭的暗角。可以調整暗角範圍和深淺。色彩與濾鏡

VolumeRenderShader1

VolumeRenderShader1

三維體積把一大塊資料畫成立體形狀，像看雲朵或身體掃描，也能挑出特定部分。背景與特殊渲染

$WaterRefractionShader$

WaterRefractionShader

水面折射讓後面的景物像隔著晃動的水一樣扭曲。這片透明表面是效果本身，用來看光穿過水時的變化。背景與特殊渲染

Embers and heated cracks shader

Embers and heated cracks shader

火星與熱裂紋 Shader火星向外飛散，牆面或地面的發亮裂紋逐漸冷卻消失。本站自訂 · 背景與特殊渲染

Golden spatial ripple shader

Golden spatial ripple shader

金色空間漣漪 Shader高處的金色水波向外流動，亮心遮住背景，邊緣慢慢淡成柔和金光。本站自訂 · 背景與特殊渲染

Spell indicator shader

Spell indicator shader

範圍預警 Shader圓圈或扇形標出危險區，顏色從中間慢慢填滿，提醒攻擊快要來了。本站自訂 · 背景與特殊渲染

Golden chain link shader

Golden chain link shader

金色鏈節 Shader暗黃色鏈環保留孔洞，大小不一的金色水紋在表面流動；鏈條斜落、回彈後散成碎光。本站自訂 · 材質與卡通

Golden-Bladed Lightning Arrow Shader

Golden-Bladed Lightning Arrow Shader

金刃雷矢 Shader金色箭身纏著跳動閃電，打中時向外炸開，再散成小光點。本站自訂 · 背景與特殊渲染

Surrounding intake smoke shader

Surrounding intake smoke shader

周圍聚能煙霧 Shader幾股深色煙貼著地面繞彎，靠近中央後升起、縮小，像被黑球吸進去。本站自訂 · 背景與特殊渲染

Ink-brush aura shader

Ink-brush aura shader

墨刷氣息 Shader黑色筆畫從四周繞彎吸向中央，越靠近越快，像魔力被吸進黑球。本站自訂 · 背景與特殊渲染

Darkchain / dark orb shader

Darkchain / dark orb shader

闇鏈／暗能球 Shader黑色鎖鏈帶著紫光，圍住扭動的黑球，爆開時散出紅紫亮光與碎鏈。本站自訂 · 背景與特殊渲染

Spatial sweep shader

Spatial sweep shader

空間斬擊 Shader透明彎刀光拉扯後面的景物，邊緣帶著細白光；玻璃等透明東西可能不會變形。本站自訂 · 背景與特殊渲染

Weapon smear shader

Weapon smear shader

武器拖影 Shader揮劍時連出一條透亮光痕，外邊比較亮，停手後慢慢消失。本站自訂 · 背景與特殊渲染

Sweep blade shader

Sweep blade shader

迴旋刀光 Shader彎曲藍色刀光快速展開，尾巴追上前端後消失，旁邊帶著柔光與細亮線。本站自訂 · 背景與特殊渲染

Gravitational lens shader

Gravitational lens shader

引力透鏡 Shader讓黑洞後面的風景像被吸力拉彎，中央黑球仍保持圓形；玻璃可能不會跟著變形。本站自訂 · 背景與特殊渲染

Accretion disk shader

Accretion disk shader

吸積盤 Shader黑球周圍有一圈亮光，細細光紋不停繞圈往內流，像快被吸進去。本站自訂 · 背景與特殊渲染

Spatial distortion shader

Spatial distortion shader

空間錯位 Shader讓背景像碎片一樣錯開，再慢慢恢復原位；煙霧和玻璃可能不會一起變形。本站自訂 · 背景與特殊渲染

Flame surface shader

Flame surface shader

火焰表面 Shader讓火焰邊緣不停跳動，亮暗色塊跟著流動，看起來像真的在燃燒。本站自訂 · 材質與卡通

Projectile surface shader

Projectile surface shader

彈體表面 Shader替飛行中的光彈加上亮邊和流動花紋，讓它看起來充滿魔力。本站自訂 · 材質與卡通

Trail shader

Trail shader

尾跡 Shader在飛行物後面留下一條扭動的光尾，尾端慢慢變淡。本站自訂 · 背景與特殊渲染

Impact shader

Impact shader

命中 Shader打中時閃一下亮光，接觸的地方會展開、碎開或慢慢消失。本站自訂 · 背景與特殊渲染

Beam shader

Beam shader

光束 Shader亮紋沿著光線往前跑，中央和邊緣亮度不同，像能量一直往前流。本站自訂 · 背景與特殊渲染

Lightning shader

Lightning shader

電弧 Shader亮亮的閃電快速抖動，旁邊分出較暗的小閃電，像電流正在跳動。本站自訂 · 背景與特殊渲染

Glow shader

Glow shader

光暈 Shader讓小光點中央很亮，往外越來越淡，像一團柔柔的光。本站自訂 · 背景與特殊渲染

Rune / sigil shader

Rune / sigil shader

符文／法陣 Shader畫出會發光的魔法線條與符號，亮紋沿著圖案移動。本站自訂 · 背景與特殊渲染

Aura shader

Aura shader

光幕 Shader讓魔法圖案周圍出現柔柔的光，忽明忽暗地流動。本站自訂 · 背景與特殊渲染

Barrier surface shader

Barrier surface shader

結界表面 Shader畫出能看穿的保護罩，表面格子和亮帶不停移動，像魔法護盾。本站自訂 · 材質與卡通

Burst surface shader

Burst surface shader

爆發表面 Shader讓火焰、碎片和亮光向外炸開，形狀與顏色會一路變化，最後散去。本站自訂 · 背景與特殊渲染

Vortex surface shader

Vortex surface shader

旋風表面 Shader讓一層層氣流繞圈往上捲，亮暗不同的地方讓旋風看起來更有厚度。本站自訂 · 背景與特殊渲染

Ground swirl shader

Ground swirl shader

地面捲流 Shader在旋風底下畫出旋轉痕跡，看起來像地上的灰塵也一起被捲動。本站自訂 · 背景與特殊渲染

Smoke shader

Smoke shader

煙霧 Shader讓煙團翻捲、變淡，邊緣慢慢散開，像煙在空氣中消失。本站自訂 · 背景與特殊渲染

Particle shader

Particle shader

粒子 Shader在主體旁邊加上飛散的小碎片和光點，讓畫面細節更豐富。本站自訂 · 背景與特殊渲染

Custom toon surface shader

Custom toon surface shader

自訂卡通表面 Shader用幾塊清楚的顏色畫出明暗，加上花紋，讓形狀像卡通一樣展開和收起。本站自訂 · 材質與卡通

Temporary ground cracks shader

Temporary ground cracks shader

短暫地裂 Shader撞地時裂紋從中心向外展開，稍後淡去，不會真的挖開地面。本站自訂 · 背景與特殊渲染

Raised magic smoke wave shader

Raised magic smoke wave shader

中段能量煙浪 Shader白金煙浪從物件中段向外翻捲，中央留空，與地面光波一起散去。本站自訂 · 背景與特殊渲染

Healing wave shader

Healing wave shader

治療光浪 Shader白金水紋沿寬光浪向外流動，前緣微微隆起，中央留空，最後散去。本站自訂 · 背景與特殊渲染

Grass wind / brush shader

Grass wind / brush shader

草葉風動／筆觸 Shader草根留在原地，草尖隨風彎動，葉子帶著像畫筆留下的細紋。本站自訂 · 材質與卡通

Flower shader

Flower shader

花朵 Shader畫出帶著淡淡顏色的花瓣，讓花朵隨風輕輕擺動。本站自訂 · 材質與卡通

Watercolor object material

Watercolor object material

水彩物件材質讓物件像畫在紙上的水彩畫，有淡淡色塊、紙紋和深淺不同的顏色。本站自訂 · 材質與卡通

Hand-painted vegetation

Hand-painted vegetation

手繪植被讓樹木、草和花像手繪圖畫，葉子與花瓣帶著畫筆痕跡，會隨風輕輕擺動。本站自訂 · 材質與卡通

Oil Paint

Oil Paint

油畫讓整個畫面像塗了厚厚顏料的油畫，能看見畫筆痕跡和畫布的細紋。本站自訂 · 色彩與濾鏡

官方 Shader 依版本收錄；本站自訂材質合併相同程式，實作版本可在預覽內選擇。遊戲用模組於下載區標示。不含第三方或 TSL 節點。