From 69b12ed9fd269ca6fb3c797e0fa5064ad22db643 Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Thu, 6 Jul 2023 09:15:34 +0000 Subject: [PATCH 1/6] FIX sdf/msdf shaders, add Shader.glslVersion --- src/core/shader.js | 5 ++++- src/shaders/msdf.js | 7 ++++--- src/shaders/sdf.js | 7 ++++--- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/core/shader.js b/src/core/shader.js index a7aff412a32..129b92c4fe6 100755 --- a/src/core/shader.js +++ b/src/core/shader.js @@ -45,6 +45,8 @@ Shader.prototype = { 'gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);' + '}', + glslVersion: null, + /** * Init handler. Similar to attachedCallback. * Called during shader initialization and is only run once. @@ -56,7 +58,8 @@ Shader.prototype = { // attributes: this.attributes, uniforms: this.uniforms, vertexShader: this.vertexShader, - fragmentShader: this.fragmentShader + fragmentShader: this.fragmentShader, + glslVersion: this.glslVersion }); return this.material; }, diff --git a/src/shaders/msdf.js b/src/shaders/msdf.js index ca3b205dd61..504c52e2c54 100644 --- a/src/shaders/msdf.js +++ b/src/shaders/msdf.js @@ -1,4 +1,5 @@ var registerShader = require('../core/shader').registerShader; +var THREE = require('../lib/three'); var isWebGL2AVailable = !!document.createElement('canvas').getContext('webgl2'); @@ -15,7 +16,6 @@ var VERTEX_SHADER_WEBGL1 = [ ].join('\n'); var VERTEX_SHADER_WEBGL2 = [ - '#version 300 es', 'in vec2 uv;', 'in vec3 position;', 'uniform mat4 projectionMatrix;', @@ -74,7 +74,6 @@ var FRAGMENT_SHADER_WEBGL1 = [ ].join('\n'); var FRAGMENT_SHADER_WEBGL2 = [ - '#version 300 es', 'precision highp float;', 'uniform bool negate;', 'uniform float alphaTest;', @@ -135,5 +134,7 @@ module.exports.Shader = registerShader('msdf', { vertexShader: VERTEX_SHADER, - fragmentShader: FRAGMENT_SHADER + fragmentShader: FRAGMENT_SHADER, + + glslVersion: isWebGL2AVailable ? THREE.GLSL3 : null }); diff --git a/src/shaders/sdf.js b/src/shaders/sdf.js index 49961f05429..4286d504673 100644 --- a/src/shaders/sdf.js +++ b/src/shaders/sdf.js @@ -1,4 +1,5 @@ var registerShader = require('../core/shader').registerShader; +var THREE = require('../lib/three'); var isWebGL2AVailable = !!document.createElement('canvas').getContext('webgl2'); @@ -15,7 +16,6 @@ var VERTEX_SHADER_WEBGL1 = [ ].join('\n'); var VERTEX_SHADER_WEBGL2 = [ - '#version 300 es', 'in vec2 uv;', 'in vec3 position;', 'uniform mat4 projectionMatrix;', @@ -114,7 +114,6 @@ var FRAGMENT_SHADER_WEBGL1 = [ ].join('\n'); var FRAGMENT_SHADER_WEBGL2 = [ - '#version 300 es', 'precision highp float;', 'uniform float alphaTest;', 'uniform float opacity;', @@ -213,5 +212,7 @@ module.exports.Shader = registerShader('sdf', { vertexShader: VERTEX_SHADER, - fragmentShader: FRAGMENT_SHADER + fragmentShader: FRAGMENT_SHADER, + + glslVersion: isWebGL2AVailable ? THREE.GLSL3 : null }); From f682e854bc08cebac111243b018d8a2bf49f4614 Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Mon, 17 Jul 2023 16:33:03 +0000 Subject: [PATCH 2/6] Update according to discussion --- src/core/shader.js | 7 ++- src/shaders/msdf.js | 68 +--------------------------- src/shaders/sdf.js | 108 +------------------------------------------- 3 files changed, 9 insertions(+), 174 deletions(-) diff --git a/src/core/shader.js b/src/core/shader.js index 129b92c4fe6..c6a343eafdc 100755 --- a/src/core/shader.js +++ b/src/core/shader.js @@ -52,14 +52,17 @@ Shader.prototype = { * Called during shader initialization and is only run once. */ init: function (data) { + if( this.raw ) + console.warn('RAW shaders enforced to GLSL3.'); + this.attributes = this.initVariables(data, 'attribute'); this.uniforms = this.initVariables(data, 'uniform'); this.material = new (this.raw ? THREE.RawShaderMaterial : THREE.ShaderMaterial)({ // attributes: this.attributes, uniforms: this.uniforms, + glslVersion: this.raw ? THREE.GLSL3 : undefined, vertexShader: this.vertexShader, - fragmentShader: this.fragmentShader, - glslVersion: this.glslVersion + fragmentShader: this.fragmentShader }); return this.material; }, diff --git a/src/shaders/msdf.js b/src/shaders/msdf.js index 504c52e2c54..6d1e1c7543d 100644 --- a/src/shaders/msdf.js +++ b/src/shaders/msdf.js @@ -1,21 +1,7 @@ var registerShader = require('../core/shader').registerShader; var THREE = require('../lib/three'); -var isWebGL2AVailable = !!document.createElement('canvas').getContext('webgl2'); - -var VERTEX_SHADER_WEBGL1 = [ - 'attribute vec2 uv;', - 'attribute vec3 position;', - 'uniform mat4 projectionMatrix;', - 'uniform mat4 modelViewMatrix;', - 'varying vec2 vUV;', - 'void main(void) {', - ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);', - ' vUV = uv;', - '}' -].join('\n'); - -var VERTEX_SHADER_WEBGL2 = [ +var VERTEX_SHADER = [ 'in vec2 uv;', 'in vec3 position;', 'uniform mat4 projectionMatrix;', @@ -27,53 +13,7 @@ var VERTEX_SHADER_WEBGL2 = [ '}' ].join('\n'); -var VERTEX_SHADER = isWebGL2AVailable ? VERTEX_SHADER_WEBGL2 : VERTEX_SHADER_WEBGL1; - -var FRAGMENT_SHADER_WEBGL1 = [ - '#ifdef GL_OES_standard_derivatives', - '#extension GL_OES_standard_derivatives: enable', - '#endif', - 'precision highp float;', - 'uniform bool negate;', - 'uniform float alphaTest;', - 'uniform float opacity;', - 'uniform sampler2D map;', - 'uniform vec3 color;', - 'varying vec2 vUV;', - - 'float median(float r, float g, float b) {', - ' return max(min(r, g), min(max(r, g), b));', - '}', - - // FIXME: Experimentally determined constants. - '#define BIG_ENOUGH 0.001', - '#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)', - - 'void main() {', - ' vec3 sampleColor = texture2D(map, vUV).rgb;', - ' if (negate) { sampleColor = 1.0 - sampleColor; }', - - ' float sigDist = median(sampleColor.r, sampleColor.g, sampleColor.b) - 0.5;', - ' float alpha = clamp(sigDist / fwidth(sigDist) + 0.5, 0.0, 1.0);', - ' float dscale = 0.353505;', - ' vec2 duv = dscale * (dFdx(vUV) + dFdy(vUV));', - ' float isBigEnough = max(abs(duv.x), abs(duv.y));', - - // When texel is too small, blend raw alpha value rather than supersampling. - // FIXME: Experimentally determined constant. - ' // Do modified alpha test.', - ' if (isBigEnough > BIG_ENOUGH) {', - ' float ratio = BIG_ENOUGH / isBigEnough;', - ' alpha = ratio * alpha + (1.0 - ratio) * (sigDist + 0.5);', - ' }', - - ' // Do modified alpha test.', - ' if (alpha < alphaTest * MODIFIED_ALPHATEST) { discard; return; }', - ' gl_FragColor = vec4(color.xyz, alpha * opacity);', - '}' -].join('\n'); - -var FRAGMENT_SHADER_WEBGL2 = [ +var FRAGMENT_SHADER = [ 'precision highp float;', 'uniform bool negate;', 'uniform float alphaTest;', @@ -115,8 +55,6 @@ var FRAGMENT_SHADER_WEBGL2 = [ '}' ].join('\n'); -var FRAGMENT_SHADER = isWebGL2AVailable ? FRAGMENT_SHADER_WEBGL2 : FRAGMENT_SHADER_WEBGL1; - /** * Multi-channel signed distance field. * Used by text component. @@ -135,6 +73,4 @@ module.exports.Shader = registerShader('msdf', { vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, - - glslVersion: isWebGL2AVailable ? THREE.GLSL3 : null }); diff --git a/src/shaders/sdf.js b/src/shaders/sdf.js index 4286d504673..bf414ec683c 100644 --- a/src/shaders/sdf.js +++ b/src/shaders/sdf.js @@ -1,21 +1,7 @@ var registerShader = require('../core/shader').registerShader; var THREE = require('../lib/three'); -var isWebGL2AVailable = !!document.createElement('canvas').getContext('webgl2'); - -var VERTEX_SHADER_WEBGL1 = [ - 'attribute vec2 uv;', - 'attribute vec3 position;', - 'uniform mat4 projectionMatrix;', - 'uniform mat4 modelViewMatrix;', - 'varying vec2 vUV;', - 'void main(void) {', - ' gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);', - ' vUV = uv;', - '}' -].join('\n'); - -var VERTEX_SHADER_WEBGL2 = [ +var VERTEX_SHADER = [ 'in vec2 uv;', 'in vec3 position;', 'uniform mat4 projectionMatrix;', @@ -27,93 +13,7 @@ var VERTEX_SHADER_WEBGL2 = [ '}' ].join('\n'); -var VERTEX_SHADER = isWebGL2AVailable ? VERTEX_SHADER_WEBGL2 : VERTEX_SHADER_WEBGL1; - -var FRAGMENT_SHADER_WEBGL1 = [ - '#ifdef GL_OES_standard_derivatives', - '#extension GL_OES_standard_derivatives: enable', - '#endif', - - 'precision highp float;', - 'uniform float alphaTest;', - 'uniform float opacity;', - 'uniform sampler2D map;', - 'uniform vec3 color;', - 'varying vec2 vUV;', - - '#ifdef GL_OES_standard_derivatives', - ' float contour(float width, float value) {', - ' return smoothstep(0.5 - value, 0.5 + value, width);', - ' }', - '#else', - ' float aastep(float value, float afwidth) {', - ' return smoothstep(0.5 - afwidth, 0.5 + afwidth, value);', - ' }', - '#endif', - - // FIXME: Experimentally determined constants. - '#define BIG_ENOUGH 0.001', - '#define MODIFIED_ALPHATEST (0.02 * isBigEnough / BIG_ENOUGH)', - '#define ALL_SMOOTH 0.4', - '#define ALL_ROUGH 0.02', - '#define DISCARD_ALPHA (alphaTest / (2.2 - 1.2 * ratio))', - - 'void main() {', - // When we have derivatives and can get texel size for supersampling. - ' #ifdef GL_OES_standard_derivatives', - ' vec2 uv = vUV;', - ' vec4 texColor = texture2D(map, uv);', - ' float dist = texColor.a;', - ' float width = fwidth(dist);', - ' float alpha = contour(dist, width);', - ' float dscale = 0.353505;', - - ' vec2 duv = dscale * (dFdx(uv) + dFdy(uv));', - ' float isBigEnough = max(abs(duv.x), abs(duv.y));', - - // When texel is too small, blend raw alpha value rather than supersampling. - // FIXME: experimentally determined constant - ' if (isBigEnough > BIG_ENOUGH) {', - ' float ratio = BIG_ENOUGH / isBigEnough;', - ' alpha = ratio * alpha + (1.0 - ratio) * dist;', - ' }', - - // Otherwise do weighted supersampling. - // FIXME: why this weighting? - ' if (isBigEnough <= BIG_ENOUGH) {', - ' vec4 box = vec4 (uv - duv, uv + duv);', - ' alpha = (alpha + 0.5 * (', - ' contour(texture2D(map, box.xy).a, width)', - ' + contour(texture2D(map, box.zw).a, width)', - ' + contour(texture2D(map, box.xw).a, width)', - ' + contour(texture2D(map, box.zy).a, width)', - ' )) / 3.0;', - ' }', - - // Do modified alpha test. - ' if (alpha < alphaTest * MODIFIED_ALPHATEST) { discard; return; }', - - ' #else', - // When we don't have derivatives, use approximations. - ' vec4 texColor = texture2D(map, vUV);', - ' float value = texColor.a;', - // FIXME: if we understood font pixel dimensions, this could probably be improved - ' float afwidth = (1.0 / 32.0) * (1.4142135623730951 / (2.0 * gl_FragCoord.w));', - ' float alpha = aastep(value, afwidth);', - - // Use gl_FragCoord.w to guess when we should blend. - // FIXME: If we understood font pixel dimensions, this could probably be improved. - ' float ratio = (gl_FragCoord.w >= ALL_SMOOTH) ? 1.0 : (gl_FragCoord.w < ALL_ROUGH) ? 0.0 : (gl_FragCoord.w - ALL_ROUGH) / (ALL_SMOOTH - ALL_ROUGH);', - ' if (alpha < alphaTest) { if (ratio >= 1.0) { discard; return; } alpha = 0.0; }', - ' alpha = alpha * ratio + (1.0 - ratio) * value;', - ' if (ratio < 1.0 && alpha <= DISCARD_ALPHA) { discard; return; }', - ' #endif', - - ' gl_FragColor = vec4(color, opacity * alpha);', - '}' -].join('\n'); - -var FRAGMENT_SHADER_WEBGL2 = [ +var FRAGMENT_SHADER = [ 'precision highp float;', 'uniform float alphaTest;', 'uniform float opacity;', @@ -194,8 +94,6 @@ var FRAGMENT_SHADER_WEBGL2 = [ '}' ].join('\n'); -var FRAGMENT_SHADER = isWebGL2AVailable ? FRAGMENT_SHADER_WEBGL2 : FRAGMENT_SHADER_WEBGL1; - /** * Signed distance field. * Used by text component. @@ -213,6 +111,4 @@ module.exports.Shader = registerShader('sdf', { vertexShader: VERTEX_SHADER, fragmentShader: FRAGMENT_SHADER, - - glslVersion: isWebGL2AVailable ? THREE.GLSL3 : null }); From b0eecd8280078054c6bb31d6c657651f2f117779 Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Mon, 17 Jul 2023 16:38:35 +0000 Subject: [PATCH 3/6] Remove Shader.glslVersion --- src/core/shader.js | 2 -- src/shaders/msdf.js | 2 +- src/shaders/sdf.js | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/core/shader.js b/src/core/shader.js index c6a343eafdc..a8d09a8cdd4 100755 --- a/src/core/shader.js +++ b/src/core/shader.js @@ -45,8 +45,6 @@ Shader.prototype = { 'gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);' + '}', - glslVersion: null, - /** * Init handler. Similar to attachedCallback. * Called during shader initialization and is only run once. diff --git a/src/shaders/msdf.js b/src/shaders/msdf.js index 6d1e1c7543d..263b42786b3 100644 --- a/src/shaders/msdf.js +++ b/src/shaders/msdf.js @@ -72,5 +72,5 @@ module.exports.Shader = registerShader('msdf', { vertexShader: VERTEX_SHADER, - fragmentShader: FRAGMENT_SHADER, + fragmentShader: FRAGMENT_SHADER }); diff --git a/src/shaders/sdf.js b/src/shaders/sdf.js index bf414ec683c..3dd3359ce6d 100644 --- a/src/shaders/sdf.js +++ b/src/shaders/sdf.js @@ -110,5 +110,5 @@ module.exports.Shader = registerShader('sdf', { vertexShader: VERTEX_SHADER, - fragmentShader: FRAGMENT_SHADER, + fragmentShader: FRAGMENT_SHADER }); From 7384488b3c928facc63fc8eada4292343aefeb38 Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Mon, 17 Jul 2023 16:42:13 +0000 Subject: [PATCH 4/6] Cleanup. Huh... --- src/shaders/msdf.js | 1 - src/shaders/sdf.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/shaders/msdf.js b/src/shaders/msdf.js index 263b42786b3..2b7d990478f 100644 --- a/src/shaders/msdf.js +++ b/src/shaders/msdf.js @@ -1,5 +1,4 @@ var registerShader = require('../core/shader').registerShader; -var THREE = require('../lib/three'); var VERTEX_SHADER = [ 'in vec2 uv;', diff --git a/src/shaders/sdf.js b/src/shaders/sdf.js index 3dd3359ce6d..152597287f3 100644 --- a/src/shaders/sdf.js +++ b/src/shaders/sdf.js @@ -1,5 +1,4 @@ var registerShader = require('../core/shader').registerShader; -var THREE = require('../lib/three'); var VERTEX_SHADER = [ 'in vec2 uv;', From db6d94563b48a1d43ea1510dd50629a3c2cffc92 Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Mon, 17 Jul 2023 16:48:25 +0000 Subject: [PATCH 5/6] Formatting checks... --- src/core/shader.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/core/shader.js b/src/core/shader.js index a8d09a8cdd4..048ce174ce1 100755 --- a/src/core/shader.js +++ b/src/core/shader.js @@ -50,8 +50,9 @@ Shader.prototype = { * Called during shader initialization and is only run once. */ init: function (data) { - if( this.raw ) + if (this.raw) { console.warn('RAW shaders enforced to GLSL3.'); + } this.attributes = this.initVariables(data, 'attribute'); this.uniforms = this.initVariables(data, 'uniform'); From 341d35b19c718a0e1a03008d59a51770dc92a99c Mon Sep 17 00:00:00 2001 From: Night_Gryphon Date: Tue, 18 Jul 2023 08:13:44 +0000 Subject: [PATCH 6/6] Remove warning --- src/core/shader.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/core/shader.js b/src/core/shader.js index 048ce174ce1..711a416cbc3 100755 --- a/src/core/shader.js +++ b/src/core/shader.js @@ -50,10 +50,6 @@ Shader.prototype = { * Called during shader initialization and is only run once. */ init: function (data) { - if (this.raw) { - console.warn('RAW shaders enforced to GLSL3.'); - } - this.attributes = this.initVariables(data, 'attribute'); this.uniforms = this.initVariables(data, 'uniform'); this.material = new (this.raw ? THREE.RawShaderMaterial : THREE.ShaderMaterial)({