Fix hdpi precision Shader issue for old Chromium device (#341)

The PR contains these changes: - rename GL_FRAGMENT_PRESICISON_HIGH to GL_FRAGMENT_PRECISION_HIGH based on (https://registry.khronos.org/OpenGL/specs/es/3.1/GLSL_ES_Specification_3.10.withchanges.pdf) - apply GL_FRAGMENT_PRECISION_HIGH inside the fragment and vertex for SdfShader Tested on: ** FireTv OS 5.2.9.5** Mozilla/5.0 (Linux; Android 5.1.1; AFTT Build/LVY48F; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/108.0.5359.220 Mobile Safari/537.36 ** FireTv OS 8.1.1.1** Mozilla/5.0 (Linux; Android 11; AFTKM Build/RS8111.2273N; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/122.0.6261.140 Mobile Safari/537.36 ** Samsung 4K 2018 UE49NU8000** Mozilla/5.0 (SMART-TV; LINUX; Tizen 4.0) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 TV Safari/537.36 ** LG WebOS 6.4.0 TV UP78006LB** Mozilla/5.0 (Web0S; Linux/SmartTV) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36 WebAppManager
lightning-js · Jul 18, 2024 · 9f327f2 · 9f327f2
2 parents ff5a505 + b402d7f
commit 9f327f2
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 12 deletions.
diff --git a/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts b/docs/example-projects/custom-shader-effect-texture/src/MyCustomShader.ts
@@ -156,7 +156,7 @@ export class MyCustomShader extends WebGlCoreShader {
 
   static override shaderSources: ShaderProgramSources = {
     vertex: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;
@@ -186,7 +186,7 @@ export class MyCustomShader extends WebGlCoreShader {
       }
     `,
     fragment: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;

diff --git a/src/core/renderers/webgl/WebGlCoreShader.ts b/src/core/renderers/webgl/WebGlCoreShader.ts
@@ -34,7 +34,6 @@ import {
   type UniformMethodMap,
   type ShaderProgramSources,
 } from './internal/ShaderUtils.js';
-import { isWebGl2 } from './internal/WebGlUtils.js';
 
 /**
  * Automatic shader prop for the dimensions of the Node being rendered

diff --git a/src/core/renderers/webgl/shaders/DefaultShader.ts b/src/core/renderers/webgl/shaders/DefaultShader.ts
@@ -43,7 +43,7 @@ export class DefaultShader extends WebGlCoreShader {
 
   static override shaderSources: ShaderProgramSources = {
     vertex: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;
@@ -72,7 +72,7 @@ export class DefaultShader extends WebGlCoreShader {
       }
     `,
     fragment: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;

diff --git a/src/core/renderers/webgl/shaders/DefaultShaderBatched.ts b/src/core/renderers/webgl/shaders/DefaultShaderBatched.ts
@@ -62,7 +62,7 @@ export class DefaultShaderBatched extends WebGlCoreShader {
 
   static override shaderSources: ShaderProgramSources = {
     vertex: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;
@@ -97,7 +97,7 @@ export class DefaultShaderBatched extends WebGlCoreShader {
     `,
     fragment: (textureUnits) => `
       #define txUnits ${textureUnits}
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;

diff --git a/src/core/renderers/webgl/shaders/DynamicShader.ts b/src/core/renderers/webgl/shaders/DynamicShader.ts
@@ -424,7 +424,7 @@ export class DynamicShader extends WebGlCoreShader {
   static z$__type__Props: DynamicShaderProps;
 
   static vertex = () => `
-    # ifdef GL_FRAGMENT_PRESICISON_HIGH
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
     # else
     precision mediump float;
@@ -463,7 +463,7 @@ export class DynamicShader extends WebGlCoreShader {
     effectMethods: string,
     drawEffects: string,
   ) => `
-    # ifdef GL_FRAGMENT_PRESICISON_HIGH
+    # ifdef GL_FRAGMENT_PRECISION_HIGH
     precision highp float;
     # else
     precision mediump float;

diff --git a/src/core/renderers/webgl/shaders/RoundedRectangle.ts b/src/core/renderers/webgl/shaders/RoundedRectangle.ts
@@ -96,7 +96,7 @@ export class RoundedRectangle extends WebGlCoreShader {
 
   static override shaderSources: ShaderProgramSources = {
     vertex: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;
@@ -128,7 +128,7 @@ export class RoundedRectangle extends WebGlCoreShader {
       }
     `,
     fragment: `
-      # ifdef GL_FRAGMENT_PRESICISON_HIGH
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
       # else
       precision mediump float;

diff --git a/src/core/renderers/webgl/shaders/SdfShader.ts b/src/core/renderers/webgl/shaders/SdfShader.ts
@@ -120,6 +120,11 @@ export class SdfShader extends WebGlCoreShader {
 
   static override shaderSources: ShaderProgramSources = {
     vertex: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
+      precision highp float;
+      # else
+      precision mediump float;
+      # endif
       // an attribute is an input (in) to a vertex shader.
       // It will receive data from a buffer
       attribute vec2 a_position;
@@ -146,8 +151,11 @@ export class SdfShader extends WebGlCoreShader {
       }
     `,
     fragment: `
+      # ifdef GL_FRAGMENT_PRECISION_HIGH
       precision highp float;
-
+      # else
+      precision mediump float;
+      # endif
       uniform vec4 u_color;
       uniform sampler2D u_texture;
       uniform float u_distanceRange;