[BREAKING] Deprecated pc.createShader and pc.createShaderFromCode

examples/src/examples/graphics/integer-textures.example.mjs

@@ -127,31 +127,29 @@ const outputRenderTarget = createPixelRenderTarget(2, outputTexture);
 
 // This is shader runs the sand simulation
 // It uses integer textures to store the state of each pixel
-const sandShader = pc.createShaderFromCode(
-    device,
-    pc.RenderPassShaderQuad.quadVertexShader,
-    files['sandSimulation.frag'],
-    'SandShader',
-    { aPosition: pc.SEMANTIC_POSITION },
+const sandShader = pc.ShaderUtils.createShader(device, {
+    uniqueName: 'SandShader',
+    attributes: { aPosition: pc.SEMANTIC_POSITION },
+    vertexGLSL: pc.RenderPassShaderQuad.quadVertexShader,
+    fragmentGLSL: files['sandSimulation.frag'],
     // Note that we are changing the shader output type to 'uint'
     // This means we only have to return a single integer value from the shader,
     // whereas the default is to return a vec4. This option allows you to pass
     // an array of types to specify the output type for each color attachment.
     // Unspecified types are assumed to be 'vec4'.
-    { fragmentOutputTypes: ['uint'] }
-);
+    fragmentOutputTypes: ['uint']
+});
 
 // This shader reads the integer textures
 // and renders a visual representation of the simulation
-const outputShader = pc.createShaderFromCode(
-    device,
-    pc.RenderPassShaderQuad.quadVertexShader,
-    files['renderOutput.frag'],
-    'RenderOutputShader',
-    { aPosition: pc.SEMANTIC_POSITION }
+const outputShader = pc.ShaderUtils.createShader(device, {
+    uniqueName: 'RenderOutputShader',
+    attributes: { aPosition: pc.SEMANTIC_POSITION },
+    vertexGLSL: pc.RenderPassShaderQuad.quadVertexShader,
+    fragmentGLSL: files['renderOutput.frag']
     // For the output shader, we don't need to specify the output type,
     // as we are returning a vec4 by default.
-);
+});
 
 // Write the initial simulation state to the integer texture
 const resetData = () => {

scripts/posteffects/posteffect-blend.js

@@ -27,8 +27,11 @@ function BlendEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'BlendShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BlendShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-bloom.js

@@ -137,9 +137,26 @@ function BloomEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.extractShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, extractFrag, 'BloomExtractShader', attributes);
-    this.blurShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, gaussianBlurFrag, 'BloomBlurShader', attributes);
-    this.combineShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, combineFrag, 'BloomCombineShader', attributes);
+    this.extractShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BloomExtractShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: extractFrag
+    });
+
+    this.blurShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BloomBlurShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: gaussianBlurFrag
+    });
+
+    this.combineShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BloomCombineShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: combineFrag
+    });
 
     this.targets = [];
 

scripts/posteffects/posteffect-bokeh.js

@@ -96,8 +96,11 @@ function BokehEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'BokehShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BokehShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-brightnesscontrast.js

@@ -32,8 +32,11 @@ function BrightnessContrastEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'BrightnessContrastShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'BrightnessContrastShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-edgedetect.js

@@ -52,8 +52,11 @@ function EdgeDetectEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'EdgeDetectShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'EdgeDetectShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-fxaa.js

@@ -70,8 +70,11 @@ function FxaaEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.fxaaShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fxaaFrag, 'FxaaShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.fxaaShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'FxaaShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fxaaFrag
     });
 
     // Uniforms

scripts/posteffects/posteffect-horizontaltiltshift.js

@@ -37,8 +37,11 @@ function HorizontalTiltShiftEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'HorizontalTiltShiftShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'HorizontalTiltShiftShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // uniforms

scripts/posteffects/posteffect-huesaturation.js

@@ -44,8 +44,11 @@ function HueSaturationEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'HueSaturationShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'HueSaturationShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // uniforms

scripts/posteffects/posteffect-luminosity.js

@@ -23,8 +23,11 @@ function LuminosityEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'LuminosityShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'LuminosityShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 }
 

scripts/posteffects/posteffect-outline.js

@@ -46,8 +46,11 @@ function OutlineEffect(graphicsDevice, thickness) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'OutlineShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'OutlineShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-sepia.js

@@ -29,8 +29,11 @@ function SepiaEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'SepiaShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'SepiaShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // Uniforms

scripts/posteffects/posteffect-ssao.js

@@ -316,9 +316,27 @@ function SSAOEffect(graphicsDevice, ssaoScript) {
         aPosition: pc.SEMANTIC_POSITION
     };
 
-    this.ssaoShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fSsao, 'SsaoShader', attributes);
-    this.blurShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fblur, 'SsaoBlurShader', attributes);
-    this.outputShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, foutput, 'SsaoOutputShader', attributes);
+    this.ssaoShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'SsaoShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fSsao
+    });
+
+    this.blurShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'SsaoBlurShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fblur
+    });
+
+    this.outputShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'SsaoOutputShader',
+        attributes: attributes,
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: foutput
+    });
+
 
     // Uniforms
     this.radius = 4;

scripts/posteffects/posteffect-verticaltiltshift.js

@@ -37,8 +37,11 @@ function VerticalTiltShiftEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.shader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, fshader, 'VerticalTiltShiftShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.shader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'VerticalTiltShiftShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: fshader
     });
 
     // uniforms

scripts/posteffects/posteffect-vignette.js

@@ -27,8 +27,11 @@ function VignetteEffect(graphicsDevice) {
         '}'
     ].join('\n');
 
