pixijs/pixijs-renderización-personalizada

¿Qué hace pixijs-renderización-personalizada?

Usa esta habilidad al escribir shaders, uniforms, filtros o batchers personalizados en PixiJS v8. Cubre Shader.from({gl, gpu, resources}), GlProgram/GpuProgram, UniformGroup con uniforms tipados (f32, vec2, mat4x4), modo UBO, texturas como recursos, filtro personalizado mediante Filter.from, convenciones GLSL ES 3.0 (in/out, finalColor, texture()), muestreo de uBackTexture, pixi.js/unsafe-eval para CSP estrictos, y batcher personalizado mediante extensiones. Se activa con: Shader, GlProgram, GpuProgram, UniformGroup, Batcher, Filter, Filter.from, GLSL, WGSL, UBO, uniform, custom shader, finalColor, uBackTexture, blendRequired, unsafe-eval.

Shaders y Programas

Shader.from({gl, gpu, resources})

Crea un shader que funciona tanto en WebGL como en WebGPU. El objeto gl y gpu contienen programas respectivos.

import { Shader } from 'pixi.js';

const shader = Shader.from({
    gl: {
        vertex: `
            in vec2 aPosition;
            void main() {
                gl_Position = vec4(aPosition, 0.0, 1.0);
            }
        `,
        fragment: `
            in vec4 finalColor;
            out vec4 fragColor;
            void main() {
                fragColor = finalColor;
            }
        `,
    },
    gpu: {
        vertex: `
            struct VertexOutput {
                @builtin(position) position: vec4<f32>,
            }
            @vertex fn main(@location(0) aPosition: vec2<f32>) -> VertexOutput {
                var out: VertexOutput;
                out.position = vec4<f32>(aPosition, 0.0, 1.0);
                return out;
            }
        `,
        fragment: `
            @fragment fn main() -> @location(0) vec4<f32> {
                return vec4<f32>(1.0, 0.0, 0.0, 1.0);
            }
        `,
    },
    resources: {
        uGlobalUniforms: uniformGroup,
    }
});

GlProgram y GpuProgram

Puedes usar GlProgram para WebGL y GpuProgram para WebGPU por separado.

import { GlProgram, GpuProgram } from 'pixi.js';

const glProgram = new GlProgram({
    vertex: `
        in vec2 aPosition;
        void main() {
            gl_Position = vec4(aPosition, 0.0, 1.0);
        }
    `,
    fragment: `
        in vec4 finalColor;
        out vec4 fragColor;
        void main() {
            fragColor = finalColor;
        }
    `
});

const gpuProgram = new GpuProgram({
    vertex: {
        entryPoint: 'main',
        source: `...código WGSL...`
    },
    fragment: {
        entryPoint: 'main',
        source: `...código WGSL...`
    }
});

UniformGroup y Uniformes Tipados

UniformGroup con uniformes tipados

Usa arrays tipados para mayor eficiencia.

import { UniformGroup } from 'pixi.js';

const uniformGroup = new UniformGroup({
    uTime: { value: 0, type: 'f32' },
    uResolution: { value: new Float32Array([800, 600]), type: 'vec2<f32>' },
    uTransform: { value: new Float32Array(16), type: 'mat4x4<f32>' },
    uMainTexture: { value: texture, type: 'texture2D<f32>' }
});

Modo UBO

Para mayor rendimiento, usa UBO (Uniform Buffer Object).

const uboGroup = new UniformGroup({
    uColor: { value: new Float32Array([1, 0, 0, 1]), type: 'vec4<f32>' },
    uIntensity: { value: 1.0, type: 'f32' }
}, { isUBO: true });

Filtros Personalizados

Filter.from

Crea filtros personalizados fácilmente.

import { Filter } from 'pixi.js';

const customFilter = Filter.from({
    gl: {
        vertex: `
            in vec2 aPosition;
            out vec2 vTextureCoord;
            void main() {
                gl_Position = vec4(aPosition, 0.0, 1.0);
                vTextureCoord = aPosition * 0.5 + 0.5;
            }
        `,
        fragment: `
            in vec2 vTextureCoord;
            in vec4 finalColor;
            out vec4 fragColor;
            uniform sampler2D uTexture;
            uniform sampler2D uBackTexture;
            void main() {
                vec4 front = texture(uTexture, vTextureCoord);
                vec4 back = texture(uBackTexture, vTextureCoord);
                fragColor = mix(front, back, 0.5);
            }
        `
    },
    gpu: {
        vertex: `...`,
        fragment: `...`
    },
    resources: {
        uTexture: texture,
        uBackTexture: backTexture
    }
});

Convenciones GLSL ES 3.0

• Usa in y out en lugar de attribute y varying.
• El color de salida se nombra finalColor.
• Muestrea texturas con texture() en lugar de texture2D().
• uBackTexture es la textura del frame anterior.

#version 300 es
precision mediump float;

in vec2 vTextureCoord;
in vec4 finalColor;

uniform sampler2D uTexture;
uniform sampler2D uBackTexture;

out vec4 fragColor;

void main() {
    vec4 front = texture(uTexture, vTextureCoord);
    vec4 back = texture(uBackTexture, vTextureCoord);
    fragColor = mix(front, back, finalColor.a);
}

pixi.js/unsafe-eval para CSP Estricto

Si tu sitio usa Content Security Policy estricto, necesitas agregar unsafe-eval para PixiJS v8.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval'">

o en el servidor:

Content-Security-Policy: script-src 'self' 'unsafe-eval'

Batchers Personalizados mediante Extensiones

Crear un batcher

import { ExtensionType, extensions } from 'pixi.js';

class CustomBatcher {
    static extension = {
        type: ExtensionType.Batcher,
        name: 'custom-batcher'
    };

    build(renderer) {
        // lógica de batch personalizada
    }

    upload(renderer) {
        // subir datos de batch a la GPU
    }

    render(renderer) {
        // renderizar el batch
    }
}

extensions.add(CustomBatcher);

Blend Mode y blendRequired

const batcher = new CustomBatcher();
batcher.blendRequired = true; // fuerza blend mode

Notas Importantes

• Siempre usa Shader.from() para compatibilidad cross-platform.
• Los uniformes tipados mejoran el rendimiento.
• uBackTexture solo está disponible en filtros.
• Para UDP, usa isUBO: true en UniformGroup.
• Los batchers mejoran el rendimiento agrupando objetos similares.