Shaders error

HasnainX · June 21, 2024, 12:00pm

can anyone tell me what type of issue this is? I’m trying to run the gizmo controller in runtime but once I launch it , I get this error

mvaligursky · June 21, 2024, 12:25pm

Can you open the dev console in your browser and post all messages from there pls.

HasnainX · June 21, 2024, 12:34pm

this is the original build link which I fork the project

https://playcanvas.com/project/853352/overview/runtime-transform-handle

HasnainX · June 21, 2024, 12:40pm

Errors:

WebXR emulator extension overrides native WebXR API with polyfill.
debug.js:85 Powered by PlayCanvas 1.71.5 7968695bc
VM543:37274 WebXR emulator extension overrides native WebXR API with polyfill.
messenger.js:78 messenger connected
/meta.json:1

   Failed to load resource: the server responded with a status of 400 ()Understand this error

meshopt_decoder.js:23 Warning: meshopt_decoder is using experimental SIMD support
main.ts:6 Main.js detected: runtime? true
debug.js:26 DEPRECATED: pc.createCone is deprecated. Use ‘pc.Mesh.fromGeometry(device, new ConeGeometry(options);’ format instead.
deprecated @ debug.js:26
createCone @ deprecated.js:498
generateTranslationAxis @ handleMesh.js:132
generateTranslationHandle @ handleMesh.js:85
RuntimeTransformHandle @ runtimeTransformHandle.js:132
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
debug.js:26 DEPRECATED: pc.createCylinder is deprecated. Use ‘pc.Mesh.fromGeometry(device, new CylinderGeometry(options);’ format instead.
deprecated @ debug.js:26
createCylinder @ deprecated.js:503
generateTranslationAxis @ handleMesh.js:133
generateTranslationHandle @ handleMesh.js:85
RuntimeTransformHandle @ runtimeTransformHandle.js:132
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
debug.js:26 DEPRECATED: pc.createBox is deprecated. Use ‘pc.Mesh.fromGeometry(device, new BoxGeometry(options);’ format instead.
deprecated @ debug.js:26
createBox @ deprecated.js:483
generateTranslationAxis @ handleMesh.js:146
generateTranslationHandle @ handleMesh.js:85
RuntimeTransformHandle @ runtimeTransformHandle.js:132
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
debug.js:26 DEPRECATED: pc.createPlane is deprecated. Use ‘pc.Mesh.fromGeometry(device, new PlaneGeometry(options);’ format instead.
deprecated @ debug.js:26
createPlane @ deprecated.js:478
generateTranslationAxis @ handleMesh.js:157
generateTranslationHandle @ handleMesh.js:85
RuntimeTransformHandle @ runtimeTransformHandle.js:132
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
debug.js:26 DEPRECATED: pc.createTorus is deprecated. Use ‘pc.Mesh.fromGeometry(device, new TorusGeometry(options);’ format instead.
deprecated @ debug.js:26
createTorus @ deprecated.js:488
generateRotationAxis @ handleMesh.js:200
generateRotatioHandle @ handleMesh.js:100
RuntimeTransformHandle @ runtimeTransformHandle.js:133
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
outlineCamera.js:38

precision mediump float;

uniform vec4 uColor; // 控制矩形显示的颜色

void main(void)
{
gl_FragColor = uColor;
}

debug.js:26 DEPRECATED: pc.Layer#renderTarget is deprecated. Set the render target on the camera instead.
deprecated @ debug.js:26
set @ deprecated.js:866
initEffect @ outlineCamera.js:94
setOptions @ outlineCamera.js:48
OutlineCamera @ outlineCamera.js:39
use @ useToolHelper.js:33
RuntimeTransformHandle @ runtimeTransformHandle.js:186
use @ useToolHelper.js:33
RuntimeSelection.postInitialize @ runtimeSelection.ts:13
_scriptMethod @ component.js:374
onPostStateChange @ component.js:275
_onPostInitialize @ component.js:409
_callComponentMethod @ system.js:144
_onPostInitialize @ system.js:160
fire @ event-handler.js:257
start @ app-base.js:1090
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
debug.js:119 Shader chunk ‘endPS’ is API version 1.65, but the supplied chunk is version -. Please update to the latest API: Shader Chunk Migrations | PlayCanvas Developer Site
warnOnce @ debug.js:119
validateUserChunks @ chunk-validation.js:138
LitShader @ lit-shader.js:81
createShaderDefinition @ standard.js:213
generateShaderDefinition @ program-library.js:114
getProgram @ program-library.js:151
getShaderVariant @ standard-material.js:911
getShaderInstance @ mesh-instance.js:526
renderForwardPrepareMaterials @ forward-renderer.js:519
renderForward @ forward-renderer.js:644
renderForwardLayer @ forward-renderer.js:755
renderRenderAction @ render-pass-forward.js:278
execute @ render-pass-forward.js:207
render @ render-pass.js:375
render @ frame-graph.js:133
renderComposition @ app-base.js:1199
render @ app-base.js:1186
(anonymous) @ app-base.js:2184
start @ app-base.js:1094
(anonymous) @ viewport.js:53
_preloadScripts @ app-base.js:771
(anonymous) @ viewport.js:36
done @ app-base.js:725
onAssetLoad @ app-base.js:738
fire @ event-handler.js:257
_fireLoad @ asset-registry.js:393
_opened @ asset-registry.js:427
_loaded @ asset-registry.js:450
_onSuccess @ loader.js:246
(anonymous) @ loader.js:179
handler @ img.js:55
(anonymous) @ img.js:151
Promise.then (async)
_loadImageBitmapFromBlob @ img.js:151
(anonymous) @ img.js:141
_onSuccess @ http.js:498
_onReadyStateChange @ http.js:462
xhr.onreadystatechange @ http.js:379Understand this warning
viewport-error-console.js:159 Failed to compile fragment shader:

ERROR: 0:336: ‘combineColor’ : no matching overloaded function found
ERROR: 0:336: ‘=’ : dimension mismatch
ERROR: 0:336: ‘assign’ : cannot convert from ‘const mediump float’ to ‘highp 3-component vector of float’
ERROR: 0:337: ‘+=’ : operation with void operands
ERROR: 0:337: ‘assign’ : cannot convert from ‘void’ to ‘highp 3-component vector of float’

mvaligursky · June 21, 2024, 12:49pm

the problem is that a custom shader chunk is used, and it uses an old format … and so that needs to be updated to the new format. This is the relevant info from the log:

debug.js:119 Shader chunk 'endPS' is API version 1.65, but the supplied
chunk is version -. Please update to the latest API: 
https://developer.playcanvas.com/user-manual/graphics/shader-chunk-migrations/

HasnainX · June 21, 2024, 12:52pm

ohh ok so how can i update it

will · June 21, 2024, 4:54pm

Find the endPS chunk in your code and update it based on the current implementation:

github.com

playcanvas/engine/blob/main/src/scene/shader-lib/chunks/lit/frag/end.js

export default /* glsl */`
    gl_FragColor.rgb = combineColor(litArgs_albedo, litArgs_sheen_specularity, litArgs_clearcoat_specularity);

    gl_FragColor.rgb += litArgs_emission;
    gl_FragColor.rgb = addFog(gl_FragColor.rgb);
    gl_FragColor.rgb = toneMap(gl_FragColor.rgb);
    gl_FragColor.rgb = gammaCorrectOutput(gl_FragColor.rgb);
`;

HasnainX · June 23, 2024, 9:34am

Thanks will let me check and update you here

HasnainX · July 4, 2024, 7:04am

Hi Will thanks for your reply on that time, actually I have found the code where you told me to update this code with the endPS chunk, but it’s a little bit hard for me to like how do I add this code in the code. Your help would be appreciated for me. Thanks

will · July 4, 2024, 1:09pm

But that’s the built WebPack output. Find it in your original, unbuilt source… Wherever noAmbientEndPS is declared, that’s what you need to edit.