PlayCanvasでカスタムシェーダーをエンティティに追加する

// custom-shader.js
const CustomShader = pc.createScript('customshader');

CustomShader.attributes.add('vs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Vertex Shader'
});

CustomShader.attributes.add('fs', {
    type: 'asset',
    assetType: 'shader',
    title: 'Fragment Shader'
});

CustomShader.prototype.initialize = function() {
		// アトリビュートからバーテックスシェーダを取得
    const vertexShader = this.vs.resource;
		// アトリビュートからフラグメントシェーダーを取得
    const fragmentShader = this.fs.resource;
    const shaderDefinition = {
        attributes: {
            aVertexPosition: pc.SEMANTIC_POSITION, // aVertexPosition バーテックスシェーダーで使う値
        },
        vshader: vertexShader,
        fshader: fragmentShader
    };

    // フラグメントシェーダーとバーテックスシェーダーを渡す
    this.shader = new pc.Shader(this.app.graphicsDevice, shaderDefinition);

    // あとは作ってマテリアルをシェーダーをマテリアルに設定するだけ
    this.material = new pc.Material();
    this.material.setShader(this.shader);
    const render = this.entity.render;
    render.meshInstances[0].material = this.material;

    this.timer = 0; // 追加
	this.material.setParameter("uTime", this.timer);
};

CustomShader.prototype.update = function(dt) {
   this.timer += dt;
   if(this.timer > 1) this.timer = 0;
   this.material.setParameter("uTime", this.timer);
};

precision highp float;

uniform float uTime;
void main(void)
{
    gl_FragColor = vec4(0, 0, uTime, 1.0);
}

attribute vec3 aVertexPosition;

uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;


void main(void)
{
    gl_Position = matrix_viewProjection * matrix_model * vec4(aVertexPosition, 1.0);
}

// this.app.graphicsDevice.scope.variables
pc.app.graphicsDevice.scope.variables

pc.script.attribute('materials', 'asset', [], {
    type: 'material'
});
pc.script.attribute('shader', 'asset', [], {
    type: 'shader',
    max: 1
});

var Plasma = pc.createScript('plasma');

Plasma.attributes.add('materials', {type: 'asset', array: true});
Plasma.attributes.add('shader', {type: 'asset'});

Plasma.prototype.initialize = function () {
    // get the shader asset
    var fs = this.shader.resource;

    // update all the materials with the chunk
    for (var i = 0; i < this.materials.length; i++) {
        var material = this.materials[i].resource;
        material.chunks.APIVersion = pc.CHUNKAPI_1_55;
        material.chunks.emissivePS = fs;
        // Force the shader generator to generate UV processing code
        material.diffuseMap = new pc.Texture(this.app.graphicsDevice, {
            width: 1,
            height: 1,
            format: pc.PIXELFORMAT_R8_G8_B8
        });
        material.setParameter('iGlobalTime', 0);
        material.update();
    }

    this.time = 0;
};

Plasma.prototype.update = function (dt) {
    // update the time uniform in the new shader chunk
    this.time += dt;
    for (var i = 0; i < this.materials.length; i++) {
        var material = this.materials[i].resource;
        material.setParameter('iGlobalTime', this.time);
    }
};

uniform float iGlobalTime;

void getEmission() {
    vec2 p = -1.0 + 2.0 * vUv0;

    // main code, *original shader by: 'Plasma' by Viktor Korsun (2011)
    float x = p.x;
    float y = p.y;
    float mov0 = x+y+cos(sin(iGlobalTime)*2.0)*100.+sin(x/100.)*1000.;
    float mov1 = y / 0.9 +  iGlobalTime;
    float mov2 = x / 0.2;
    float c1 = abs(sin(mov1+iGlobalTime)/2.+mov2/2.-mov1-mov2+iGlobalTime);
    float c2 = abs(sin(c1+sin(mov0/1000.+iGlobalTime)+sin(y/40.+iGlobalTime)+sin((x+y)/100.)*3.));
    float c3 = abs(sin(c2+cos(mov1+mov2+c2)+cos(mov2)+sin(x/1000.)));
    dEmission = vec3(c1, c2, c3);
}

class PostEffectRenderer extends pc.PostEffect {
  constructor(props: {
    graphicsDevice: pc.GraphicsDevice;
    fshader: string;
    vshader: string;
  }) {
    const { graphicsDevice, fshader, vshader } = props;

    super(graphicsDevice);
    var attributes = {
      aVertexPosition: pc.SEMANTIC_POSITION,
    };

    this.customShader = new pc.Shader(graphicsDevice, {
      attributes: attributes,
      vshader: vshader,
      fshader: fshader,
    });
  }
  render(inputTarget, outputTarget, rect) {
    var device = this.device;
    var scope = device.scope;

    scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
    pc.drawFullscreenQuad(
      device,
      outputTarget,
      this.vertexBuffer,
      this.customShader,
      rect
    );
  }
}

