如何让 GLSL 300 es 着色器在 PIXI.JS 中运行答案

【问题标题】：How to get GLSL 300 es shaders running in PIXI.JS如何让 GLSL 300 es 着色器在 PIXI.JS 中运行
【发布时间】：2022-08-05 08:58:25
【问题描述】：

我需要在我的片段着色器中使用诸如textureSize() 之类的函数，但它们在 GLSL 100 中不可用，这是 PIXI 默认使用的。如果我尝试使用它们，我会得到一个错误：

\"textureSize\'\": no matching overloaded function found

如果我尝试将#version 300 es 添加到我的代码顶部（正如一些人所建议的那样），那么我会收到一个新错误：

\'version\' : #version directive must occur before anything else, except for comments and white space

我提供的伴随错误的“完整着色器代码”预览被标记为 PIXI 添加了额外的行，我无法删除这些行。

100版无法使用我需要的功能，第一行之后的版本无法更改，第一行也无法更改。

标签： glsl fragment-shader pixi.js vertex-shader webgl2

【解决方案1】：

好的，所以我正在回答我自己的问题，所以没有其他人必须涉足这个烂摊子。这是解决方案：

首先，您需要在 PIXI 对其进行预处理之后，但在编译之前更改着色器代码。你这样做：

let shaderCode = eventShaderCode;
var simpleShader = new PIXI.Filter(eventVertexShaderCode, shaderCode, this.shaderUniforms);
if (!simpleShader.program.fragmentSrc.includes("#version 300 es")) {
    simpleShader.program.vertexSrc = "#version 300 es \n" + simpleShader.program.vertexSrc;
    simpleShader.program.fragmentSrc =
        "#version 300 es \n" + simpleShader.program.fragmentSrc;
}

我将代码放在 if 语句中，因为我的程序中的多个对象使用此着色器，这可能导致多次添加 #version 行。我不是 100% 确定这是如何发生的，但我认为这与 PIXI 可能使用的某种缓存系统有关，因此它不必多次重新编译同一个着色器。无论如何：这很重要，即使它看起来没有必要。

接下来，您需要实际编写顶点和片段着色器。即使你只修改一个，你也需要重写两个。为了您的方便，我的如下：

顶点着色器：

in vec2 aVertexPosition;

uniform mat3 projectionMatrix;

out vec2 vTextureCoord;

uniform vec4 inputSize;
uniform vec4 outputFrame;

vec4 filterVertexPosition( void )
{
    vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy;

    return vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0, 1.0);
}

vec2 filterTextureCoord( void )
{
    return aVertexPosition * (outputFrame.zw * inputSize.zw);
}

void main(void)
{
    gl_Position = filterVertexPosition();
    vTextureCoord = filterTextureCoord();
}

片段着色器

precision highp float;
uniform sampler2D uSampler;
in vec2 vTextureCoord;
out vec4 color;

void main(){
    color =  texture(uSampler, vTextureCoord);
}

恭喜！您现在可以在您的 PIXI.JS 项目中使用#version 300 es！

【讨论】：