從Shadertoy在Interface Builder（Xcode中）

Question

我試圖看到着色器看起來像在Interface Builder中使用精靈套件，並且想用一些着色器在ShaderToy使用着色器。爲此，我創建了一個「shader.fsh」文件，一個場景文件，並向場景添加了一個顏色精靈，給它一個自定義着色器（shader.fsh）。

雖然非常基本的着色器似乎工作：

void main() { 
    gl_FragColor = vec4(0.0,1.0,0.0,1.0); 
} 

任何企圖我做出着色器從ShaderToy事業的Xcode轉換爲儘快試圖使它們凍結（色紡紗球）。

我一起工作，例如着色器，是this one：

#define M_PI 3.1415926535897932384626433832795 

float rand(vec2 co) 
{ 
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 
} 

void mainImage(out vec4 fragColor, in vec2 fragCoord) 
{ 
    float size = 30.0; 
    float prob = 0.95; 

    vec2 pos = floor(1.0/size * fragCoord.xy); 

    float color = 0.0; 
    float starValue = rand(pos); 

    if (starValue > prob) 
    { 
     vec2 center = size * pos + vec2(size, size) * 0.5; 

     float t = 0.9 + 0.2 * sin(iGlobalTime + (starValue - prob)/(1.0 - prob) * 45.0); 

     color = 1.0 - distance(fragCoord.xy, center)/(0.5 * size); 
     color = color * t/(abs(fragCoord.y - center.y)) * t/(abs(fragCoord.x - center.x)); 
    } 
    else if (rand(fragCoord.xy/iResolution.xy) > 0.996) 
    { 
     float r = rand(fragCoord.xy); 
     color = r * (0.25 * sin(iGlobalTime * (r * 5.0) + 720.0 * r) + 0.75); 
    } 

    fragColor = vec4(vec3(color), 1.0); 
} 

我已經試過：

• 與主（無效）更換mainImage（）（這樣它會被稱爲）
• 替換iXxxxx變量（iGlobalTime，iResolution）和fragCoord變量及其相關變量（基於建議here）
• 代替一些變量（iGlobalTime）的...

當改變mainImage到main（）和換出變量得到它在TinyShading實時測試應用程序沒有錯誤工作 - 結局總是在Xcode相同（旋轉球，凍結）。這裏的任何建議都會有幫助，因爲目前有關該主題的信息量非常少。

Answer 1

我設法使用SKShader在SpriteKit這個工作。我已經能夠渲染ShaderToy中的所有着色器，這是我迄今嘗試過的。唯一的例外是您必須使用iMouse刪除任何代碼，因爲iOS中沒有鼠標。我做了以下...

1）更改ShaderToy到函數聲明...

void main(void) { 
    ... 
} 

的ShaderToy 功能有一個名爲fragCoord的輸入。在iOS中，這是全球可用的gl_FragCoord，因此您的main功能不再需要任何輸入。

2）做替換所有改變他們的名字ShaderToy以下，以自己的iOS名字......

• fragCoord成爲gl_FragCoord
• fragColor成爲gl_FragColor
• iGlobalTime成爲u_time

注：還有更多我還沒有遇到。我會更新爲我做

3）提供iResolution是稍微有點複雜......

iResolution是視大小（像素），轉化爲在SpriteKit精靈大小。這個在iOS中的版本爲u_sprite_size，但已被刪除。幸運的是，Apple提供了一個很好的示例，說明如何使用uniforms的SKShader documentation將其注入到着色器中。

然而，如在ShaderToy的Shader Inputs部分中所述，的iResolution類型是vec3（x，y和z）的，而不是u_sprite_size，這是vec2（x和y）。我還沒有看到使用z值iResolution的單個ShaderToy。所以，我們可以簡單地使用零值的z值。我修改了蘋果文檔中的例子來提供我的着色像這樣vec3類型的iResolution ...

let uniformBasedShader = SKShader(fileNamed: "YourShader.fsh") 

let sprite = SKSpriteNode() 
sprite.shader = uniformBasedShader  

let spriteSize = vector_float3(
    Float(sprite.frame.size.width), // x     
    Float(sprite.frame.size.height), // y 
    Float(0.0)      // z - never used 
) 

uniformBasedShader.uniforms = [  
    SKUniform(name: "iResolution", vectorFloat3: spriteSize) 
] 

就是這樣:)

Answer 2

這裏的變化時，裝載的作品着色器着色器與SWIFT：

#define M_PI 3.1415926535897932384626433832795 

float rand(vec2 co); 

float rand(vec2 co) 
{ 
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); 
} 

void main() 
{ 
    float size = 50.0; //Item 1: 
    float prob = 0.95; //Item 2: 

    vec2 pos = floor(1.0/size * gl_FragCoord.xy); 

    float color = 0.0; 
    float starValue = rand(pos); 

    if (starValue > prob) 
    { 
     vec2 center = size * pos + vec2(size, size) * 0.5; 

     float t = 0.9 + 0.2 * sin(u_time + (starValue - prob)/(1.0 - prob) * 45.0); //Item 3: 

     color = 1.0 - distance(gl_FragCoord.xy, center)/(0.9 * size); 
     color = color * t/(abs(gl_FragCoord.y - center.y)) * t/(abs(gl_FragCoord.x - center.x)); 
    } 
    else if (rand(v_tex_coord) > 0.996) 
    { 
     float r = rand(gl_FragCoord.xy); 
     color = r * (0.25 * sin(u_time * (r * 5.0) + 720.0 * r) + 0.75); 
    } 

    gl_FragColor = vec4(vec3(color), 1.0); 
} 

播放與第1項：增加數星星在天空中的數字越小越明星我喜歡的數量是大約50不會太密集 項目2：改變隨機性要麼星星會出現在一起的距離如何1 =無，0.1 = 0.75左右並排，給人一種不錯的感覺。

第3項是大部分神奇發生的地方，這是恆星的大小和脈搏。

float t = 0.9 

更改爲0.9，會增加初始星號的註冊或降低一個不錯的值是1.4不太大不能太小。

float t = 0.9 + 0.2 

在這個等式0.2改變所述第二值，將比例地增加星星的脈衝寬度影響到I 1.4 1.2值喜歡原來的大小。

着色器添加到您的SWIFT項目中添加一個精靈到現場屏幕尺寸再加入這樣的着色器：

let backgroundImage = SKSpriteNode() 
backgroundImage.texture = textureAtlas.textureNamed("any) 
    backgroundImage.size = screenSize 


     let shader = SKShader(fileNamed: "nightSky.fsh") 
     backgroundImage.shader = shader