Chrome 97.0.4692.71: error with .receiveShadows = true;

Fenryll · January 8, 2022, 9:26am

Happy new year babylonians!

2 days ago some of my card game players reported they were no more seeing the table and board on which they were playing cards.
I just understood today this is happening only in Chrome and that it is related to these two lines:

tapis.receiveShadows = true;
table.receiveShadows = true;

table is a plane and tapis is a box, they are both textured with some preloaded images…

Here is the issue in the browser js console:

babylon.js?633b:16 BJS - [10:17:53]: Unable to compile effect:
e._ErrorEnabled @ babylon.js?633b:16
e._processCompilationErrors @ babylon.js?633b:16
e._checkIsReady @ babylon.js?633b:16
eval @ babylon.js?633b:16
setTimeout (async)
e._checkIsReady @ babylon.js?633b:16
e._prepareEffect @ babylon.js?633b:16
e._useFinalCode @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
e @ babylon.js?633b:16
e.createEffect @ babylon.js?633b:16
t.isReadyForSubMesh @ babylon.js?633b:16
t.render @ babylon.js?633b:16
t.render @ babylon.js?633b:16
e.renderUnsorted @ babylon.js?633b:16
e.render @ babylon.js?633b:16
e.render @ babylon.js?633b:16
t._renderForCamera @ babylon.js?633b:16
t._processSubCameras @ babylon.js?633b:16
t.render @ babylon.js?633b:16
eval @ Game.vue?c39f:593
t._renderFrame @ babylon.js?633b:16
t._renderLoop @ babylon.js?633b:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js?633b:16
e._queueNewFrame @ babylon.js?633b:16
e.runRenderLoop @ babylon.js?633b:16
startGame @ Game.vue?c39f:592
setPlaying @ App.vue?234e:170
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
setPlaying @ Salon.vue?d351:331
eval @ SocketManager.js?8b85:62
Emitter.emit @ index.js?db1a:133
Socket.onevent @ socket.js?2851:278
Socket.onpacket @ socket.js?2851:236
eval @ index.js?40de:21
Emitter.emit @ index.js?db1a:133
Manager.ondecoded @ manager.js?78eb:345
eval @ index.js?40de:21
Emitter.emit @ index.js?68ab:133
Decoder.add @ index.js?568d:251
Manager.ondata @ manager.js?78eb:335
eval @ index.js?40de:21
Emitter.emit @ index.js?d4c9:133
Socket.onPacket @ socket.js?da92:461
eval @ socket.js?da92:278
Emitter.emit @ index.js?d4c9:133
Transport.onPacket @ transport.js?19b7:149
Transport.onData @ transport.js?19b7:141
ws.onmessage @ websocket.js?0882:156
babylon.js?633b:16 BJS - [10:17:53]: Uniforms:  world, view, viewProjection, vEyePosition, vLightsType, vAmbientColor, vDiffuseColor, vSpecularColor, vEmissiveColor, visibility, vFogInfos, vFogColor, pointSize, vDiffuseInfos, vAmbientInfos, vOpacityInfos, vReflectionInfos, vEmissiveInfos, vSpecularInfos, vBumpInfos, vLightmapInfos, vRefractionInfos, mBones, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, vClipPlane5, vClipPlane6, diffuseMatrix, ambientMatrix, opacityMatrix, reflectionMatrix, emissiveMatrix, specularMatrix, bumpMatrix, normalMatrix, lightmapMatrix, refractionMatrix, diffuseLeftColor, diffuseRightColor, opacityParts, reflectionLeftColor, reflectionRightColor, emissiveLeftColor, emissiveRightColor, refractionLeftColor, refractionRightColor, vReflectionPosition, vReflectionSize, logarithmicDepthConstant, vTangentSpaceParams, alphaCutOff, boneTextureWidth, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, viewFrustumZ0, cascadeBlendFactor0, lightSizeUVCorrection0, depthCorrection0, penumbraDarkness0, frustumLengths0, vLightData1, vLightDiffuse1, vLightSpecular1, vLightDirection1, vLightFalloff1, vLightGround1, lightMatrix1, shadowsInfo1, depthValues1, viewFrustumZ1, cascadeBlendFactor1, lightSizeUVCorrection1, depthCorrection1, penumbraDarkness1, frustumLengths1, diffuseSampler, ambientSampler, opacitySampler, reflectionCubeSampler, reflection2DSampler, emissiveSampler, specularSampler, bumpSampler, lightmapSampler, refractionCubeSampler, refraction2DSampler, boneSampler, shadowSampler0, depthSampler0, shadowSampler1, depthSampler1
e._ErrorEnabled @ babylon.js?633b:16
e._processCompilationErrors @ babylon.js?633b:16
e._checkIsReady @ babylon.js?633b:16
eval @ babylon.js?633b:16
setTimeout (async)
e._checkIsReady @ babylon.js?633b:16
e._prepareEffect @ babylon.js?633b:16
e._useFinalCode @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
e @ babylon.js?633b:16
e.createEffect @ babylon.js?633b:16
t.isReadyForSubMesh @ babylon.js?633b:16
t.render @ babylon.js?633b:16
t.render @ babylon.js?633b:16
e.renderUnsorted @ babylon.js?633b:16
e.render @ babylon.js?633b:16
e.render @ babylon.js?633b:16
t._renderForCamera @ babylon.js?633b:16
t._processSubCameras @ babylon.js?633b:16
t.render @ babylon.js?633b:16
eval @ Game.vue?c39f:593
t._renderFrame @ babylon.js?633b:16
t._renderLoop @ babylon.js?633b:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js?633b:16
e._queueNewFrame @ babylon.js?633b:16
e.runRenderLoop @ babylon.js?633b:16
startGame @ Game.vue?c39f:592
setPlaying @ App.vue?234e:170
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
setPlaying @ Salon.vue?d351:331
eval @ SocketManager.js?8b85:62
Emitter.emit @ index.js?db1a:133
Socket.onevent @ socket.js?2851:278
Socket.onpacket @ socket.js?2851:236
eval @ index.js?40de:21
Emitter.emit @ index.js?db1a:133
Manager.ondecoded @ manager.js?78eb:345
eval @ index.js?40de:21
Emitter.emit @ index.js?68ab:133
Decoder.add @ index.js?568d:251
Manager.ondata @ manager.js?78eb:335
eval @ index.js?40de:21
Emitter.emit @ index.js?d4c9:133
Socket.onPacket @ socket.js?da92:461
eval @ socket.js?da92:278
Emitter.emit @ index.js?d4c9:133
Transport.onPacket @ transport.js?19b7:149
Transport.onData @ transport.js?19b7:141
ws.onmessage @ websocket.js?0882:156
babylon.js?633b:16 BJS - [10:17:53]: Attributes:  position, normal, uv
e._ErrorEnabled @ babylon.js?633b:16
e._processCompilationErrors @ babylon.js?633b:16
e._checkIsReady @ babylon.js?633b:16
eval @ babylon.js?633b:16
setTimeout (async)
e._checkIsReady @ babylon.js?633b:16
e._prepareEffect @ babylon.js?633b:16
e._useFinalCode @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
e @ babylon.js?633b:16
e.createEffect @ babylon.js?633b:16
t.isReadyForSubMesh @ babylon.js?633b:16
t.render @ babylon.js?633b:16
t.render @ babylon.js?633b:16
e.renderUnsorted @ babylon.js?633b:16
e.render @ babylon.js?633b:16
e.render @ babylon.js?633b:16
t._renderForCamera @ babylon.js?633b:16
t._processSubCameras @ babylon.js?633b:16
t.render @ babylon.js?633b:16
eval @ Game.vue?c39f:593
t._renderFrame @ babylon.js?633b:16
t._renderLoop @ babylon.js?633b:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js?633b:16
e._queueNewFrame @ babylon.js?633b:16
e.runRenderLoop @ babylon.js?633b:16
startGame @ Game.vue?c39f:592
setPlaying @ App.vue?234e:170
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
setPlaying @ Salon.vue?d351:331
eval @ SocketManager.js?8b85:62
Emitter.emit @ index.js?db1a:133
Socket.onevent @ socket.js?2851:278
Socket.onpacket @ socket.js?2851:236
eval @ index.js?40de:21
Emitter.emit @ index.js?db1a:133
Manager.ondecoded @ manager.js?78eb:345
eval @ index.js?40de:21
Emitter.emit @ index.js?68ab:133
Decoder.add @ index.js?568d:251
Manager.ondata @ manager.js?78eb:335
eval @ index.js?40de:21
Emitter.emit @ index.js?d4c9:133
Socket.onPacket @ socket.js?da92:461
eval @ socket.js?da92:278
Emitter.emit @ index.js?d4c9:133
Transport.onPacket @ transport.js?19b7:149
Transport.onData @ transport.js?19b7:141
ws.onmessage @ websocket.js?0882:156
babylon.js?633b:16 BJS - [10:17:53]: Defines:
#define MAINUV1
#define DIFFUSE
#define DIFFUSEDIRECTUV 1
#define AMBIENTDIRECTUV 0
#define OPACITYDIRECTUV 0
#define EMISSIVEDIRECTUV 0
#define SPECULARDIRECTUV 0
#define BUMP
#define BUMPDIRECTUV 1
#define PARALLAX
#define PARALLAXOCCLUSION
#define SPECULARTERM
#define NORMAL
#define UV1
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define LIGHTMAPDIRECTUV 0
#define SHADOWFLOAT
#define NUM_MORPH_INFLUENCERS 0
#define VIGNETTEBLENDMODEMULTIPLY
#define SAMPLER3DGREENDEPTH
#define SAMPLER3DBGRMAP
#define LIGHT0
#define HEMILIGHT0
#define LIGHT1
#define DIRLIGHT1
#define SHADOW1
#define SHADOWESM1
#define SHADOWS