-    this.vignetteShader = pc.createShaderFromCode(graphicsDevice, pc.PostEffect.quadVertexShader, luminosityFrag, 'VignetteShader', {
-        aPosition: pc.SEMANTIC_POSITION
+    this.vignetteShader = pc.ShaderUtils.createShader(graphicsDevice, {
+        uniqueName: 'VignetteShader',
+        attributes: { aPosition: pc.SEMANTIC_POSITION },
+        vertexGLSL: pc.PostEffect.quadVertexShader,
+        fragmentGLSL: luminosityFrag
     });
 
     this.offset = 1;

src/extras/exporters/core-exporter.js

@@ -1,11 +1,11 @@
-import { createShaderFromCode } from '../../scene/shader-lib/utils.js';
+import { ShaderUtils } from '../../scene/shader-lib/shader-utils.js';
 import { Texture } from '../../platform/graphics/texture.js';
 import { BlendState } from '../../platform/graphics/blend-state.js';
 import { drawQuadWithShader } from '../../scene/graphics/quad-render-utils.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
 import {
     FILTER_LINEAR, ADDRESS_CLAMP_TO_EDGE, isCompressedPixelFormat, PIXELFORMAT_RGBA8,
-    SEMANTIC_POSITION, SHADERLANGUAGE_WGSL, SHADERLANGUAGE_GLSL
+    SEMANTIC_POSITION
 } from '../../platform/graphics/constants.js';
 import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';
 import { shaderChunksWGSL } from '../../scene/shader-lib/chunks-wgsl/chunks-wgsl.js';
@@ -102,14 +102,15 @@ class CoreExporter {
             depth: false
         });
 
-        // render to a render target using a blit shader
-        const shader = device.isWebGPU ?
-            createShaderFromCode(device, shaderChunksWGSL.fullscreenQuadVS, shaderChunksWGSL.outputTex2DPS, 'ShaderCoreExporterBlit',
-                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_WGSL }
-            ) :
-            createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderChunks.outputTex2DPS, 'ShaderCoreExporterBlit',
-                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_GLSL }
-            );
+        const shader = ShaderUtils.createShader(device, {
+            uniqueName: 'ShaderCoreExporterBlit',
+            attributes: { vertex_position: SEMANTIC_POSITION },
+            vertexGLSL: shaderChunks.fullscreenQuadVS,
+            fragmentGLSL: shaderChunks.outputTex2DPS,
+            vertexWGSL: shaderChunksWGSL.fullscreenQuadVS,
+            fragmentWGSL: shaderChunksWGSL.outputTex2DPS
+        });
+
         device.scope.resolve('source').setValue(texture);
         device.setBlendState(BlendState.NOBLEND);
         drawQuadWithShader(device, renderTarget, shader);

src/extras/renderers/outline-renderer.js

@@ -5,9 +5,7 @@ import {
     ADDRESS_CLAMP_TO_EDGE, BLENDEQUATION_ADD, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDMODE_SRC_ALPHA,
     CULLFACE_NONE,
     FILTER_LINEAR, FILTER_LINEAR_MIPMAP_LINEAR, PIXELFORMAT_SRGBA8,
-    SEMANTIC_POSITION,
-    SHADERLANGUAGE_GLSL,
-    SHADERLANGUAGE_WGSL
+    SEMANTIC_POSITION
 } from '../../platform/graphics/constants.js';
 import { DepthState } from '../../platform/graphics/depth-state.js';
 import { RenderTarget } from '../../platform/graphics/render-target.js';
@@ -18,7 +16,7 @@ import { StandardMaterialOptions } from '../../scene/materials/standard-material
 import { StandardMaterial } from '../../scene/materials/standard-material.js';
 import { shaderChunksWGSL } from '../../scene/shader-lib/chunks-wgsl/chunks-wgsl.js';
 import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';
-import { createShaderFromCode } from '../../scene/shader-lib/utils.js';
+import { ShaderUtils } from '../../scene/shader-lib/shader-utils.js';
 
 /**
  * @import { AppBase } from '../../framework/app-base.js'
@@ -117,13 +115,22 @@ class OutlineRenderer {
         this.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA);
 
         const device = this.app.graphicsDevice;
-        this.shaderExtend = createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderOutlineExtendPS, 'OutlineExtendShader');
 
-        this.shaderBlend = device.isWebGPU ?
-            createShaderFromCode(device, shaderChunksWGSL.fullscreenQuadVS, shaderChunksWGSL.outputTex2DPS, 'OutlineBlendShader',
-                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_WGSL }) :
-            createShaderFromCode(device, shaderChunks.fullscreenQuadVS, shaderChunks.outputTex2DPS, 'OutlineBlendShader',
-                { vertex_position: SEMANTIC_POSITION }, { shaderLanguage: SHADERLANGUAGE_GLSL });
+        this.shaderExtend = ShaderUtils.createShader(device, {
+            uniqueName: 'OutlineExtendShader',
+            attributes: { vertex_position: SEMANTIC_POSITION },
+            vertexGLSL: shaderChunks.fullscreenQuadVS,
+            fragmentGLSL: shaderOutlineExtendPS
+        });
+
+        this.shaderBlend = ShaderUtils.createShader(device, {
+            uniqueName: 'OutlineBlendShader',
+            attributes: { vertex_position: SEMANTIC_POSITION },
+            vertexGLSL: shaderChunks.fullscreenQuadVS,
+            fragmentGLSL: shaderChunks.outputTex2DPS,
+            vertexWGSL: shaderChunksWGSL.fullscreenQuadVS,
+            fragmentWGSL: shaderChunksWGSL.outputTex2DPS
+        });
 
         this.quadRenderer = new QuadRender(this.shaderBlend);