Method _initShader

src/webgpu/p5.RendererWebGPU.js:895–973

(shader)

    }

    _initShader(shader) {
      const device = this.device;

      if (shader.shaderType === 'compute') {
        // Compute shader initialization
        shader.computeModule = device.createShaderModule({ code: shader.computeSrc() });
        shader._computePipelineCache = null;
        shader._workgroupSize = null;

        // Create compute pipeline (deferred until first compute() call)
        shader.getPipeline = ({ workgroupSize }) => {
          if (!shader._computePipelineCache) {
            shader._computePipelineCache = device.createComputePipeline({
              layout: shader._pipelineLayout,
              compute: {
                module: shader.computeModule,
                entryPoint: 'main'
              }
            });
            shader._workgroupSize = workgroupSize;
          }
          return shader._computePipelineCache;
        };

        return;
      }

      // Render shader initialization
      shader.vertModule = device.createShaderModule({ code: shader.vertSrc() });
      shader.fragModule = device.createShaderModule({ code: shader.fragSrc() });

      shader._pipelineCache = new Map();
      shader.getPipeline = ({ topology, blendMode, sampleCount, format, depthFormat, clipping, clipApplied }) => {
        const key = `${topology}_${blendMode}_${sampleCount}_${format}_${depthFormat}_${clipping}_${clipApplied}`;
        if (!shader._pipelineCache.has(key)) {
          const pipeline = device.createRenderPipeline({
            layout: shader._pipelineLayout,
            vertex: {
              module: shader.vertModule,
              entryPoint: 'main',
              buffers: this._getVertexLayout(shader),
            },
            fragment: {
              module: shader.fragModule,
              entryPoint: 'main',
              targets: [{
                format,
                blend: this._getBlendState(blendMode),
              }],
            },
            primitive: { topology },
            multisample: { count: sampleCount },
            ...(depthFormat ? {
              depthStencil: {
                format: depthFormat,
                depthWriteEnabled: !clipping,
                depthCompare: 'less-equal',
                stencilFront: {