e._ErrorEnabled @ babylon.js?633b:16
e._processCompilationErrors @ babylon.js?633b:16
e._checkIsReady @ babylon.js?633b:16
eval @ babylon.js?633b:16
setTimeout (async)
e._checkIsReady @ babylon.js?633b:16
e._prepareEffect @ babylon.js?633b:16
e._useFinalCode @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._ProcessIncludes @ babylon.js?633b:16
e.Process @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
eval @ babylon.js?633b:16
e._loadShader @ babylon.js?633b:16
e @ babylon.js?633b:16
e.createEffect @ babylon.js?633b:16
t.isReadyForSubMesh @ babylon.js?633b:16
t.render @ babylon.js?633b:16
t.render @ babylon.js?633b:16
e.renderUnsorted @ babylon.js?633b:16
e.render @ babylon.js?633b:16
e.render @ babylon.js?633b:16
t._renderForCamera @ babylon.js?633b:16
t._processSubCameras @ babylon.js?633b:16
t.render @ babylon.js?633b:16
eval @ Game.vue?c39f:593
t._renderFrame @ babylon.js?633b:16
t._renderLoop @ babylon.js?633b:16
requestAnimationFrame (async)
e.QueueNewFrame @ babylon.js?633b:16
e._queueNewFrame @ babylon.js?633b:16
e.runRenderLoop @ babylon.js?633b:16
startGame @ Game.vue?c39f:592
setPlaying @ App.vue?234e:170
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
Vue.$emit @ vue.runtime.esm.js?2b0e:3888
setPlaying @ Salon.vue?d351:331
eval @ SocketManager.js?8b85:62
Emitter.emit @ index.js?db1a:133
Socket.onevent @ socket.js?2851:278
Socket.onpacket @ socket.js?2851:236
eval @ index.js?40de:21
Emitter.emit @ index.js?db1a:133
Manager.ondecoded @ manager.js?78eb:345
eval @ index.js?40de:21
Emitter.emit @ index.js?68ab:133
Decoder.add @ index.js?568d:251
Manager.ondata @ manager.js?78eb:335
eval @ index.js?40de:21
Emitter.emit @ index.js?d4c9:133
Socket.onPacket @ socket.js?da92:461
eval @ socket.js?da92:278
Emitter.emit @ index.js?d4c9:133
Transport.onPacket @ transport.js?19b7:149
Transport.onData @ transport.js?19b7:141
ws.onmessage @ websocket.js?0882:156
babylon.js?633b:16 BJS - [10:17:53]: Error: FRAGMENT SHADER ERROR: 0:452: 'sampler2DShadow' : No precision specified
ERROR: 0:463: 'sampler2DShadow' : No precision specified
ERROR: 0:488: 'sampler2DShadow' : No precision specified
ERROR: 0:692: 'sampler2DShadow' : No precision specified
ERROR: 0:734: 'sampler2DShadow' : No precision specified
ERROR: 0:738: 'sampler2DShadow' : No precision specified
ERROR: 0:742: 'sampler2DShadow' : No precision specified

