标签: fragment-shader

GLSL 给出这样的错误：

无法从“highp float”转换为“highp float 3分量向量”

T选择了错误部分：

vec3 bRgb = texture2D(u_img1, vUv).rgb;
vec3 aRgb = texture2D(u_aImg, vUv).rgb;
vec3 target1 = aRgb * bRgb;
vec3 alum = dot( aRgb, w );
vec3 blum = dot( bRgb, w );
vec3 clum = dot( target1, w );

vec3 target2 = (alum + blum) / (2. * clum); // This is the error line
gl_FragColor = vec4(target2, 1.);

我可以找到错误行，但我不知道如何让它运行。

我对 SpriteKit 中着色器的概念和使用非常陌生。

我发现本教程介绍了如何使用附加到 Color Sprite 的自定义着色器属性的自定义着色器文件 - Fractal.fsh 渲染 Mandelbrot 分形。

https://www.weheartswift.com/fractals-Xcode-6/

它工作得很好，我认为学习 OpenGL ES 和 SpriteKit 中的自定义着色器将是一个有趣的练习。

不过，根据 Apple 的说法，OpenGL ES 自 iOS 12 起已被弃用。

https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/BestPracticesforShaders/BestPracticesforShaders.html

我的问题是这样的：

这是否意味着 SpriteKit 中使用的自定义着色器现在应该用 Metal 编写？

我试图弄清楚如何在 Metal 中重写第一个链接中提到的 fractal.fsh 着色器代码，但我还没有找到任何有关如何将现有自定义 SKShader 从 OpenGL ES 转换为 Metal 的资源。然而，我并不是在寻找有人重写该代码以使用 Metal，而只是寻找一个指向正确方向的指针。

更新： 根据@Knight0fDragon 的回答，我将尝试澄清我的问题：

SKShader 类的文档指出：

“SKShader 对象包含自定义 OpenGL ES 片段着色器。”

https://developer.apple.com/documentation/spritekit/skshader

那么，如果 SKShader 对象拥有自定义的 OpenGL ES 片段着色器，那么在对 OpenGL ES 的支持被弃用后，它将拥有什么？

如果从 iOS 12 开始无法使用 OpenGL ES，那么如何继续创建一个在 SpriteKit 中使用的自定义片段着色器呢？首先，我认为包含 GLSL 代码的 *.fsh 文件可以替换为包含等效金属代码的 *.metal …

Let's consider this mcve:

from OpenGL.GL import *
from OpenGL.GLU import *
from OpenGL.GLUT import *
import textwrap
from string import Template


def compile(shader_type, source):
    identifier = glCreateShader(shader_type)
    glShaderSource(identifier, source)
    glCompileShader(identifier)

    if not glGetShaderiv(identifier, GL_COMPILE_STATUS):
        for i, l in enumerate(source.splitlines()):
            print(f"{i+1}: {l}")
        raise Exception(glGetShaderInfoLog(identifier).decode("utf-8"))

    return identifier


def create_program(vs, fs):
    vs_identifier = compile(GL_VERTEX_SHADER, vs)
    fs_identifier = compile(GL_FRAGMENT_SHADER, fs)

    program = glCreateProgram()
    glAttachShader(program, vs_identifier)
    glAttachShader(program, fs_identifier)
    glLinkProgram(program)
    if not glGetProgramiv(program, GL_LINK_STATUS):
        raise RuntimeError(glGetProgramInfoLog(program))

    return program


def set_uniform1f(prog, name, v0):
    # print("set_uniform1f", name, …

这是我第一次处理使用 Angular 构建的项目，因此我仍在习惯针对 Angular 和 WebPack 的大量实践。

我希望在全屏画布中加载自定义片段着色器（.frag/.glsl）以用作组件的背景。对于过去的模型或其他不使用角度的项目，我设法在GlslCanvas等库的帮助下轻松做到这一点，这些库管理全屏四边形和基本制服的设置，但现在我无法弄清楚向我抛出的一些错误当尝试构建我的角度应用程序时。

经过几个小时的浏览，我找到了如何成功导入着色器代码，使用GLSL-shader-loader并通过 @Angular-devkit/build-Angular 和 @Angular-builder/custom-webpacks 添加自定义 Webpack 配置：

# my-custom-webpack.config.js

module.exports = {
    module: {
        rules: [{
            test: /\.(frag|vert|glsl)$/,
            use: [
                { 
                loader: 'glsl-shader-loader',
                options: {}  
                }
            ]
        }]
    }
}

我还了解到我必须通过定义所需的声明来阻止打字稿抱怨导入时的非 ts 模块，即：

# my-declarations.d.ts

declare module '*.glsl';
declare module '*.frag';
declare module '*.vert';

此时，片段着色器的代码已正确导入（或者我认为是这样？），我可以将其记录或打印出来（例如{{ myShaderCode }}）：

# glsl-bg.component.ts

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import frag from './myShader.frag';
import * as GlslCanvas …

我试图让我的着色器在 Shaderfrog 中工作，我通过 URL 导入我的 glsl 沙箱版本。

我收到错误：“C:\fakepath(111,2-27)：警告 X3550：数组引用不能用作左值；本身不可寻址，强制循环展开。

真的不确定为什么会发生这个错误，我尝试取消循环内的任何循环，但无济于事。

这是我的片段代码：

#extension GL_OES_standard_derivatives : enable

precision highp float;
varying vec2 vUv;
uniform float time;
uniform vec2 resolution;
void main() 
{
    vec2 p = vUv.xy / resolution.x * .05;
    vec3 col;

    for (float j = 0.; j < 3.; j++) {

        p.x += ((0.05 / 2.0) * sin(2.0 * 10. * p.y + (time*0.2) + cos((time / (150. * 2.0)) * 2.0)));
        p.y += ((0.02 / 2.0)* cos(2.0 * 10. * …