# BUG WEBGL2 throrium browser

**URL:** <https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956>\
**Category:** Bugs\
**Created:** [January 4, 2024, 7:51pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956 "2024-01-04T19:51:15Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [January 4, 2024, 7:51pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/1 "2024-01-04T19:51:15Z")

</div>

Where are my eyes?!

- browser: thorium: [https://thorium.rocks/](https://thorium.rocks/)

This playground with **WEBGL2** :

 ![Screenshot from 2024-01-04 19-42-07](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/7/9784bf4fb7025a3e23714041792bce0050741c99.png)

This playground with **WEBGL** :

 ![Screenshot from 2024-01-04 19-43-57](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/d/4dcd5f8d7697701660c3c918a5e8c30ca3e1b200.png)

- chromium works fine:

 ![Screenshot from 2024-01-04 19-46-42](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/7/6727dd3fe344ad120f2fc39dd6b7c33384365dba.png)

- firefox works fine:

 ![Screenshot from 2024-01-04 19-47-59](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/3/63dedbb469d6102ee5a27a33a9e917caed2d326e.png)

> **[Babylon.js Playground](https://playground.babylonjs.com/#N058HT)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [January 4, 2024, 8:24pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/2 "2024-01-04T20:24:32Z")

</div>

Do you get any warning message on the console? Is it just this Playground that’s not working, or more Playgrounds don’t work? Cool PG btw 🙂

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [January 4, 2024, 8:31pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/3 "2024-01-04T20:31:08Z")

</div>

Yeah, I forgot the log 😅

```ts
logger.ts:107 BJS - [20:27:08]: Unable to compile effect:
logger.ts:107 BJS - [20:27:08]: Uniforms: world, view, viewProjection, vEyePosition, vLightsType, vFogInfos, vFogColor, pointSize, mBones, logarithmicDepthConstant, topColor, bottomColor, offset, smoothness, scale, vClipPlane, vClipPlane2, vClipPlane3, vClipPlane4, vClipPlane5, vClipPlane6, vLightData0, vLightDiffuse0, vLightSpecular0, vLightDirection0, vLightFalloff0, vLightGround0, lightMatrix0, shadowsInfo0, depthValues0, viewFrustumZ0, cascadeBlendFactor0, lightSizeUVCorrection0, depthCorrection0, penumbraDarkness0, frustumLengths0, shadowSampler0, depthSampler0
logger.ts:107 BJS - [20:27:08]: Attributes: position, normal

logger.ts:107 BJS - [20:27:08]: Defines:
#define ALPHATEST
#define NORMAL
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define CAMERA_PERSPECTIVE
#define LIGHT0
#define HEMILIGHT0
logger.ts:107 BJS - [20:27:08]: Vertex code:

logger.ts:107 BJS - [20:27:08]: #version 300 es
#define WEBGL2 
#define ALPHATEST
#define NORMAL
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define CAMERA_PERSPECTIVE
#define LIGHT0
#define HEMILIGHT0

#define SHADER_NAME vertex:gradient
precision highp float;
in vec3 position;
in vec3 normal;
uniform mat4 world;
uniform mat4 view;
uniform mat4 viewProjection;
out vec3 vPositionW;
out vec3 vPosition;
out vec3 vNormalW;
uniform Light0
{vec4 vLightData;
vec4 vLightDiffuse;
vec4 vLightSpecular;
vec3 vLightGround;
vec4 shadowsInfo;
vec2 depthValues;
} light0;
#define CUSTOM_VERTEX_DEFINITIONS
void main(void) {
#define CUSTOM_VERTEX_MAIN_BEGIN
mat4 finalWorld=world;
vec4 worldPos=finalWorld*vec4(position,1.0);
gl_Position=viewProjection*worldPos;
vPositionW=vec3(worldPos);
vPosition=position;
vNormalW=normalize(vec3(finalWorld*vec4(normal,0.0)));
vec2 uv=vec2(0.,0.);
vec2 uv2=vec2(0.,0.);
#define CUSTOM_VERTEX_MAIN_END
}

logger.ts:107 BJS - [20:27:08]: Fragment code:

logger.ts:107 BJS - [20:27:08]: #version 300 es
#define WEBGL2 
#define ALPHATEST
#define NORMAL
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define CAMERA_PERSPECTIVE
#define LIGHT0
#define HEMILIGHT0

#define SHADER_NAME fragment:gradient
precision highp float;
uniform vec4 vEyePosition;
uniform vec4 topColor;
uniform vec4 bottomColor;
uniform float offset;
uniform float scale;
uniform float smoothness;
in vec3 vPositionW;
in vec3 vPosition;
in vec3 vNormalW;
const float PI=3.1415926535897932384626433832795;
const float RECIPROCAL_PI=0.3183098861837907;
const float RECIPROCAL_PI2=0.15915494309189535;
const float HALF_MIN=5.96046448e-08;
const float LinearEncodePowerApprox=2.2;
const float GammaEncodePowerApprox=1.0/LinearEncodePowerApprox;
const vec3 LuminanceEncodeApprox=vec3(0.2126,0.7152,0.0722);
const float Epsilon=0.0000001;
#define saturate(x) clamp(x,0.0,1.0)
#define absEps(x) abs(x)+Epsilon
#define maxEps(x) max(x,Epsilon)
#define saturateEps(x) clamp(x,Epsilon,1.0)
mat3 transposeMat3(mat3 inMatrix) {vec3 i0=inMatrix[0];
vec3 i1=inMatrix[1];
vec3 i2=inMatrix[2];
mat3 outMatrix=mat3(
vec3(i0.x,i1.x,i2.x),
vec3(i0.y,i1.y,i2.y),
vec3(i0.z,i1.z,i2.z)
);
return outMatrix;
}
mat3 inverseMat3(mat3 inMatrix) {float a00=inMatrix[0][0],a01=inMatrix[0][1],a02=inMatrix[0][2];
float a10=inMatrix[1][0],a11=inMatrix[1][1],a12=inMatrix[1][2];
float a20=inMatrix[2][0],a21=inMatrix[2][1],a22=inMatrix[2][2];
float b01=a22*a11-a12*a21;
float b11=-a22*a10+a12*a20;
float b21=a21*a10-a11*a20;
float det=a00*b01+a01*b11+a02*b21;
return mat3(b01,(-a22*a01+a02*a21),(a12*a01-a02*a11),
b11,(a22*a00-a02*a20),(-a12*a00+a02*a10),
b21,(-a21*a00+a01*a20),(a11*a00-a01*a10))/det;
}
float toLinearSpace(float color)
{
return pow(color,LinearEncodePowerApprox);
}
vec3 toLinearSpace(vec3 color)
{
return pow(color,vec3(LinearEncodePowerApprox));
}
vec4 toLinearSpace(vec4 color)
{
return vec4(pow(color.rgb,vec3(LinearEncodePowerApprox)),color.a);
}
float toGammaSpace(float color)
{
return pow(color,GammaEncodePowerApprox);
}
vec3 toGammaSpace(vec3 color)
{
return pow(color,vec3(GammaEncodePowerApprox));
}
vec4 toGammaSpace(vec4 color)
{
return vec4(pow(color.rgb,vec3(GammaEncodePowerApprox)),color.a);
}
float square(float value)
{return value*value;
}
vec3 square(vec3 value)
{return value*value;
}
float pow5(float value) {float sq=value*value;
return sq*sq*value;
}
float getLuminance(vec3 color)
{return clamp(dot(color,LuminanceEncodeApprox),0.,1.);
}
float getRand(vec2 seed) {return fract(sin(dot(seed.xy ,vec2(12.9898,78.233)))*43758.5453);
}
float dither(vec2 seed,float varianceAmount) {float rand=getRand(seed);
float normVariance=varianceAmount/255.0;
float dither=mix(-normVariance,normVariance,rand);
return dither;
}
const float rgbdMaxRange=255.0;
vec4 toRGBD(vec3 color) {float maxRGB=maxEps(max(color.r,max(color.g,color.b)));
float D =max(rgbdMaxRange/maxRGB,1.);
D =clamp(floor(D)/255.0,0.,1.);
vec3 rgb=color.rgb*D;
rgb=toGammaSpace(rgb);
return vec4(clamp(rgb,0.,1.),D);
}
vec3 fromRGBD(vec4 rgbd) {rgbd.rgb=toLinearSpace(rgbd.rgb);
return rgbd.rgb/rgbd.a;
}
vec3 parallaxCorrectNormal( vec3 vertexPos,vec3 origVec,vec3 cubeSize,vec3 cubePos ) {vec3 invOrigVec=vec3(1.0,1.0,1.0)/origVec;
vec3 halfSize=cubeSize*0.5;
vec3 intersecAtMaxPlane=(cubePos+halfSize-vertexPos)*invOrigVec;
vec3 intersecAtMinPlane=(cubePos-halfSize-vertexPos)*invOrigVec;
vec3 largestIntersec=max(intersecAtMaxPlane,intersecAtMinPlane);
float distance=min(min(largestIntersec.x,largestIntersec.y),largestIntersec.z);
vec3 intersectPositionWS=vertexPos+origVec*distance;
return intersectPositionWS-cubePos;
}
uniform Light0
{vec4 vLightData;
vec4 vLightDiffuse;
vec4 vLightSpecular;
vec3 vLightGround;
vec4 shadowsInfo;
vec2 depthValues;
} light0;
struct lightingInfo
{vec3 diffuse;
};
lightingInfo computeLighting(vec3 viewDirectionW,vec3 vNormal,vec4 lightData,vec3 diffuseColor,vec3 specularColor,float range,float glossiness) {lightingInfo result;
vec3 lightVectorW;
float attenuation=1.0;
if (lightData.w==0.)
{vec3 direction=lightData.xyz-vPositionW;
attenuation=max(0.,1.0-length(direction)/range);
lightVectorW=normalize(direction);
}
else
{lightVectorW=normalize(-lightData.xyz);
}
float ndl=max(0.,dot(vNormal,lightVectorW));
result.diffuse=ndl*diffuseColor*attenuation;
return result;
}
lightingInfo computeSpotLighting(vec3 viewDirectionW,vec3 vNormal,vec4 lightData,vec4 lightDirection,vec3 diffuseColor,vec3 specularColor,float range,float glossiness) {lightingInfo result;
vec3 direction=lightData.xyz-vPositionW;
vec3 lightVectorW=normalize(direction);
float attenuation=max(0.,1.0-length(direction)/range);
float cosAngle=max(0.,dot(lightDirection.xyz,-lightVectorW));
if (cosAngle>=lightDirection.w)
{cosAngle=max(0.,pow(cosAngle,lightData.w));
attenuation*=cosAngle;
float ndl=max(0.,dot(vNormal,lightVectorW));
result.diffuse=ndl*diffuseColor*attenuation;
return result;
}
result.diffuse=vec3(0.);
return result;
}
lightingInfo computeHemisphericLighting(vec3 viewDirectionW,vec3 vNormal,vec4 lightData,vec3 diffuseColor,vec3 specularColor,vec3 groundColor,float glossiness) {lightingInfo result;
float ndl=dot(vNormal,lightData.xyz)*0.5+0.5;
result.diffuse=mix(groundColor,diffuseColor,ndl);
return result;
}
#define inline
vec3 computeProjectionTextureDiffuseLighting(sampler2D projectionLightSampler,mat4 textureProjectionMatrix){vec4 strq=textureProjectionMatrix*vec4(vPositionW,1.0);
strq/=strq.w;
vec3 textureColor=texture(projectionLightSampler,strq.xy).rgb;
return textureColor;
}
#define CUSTOM_FRAGMENT_DEFINITIONS
layout(location = 0) out vec4 glFragColor;
void main(void) {
#define CUSTOM_FRAGMENT_MAIN_BEGIN
vec3 viewDirectionW=normalize(vEyePosition.xyz-vPositionW);
float h=vPosition.y*scale+offset;
float mysmoothness=clamp(smoothness,0.01,max(smoothness,10.));
vec4 baseColor=mix(bottomColor,topColor,max(pow(max(h,0.0),mysmoothness),0.0));
vec3 diffuseColor=baseColor.rgb;
float alpha=baseColor.a;
if (baseColor.a<0.4)
discard;
vec3 normalW=normalize(vNormalW);
vec3 diffuseBase=vec3(0.,0.,0.);
lightingInfo info;
float shadow=1.;
float glossiness=0.;
float aggShadow=0.;
float numLights=0.;
info=computeHemisphericLighting(viewDirectionW,normalW,light0.vLightData,light0.vLightDiffuse.rgb,light0.vLightSpecular.rgb,light0.vLightGround,glossiness);
shadow=1.;
aggShadow+=shadow;
numLights+=1.0;
diffuseBase+=info.diffuse*shadow;
vec3 finalDiffuse=clamp(diffuseBase*diffuseColor,0.0,1.0)*baseColor.rgb;
vec4 color=vec4(finalDiffuse,alpha);
glFragColor=color;
#define CUSTOM_FRAGMENT_MAIN_END
}

logger.ts:107 BJS - [20:27:08]: Error: Program binary could not be loaded. Binary is not compatible with current driver/hardware combination. Driver build date May 11 2023. Please check build information of source that generated the binary.

```

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [January 4, 2024, 8:38pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/4 "2024-01-04T20:38:03Z")

</div>

Works fine with all other playgrounds using WEBGL2, just this one is buggy (so far)

 ![Screenshot from 2024-01-04 20-35-20](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/9/8/98b74e2bb483f2c69185d6ccfe10ed3f34d43a72.png)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [January 4, 2024, 8:39pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/5 "2024-01-04T20:39:10Z")

</div>

Hard to know what the problem is, as there is not much information in the log.

You can try to disable uniform buffer support in WebGL2, as it’s a difference between WebGL1 and 2: `engine.disableUniformBuffers = true`. Do it just after the engine is created.

---

<div class="post-metadata">

**Author:** ![Asdrubal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/asdrubal/32/36271_2.png) [@Asdrubal](https://forum.babylonjs.com/u/Asdrubal)\
**Post date:** [January 4, 2024, 8:43pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/6 "2024-01-04T20:43:29Z")

</div>

Yes, this works, thanks! 😃

> **[Babylon.js Playground](https://playground.babylonjs.com/#N058HT%231)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [January 4, 2024, 9:16pm UTC](https://forum.babylonjs.com/t/bug-webgl2-throrium-browser/46956/7 "2024-01-04T21:16:13Z")

</div>

You should report the issue to the browser @Asdrubal, it might help them address their bug