非常方便的 VSCode 的 Shader 插件 —— Shader Toy

Visual Studio Code - Shader Toy

這個擴展可以在 VSCode 中查看 GLSL 著色器的 WebGL 實時預覽，通過提供 “Show GLSL Preview” 命令可以達到類似于訪問 shadertoy.com 的效果。

metaballs example

要運行該命令，可以打開 “Command Palette” 并輸入“ Shader Toy: Show GLSL Preview ”，或者在文本編輯器中右鍵單擊并從上下文菜單中選擇 “Shader Toy: Show GLSL Preview” 。

運行該命令將視圖分割并顯示一個應用了您的著色器的全屏四方的視圖。您的片段著色器的入口點是 void main()，或者如果前者不可用，那么入口點則是?void mainImage(vec4 out，vec2 in)，其中第一個參數是輸出顏色，第二個參數是片段屏幕位置。

另一個可用的命令是 “Shader Toy: Show Static GLSL Preview” ，它將打開一個預覽，但不會對變化的編輯器作出反應。可以一次打開任意數量的編輯視圖，這使得依賴于多個通道的著色器可以被一個唯一的工作流進行編輯。

特點

Uniforms 變量

目前，iResolution、iGlobalTime(也稱?iTime)、iTimeDelta、iFrame、iMouse、iMouseButton、iDate、iSampleRate、iChannelN （其中?N 在 [0,9] 區間內）和 iChannelResolution[] 都是可用的 uniform 變量。

紋理輸入

紋理通道 iChannelN 可以通過在著色器頂部插入如下形式的代碼來定義

#iChannel0 "file://duck.png"

#iChannel1 "https://66.media.tumblr.com/tumblr_mcmeonhR1e1ridypxo1_500.jpg"

#iChannel2 "file://other/shader.glsl"

#iChannel2 "self"

#iChannel4 "file://music/epic.mp3"

以上代碼演示了

使用本地和遠程圖像作為紋理(注意，紋理大小是 2 的冪次是你通常需要遵守的規范)；

使用另一個著色器結果作為紋理；

通過指定 self 使用這個著色器的最后一幀；

使用音頻輸入。

注意，要使用本地輸入的相對路徑，您必須在可視代碼中打開一個文件夾。

紋理示例為了影響紋理的采樣行為，使用以下語法:

#iChannel0::MinFilter "NearestMipMapNearest"

#iChannel0::MagFilter "Nearest"

#iChannel0::WrapMode "Repeat"

注意，因為 WebGL 標準，許多選項只能在寬度和高度都是 2 的冪次情況下工作。

立方貼圖輸入

Cubemaps可以指定為任何其他紋理，事實上，它們是 Cubemaps 的路徑包含通配符和它們的類型被顯式聲明的組合。

#iChannel0 "file://cubemaps/yokohama_{}.jpg" // 注意 '{}'

#iChannel0::Type "CubeMap"

通配符將通過替換下列集合中的任何值來解析

[ 'e', 'w', 'u', 'd', 'n', 's' ],

[ 'east', 'west', 'up', 'down', 'north', 'south' ],

[ 'px', 'nx', 'py', 'ny', 'pz', 'nz' ] or

[ 'posx', 'negx', 'posy', 'negy', 'posz', 'negz' ].

如果找不到這六個文件中的任何一個，就從下一個集合的第一個開始嘗試。

音頻輸入(實驗性的)

注意: 默認情況下音頻輸入是禁用的，更改設置 “Enable Audio Input” 來啟用它。

如果您的通道定義了音頻輸入，它將從文件擴展名中推斷出來。通道將是一個 2 像素高和 512 像素寬的紋理，寬度可以通過“Audio Domain Size” 設置來調整。第一行包含音頻頻譜，第二行包含其波形。

audio example

錯誤日志

鍵盤輸入

如果你想使用鍵盤輸入，你可以在著色器前加上 #iKeyboard。這將暴露給你的著色器以下功能:

bool isKeyPressed(int);

bool isKeyReleased(int);

bool isKeyDown(int);

bool isKeyToggled(int);

此外，它還將暴露從?Key_A 到 Key_Z、從 Key_0 到 Key_9、Key_UpArrow、Key_LeftArrow、Key_Shift 等變量。使用這些常量和上面提到的函數來查詢鍵盤的狀態。

包括其他（include）著色器

你也可以通過一個標準的 c 類語法來包括其他文件到你的著色器中:

#include "some/shared/code.glsl"

#include "other/local/shader_code.glsl"

注意：這些著色器不能定義void main() 函數，因此只能用于實用函數、常量定義等。

自定義 Uniforms 變量 (實驗性的，易變的)

使用自定義 uniform 變量定義那些直接在你的著色器中使用的 uniform 變量，給一個初始值以及一個可選的范圍。

#iUniform float my_scalar = 1.0 in { 0.0, 5.0 } // 這將暴露一個滑動條來編輯該值

#iUniform float my_discreet_scalar = 1.0 in { 0.0, 5.0 } step 0.2 // 步長為 0.2

