青青草原亚洲,中文字幕家庭乱伦,国产呦精品,亚洲欧美一区二区三区久本道 ,青草草在线视频,欧美淫秽在线视频,精品久久123,北条麻妃无码

工欲善其事，必先利其器。

學(xué)習(xí)渲染的小伙伴，不論是用圖形API【OpenGL,Vulkan,Metal,DirectX....】,還是成熟的商業(yè)引擎【Unreal Engine,Unity,Ogre....】,當(dāng)涉及到渲染效果的時(shí)候，就一定會(huì)涉及到使用shader寫(xiě)效果。

shader可能在其他api，或者渲染引擎中學(xué)到的有好多著色器，shadertoy是沒(méi)有這么完備的功能了，只可以弄好了片元著色器給大家調(diào)效果。

相信大家可以想到，如果把比如頂點(diǎn)著色器跟幾何著色器弄進(jìn)來(lái)，怕是這個(gè)小小的網(wǎng)頁(yè)支持不起來(lái)哈，所以只有片元著色器。

shadertoy這個(gè)網(wǎng)站，該網(wǎng)站語(yǔ)法跟GLES3.0的shader語(yǔ)法一致，在測(cè)試調(diào)試好效果可以很方便的遷移到OGL工程中直接使用。

這里給新入門的小伙伴們安利一下。

www.shadertoy.com

本文主要介紹Shadertoy的基本使用

1、功能面板辨識(shí)

2、hello,world

官方示例代碼如下，添加標(biāo)注。

void?mainImage(?out?vec4?fragColor,?in?vec2?fragCoord?)
{
????//?歸一化紋理坐標(biāo)到[0-1]范圍
????vec2?uv?=?fragCoord/iResolution.xy;
????//?根據(jù)時(shí)間變量iTime與紋理坐標(biāo)組合作為入?yún)⒂?jì)算像素顏色
????vec3?col?=?0.5?+?0.5*cos(iTime+uv.xyx+vec3(0,2,4));
????//?輸出顏色到fragColor，只需要給該變量賦值就可以展示在最終渲染效果上
????fragColor?=?vec4(col,1.0);
}

說(shuō)明：

類似于C語(yǔ)言的main函數(shù)，shadertoy給大家預(yù)留的片元著色器代碼入口函數(shù)是:

void?mainImage(?out?vec4?fragColor,?in?vec2?fragCoord?).

函數(shù)參數(shù)列表定義的第一個(gè)變量可以看到fragColor是out vec4,意思為輸出的四維向量，四維向量同大家理解的顏色向量一樣,rgba四元素；out意思為該變量對(duì)應(yīng)的顏色會(huì)最終輸出映射到最終你期望的幀緩存區(qū)上去。

入口函數(shù)第二個(gè)變量定義為in vec2，in意思為從外部輸入進(jìn)來(lái)的，vec2 意思為二維向量，合并在一起意思為從外部輸入的二維向量，實(shí)際代表的意思為外部輸入進(jìn)來(lái)的紋理坐標(biāo)【跟gles一般操作有差異的是此處的fragCoord為實(shí)際坐標(biāo)，而不是歸一化（0,1）的坐標(biāo)】。

第一行解釋：因?yàn)榍懊嫣岬搅巳雲(yún)ragCoord不是歸一化的數(shù)據(jù)，而我們渲染中使用texture采樣紋理的時(shí)候坐標(biāo)卻需要是歸一化坐標(biāo)，所以這里對(duì)坐標(biāo)進(jìn)行了轉(zhuǎn)換，實(shí)際坐標(biāo)/iResolution.xy 即可映射紋理坐標(biāo)到[0,1]范圍內(nèi)。
第二行解釋：根據(jù)時(shí)間與紋理坐標(biāo)，cos函數(shù)計(jì)算一個(gè)顏色

cos(iTime+uv.xyx+vec3(0,2,4));

可以拆分為兩部分cos(uv.xyx);生成漸變的初始效果，然后在加上默認(rèn)顏色vec3(0,2,4),顏色加深。

然后再在cos函數(shù)中加入iTime【程序啟動(dòng)后運(yùn)行的時(shí)長(zhǎng),單位s】，效果變?yōu)闈u變顏色逐漸移動(dòng)變化，類似于在cos函數(shù)中選定一個(gè)不長(zhǎng)，一直沿著x軸移動(dòng)后cos函數(shù)對(duì)應(yīng)值的變化情況