export class CustomPostEffect extends pc.ScriptType {
  initialize() {
    const vshader = this.vert;
    const fshader = this.frag;
    this.time = 0;
    this.effect = new PostEffectRenderer({
      graphicsDevice: this.app.graphicsDevice,
      vshader,
      fshader,
    });
    const queue = this.entity.camera.postEffects;
    queue.addEffect(this.effect);

    this.app.mouse.on(pc.EVENT_MOUSEMOVE, (e) => {
      this.app.graphicsDevice.scope.resolve("iMouse").setValue([e.x, e.y]);
    });

    this.on("attr:frag", () => {
      queue.removeEffect(this.effect);
      console.log(this.vert, this.frag);
      this.effect = new PostEffectRenderer({
        graphicsDevice: this.app.graphicsDevice,
        vshader: this.vert,
        fshader: this.frag,
      });
      queue.addEffect(this.effect);
    });

    this.on("state", function (enabled) {
      if (enabled) {
        queue.addEffect(this.effect);
      } else {
        queue.removeEffect(this.effect);
      }
    });
    this.on("destroy", function () {
      queue.removeEffect(this.effect);
    });
  }
  update(dt) {
    this.time += dt;
    this.app.graphicsDevice.scope.resolve("iTime").setValue(this.time);
    this.app.graphicsDevice.scope.resolve("iTimeDelta").setValue(dt);
  }
}

CustomPostEffect.attributes.add("frag", { type: "string" });
CustomPostEffect.attributes.add("vert", { type: "string" });

class PostEffectRenderer extends pc.PostEffect {
  constructor(props: {
    graphicsDevice: pc.GraphicsDevice;
    fshader: string;
    vshader: string;
  }) {
    const { graphicsDevice, fshader, vshader } = props;

    super(graphicsDevice);
    var attributes = {
      aVertexPosition: pc.SEMANTIC_POSITION,
    };

    this.customShader = new pc.Shader(graphicsDevice, {
      attributes: attributes,
      vshader: vshader,
      fshader: fshader,
    });
  }
  // @ts-ignore
  render(inputTarget, outputTarget, rect) {
    pc.drawFullscreenQuad(
      this.device,
      outputTarget,
      this.vertexBuffer,
      this.customShader,
      rect
    );
  }
}

export class CustomPostEffect extends pc.ScriptType {
  initialize() {
    const vshader = this.vert;
    const fshader = this.frag;
    this.time = 0;
    this.effect = new PostEffectRenderer({
      graphicsDevice: this.app.graphicsDevice,
      vshader,
      fshader,
    });
    const queue = this.entity.camera.postEffects;
    queue.addEffect(this.effect);

    this.app.mouse.on(pc.EVENT_MOUSEMOVE, (e) => {
      this.app.graphicsDevice.scope.resolve("iMouse").setValue([e.x, e.y]);
    });

    this.on("attr:frag", () => {
      queue.removeEffect(this.effect);
      console.log(this.vert, this.frag);
      this.effect = new PostEffectRenderer({
        graphicsDevice: this.app.graphicsDevice,
        vshader: this.vert,
        fshader: this.frag,
      });
      queue.addEffect(this.effect);
    });

    this.on("state", function (enabled) {
      if (enabled) {
        queue.addEffect(this.effect);
      } else {
        queue.removeEffect(this.effect);
      }
    });
    this.on("destroy", function () {
      queue.removeEffect(this.effect);
    });
  }
  update(dt) {
    this.time += dt;
    this.app.graphicsDevice.scope.resolve("iTime").setValue(this.time);
    this.app.graphicsDevice.scope.resolve("iTimeDelta").setValue(dt);
  }
}
pc.registerScript(CustomPostEffect)
CustomPostEffect.attributes.add("frag", { type: "string" });
CustomPostEffect.attributes.add("vert", { type: "string" });

export class ShaderChunk extends pc.ScriptType {
  initialize() {
    this.time = 0;
    if (!this.fs || !this.chunk) return;
    const material = this.entity.render.material;
    material.chunks[this.chunk] = this.fs;
    if (this.isGenerateDiffuseMap) {
      this.app.assets.loadFromUrl( "/images/bg-rect-512.png", "texture", (err, asset) => {
        const texture = asset?.resource;
        material.diffuseMap = texture
        material.update();
      } );
      //material.diffuseMap = new pc.Texture(this.app.graphicsDevice, {
      //   width: 1,
      //   height: 1,
      //   format: pc.PIXELFORMAT_R8_G8_B8,
      // });
    }
    material.update();
  }

  update(dt) {
    this.time += dt;
    const material = this.entity.render?.material;
    material.setParameter("iTime", this.time);
    material.setParameter("iTimeDelta", dt);
  }
}
ShaderChunk.attributes.add("fs", { type: "string" });
ShaderChunk.attributes.add("isGenerateDiffuseMap", {
  type: "boolean",
  default: true,
});

ShaderChunk.attributes.add("chunk", {
  type: "string",
  enum: [
    { emissivePS: "emissivePS" },
    { diffusePS: "diffusePS" },
    { normalMapPS: "normalMapPS" },
  ],
  default: "emissivePS",
});

pc.registerScript(ShaderChunk);