jeremy-coleman · January 8, 2022, 10:05am

big thread about it here Broken shadows after recent Chrome update in 4.2 - #37 by nima

. they already published a 4.2.1 to the babylon cdn. You can also access it in your app using the github cdn by importing from babylonjs.github.io/cdn/babylon.js

you could also copy/paste CDN/babylon.js at master · BabylonJS/CDN · GitHub into your app and manually redeploy

Fenryll · January 8, 2022, 11:51am

Thanks!

Fenryll · January 10, 2022, 5:14pm

Just for the record: now I have two players asking to play back with “the blue background” aka the bug I just corrected with babylon 4.2

Deltakosh · January 10, 2022, 5:48pm

Well now you will need to make that an option

sebavan · January 10, 2022, 6:13pm

It was not a bug, it was a feature

Fenryll · January 12, 2022, 8:19pm

Exactly

So I just concretised the feature and played a bit with different skins for these two elements and I am very happy with the results!

When I started this project my vision was to have a card game that would look like a Photoshop composition, and frankly speaking, not far :o)

Original skin with the idea of a classis Swiss pub:

None, inspired by the bug (not blue as the screenshots I received):

New possibility:

And my new preferred, far from the original idea but just… noble

Deltakosh · January 13, 2022, 3:34pm

Love it! Your game rocks buddy!

Fenryll · January 13, 2022, 4:10pm

thanks to your great framework !

Topic		Replies	Views
Enabling plane to receive shadow throws a whole lot of error in console Unable to compile effect: Bugs shadows , babylon	6	465	October 20, 2022
Problem with Babylon on different computer Bugs	6	450	January 20, 2022
Chrome Version 76 - maxShaderCompilerThreadsKHR Bugs	2	1091	August 14, 2019
Contact hardening shadow error in chrome x android Bugs	5	1068	May 5, 2020
Unable to compile effects error Questions	5	1088	January 11, 2022

Chrome 97.0.4692.71: error with .receiveShadows = true;

Related topics