#iUniform float other_scalar = 5.0 // 這將公開一個文本字段以給出任意值

#iUniform vec2 position_in_2d = vec2(1.0) // 暴露兩個文本字段

#iUniform color3 my_color = color3(1.0) // 這將是一個可編輯的顏色選擇器

#iUniform vec4 other_color = vec4(1.0) in { 0.0, 1.0 } // 這將暴露四個滑塊

與 Shadertoy.com 的兼容性

下面是一個從 shadertoy.com 移植的 shader 的例子:

// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

// Created by S.Guillitte

void main() {

float time = iGlobalTime * 1.0;

vec2 uv = (gl_FragCoord.xy / iResolution.xx - 0.5) * 8.0;

vec2 uv0 = uv;

float i0 = 1.0;

float i1 = 1.0;

float i2 = 1.0;

float i4 = 0.0;

for (int s = 0; s < 7; s++) {

vec2 r;

r = vec2(cos(uv.y * i0 - i4 + time / i1), sin(uv.x * i0 - i4 + time / i1)) / i2;

r += vec2(-r.y, r.x) * 0.3;

uv.xy += r;

i0 *= 1.93;

i1 *= 1.15;

i2 *= 1.7;

i4 += 0.05 + 0.1 * time * i1;

}

float r = sin(uv.x - time) * 0.5 + 0.5;

float b = sin(uv.y + time) * 0.5 + 0.5;

float g = sin((uv.x + uv.y + sin(time * 0.5)) * 0.5) * 0.5 + 0.5;

gl_FragColor = vec4(r, g, b, 1.0);

}

注意，與 shadertoy.com 相比，gl_FragCoord 代替了 fragCoord, gl_FragColor?代替了原始演示中的 fragColor。但是，對于插入一個簡單的 void main() 有一個基本的支持，它將委托給一個 void mainImage(vec4 out，vec2 in) 函數。void main() 的定義是通過匹配 regex /void\s+main\s* (\s*\)\s*\{/g 找到的，因此，如果除了擴展生成的定義之外還需要定義?void main()，則可以將其定義為 void main(void)。例如，如果您的 main 定義將被預處理器處理掉，并因此擴展不接受該定義，則可能有必要這么做。

英文原文：Note that compared to shadertoy.com gl_FragCoord replaces fragCoord and gl_FragColor replaces fragColor in the original demo. There is however a rudimentary support for inserting a trivial void main() which will delegate to a void mainImage(out vec4, in vec2) function. The definition of void main() is found by matching the regex /void\s+main\s*\s?

\s

?

\s*\{/g, thus if you require to define void main() in addition to the extension generating a definition you may define it as void main(void). This might be necessary, for example, if your main definition would be processed away by the preprocessor and should thus not be picked up by the extension.

glslify 的集成

您可以在設置中啟用對 glslify 的支持，但是因為 glslify 不支持轉換前后的行映射，所以只要啟用了設置，就會遺憾地禁用錯誤上的行號。使用 glslify 允許為您的著色器使用 node.js 風格的模塊系統:

#pragma glslify: snoise = require('glsl-noise/simplex/2d')

float noise(in vec2 pt) {

return snoise(pt) * 0.5 + 0.5;

}

void main () {

float r = noise(gl_FragCoord.xy * 0.01);

float g = noise(gl_FragCoord.xy * 0.01 + 100.0);

float b = noise(gl_FragCoord.xy * 0.01 + 300.0);

gl_FragColor = vec4(r, g, b, 1);

}

GLSL 預覽交互

該擴展在GLSL預覽中提供了一個暫停按鈕來停止時間的前進。與此相結合，您可以使用 GLSL 預覽中提供的屏幕快照按鈕來捕獲和保存幀。默認情況下，保存的屏幕截圖的分辨率與 GLSL 預覽的分辨率相同的，不過有一個設置允許用戶使用任意值覆蓋該分辨率。最后，擴展提供了一個關于著色器性能和內存消耗的淺顯視圖。

錯誤高亮

該擴展還支持在文本編輯器中突出顯示編譯錯誤，對于單個著色器也是如此，對于多個通道的也是如此。它通過在文本編輯器中直接顯示作為診斷的錯誤，以及在 GLSL 預覽窗口中以可理解的格式顯示錯誤，并允許用戶與錯誤消息交互跳轉到相關行，并在必要時打開相關文件來實現:

error example

要求

一個支持 WebGL 的顯卡.

已知的問題

目前某些著色器的性能不是很好，原因正在調查中

帶有來自遠程源的音頻的著色器目前不能正常工作，這是VSCode方面的一個問題，將在 Electron 6 發布時修復。

似乎有一個非常罕見的錯誤，導致音頻輸入聲音損壞。

Todo

得到更多的反饋；

便攜式導出著色器；

在不可移植的版本中禁用音頻；

Cubemap 采樣。

貢獻

任何形式的貢獻都是受歡迎和鼓勵的。

GitHub 項目頁面

Visual Studio 商店地址

Release Notes

（略）

英文原文

WebGL

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。