diff --git a/src/core/renderers/webgl/WebGlShaderProgram.ts b/src/core/renderers/webgl/WebGlShaderProgram.ts index 837ffe4..dce1991 100644 --- a/src/core/renderers/webgl/WebGlShaderProgram.ts +++ b/src/core/renderers/webgl/WebGlShaderProgram.ts @@ -95,10 +95,6 @@ export class WebGlShaderProgram implements CoreShaderProgram { } const program = createProgram(glw, vertexShader, fragmentShader); - if (!program) { - throw new Error(); - } - this.program = program; this.attributeLocations = glw.getAttributeLocations(program); diff --git a/src/core/renderers/webgl/internal/ShaderUtils.ts b/src/core/renderers/webgl/internal/ShaderUtils.ts index d141143..4e2d053 100644 --- a/src/core/renderers/webgl/internal/ShaderUtils.ts +++ b/src/core/renderers/webgl/internal/ShaderUtils.ts @@ -202,9 +202,11 @@ export function createProgram( return program; } - console.warn(glw.getProgramInfoLog(program)); + const infoLog = + glw.getProgramInfoLog(program) || 'Unknown program link error'; + console.warn(infoLog); glw.deleteProgram(program); - return undefined; + throw new Error(`Unable to link shader program: ${infoLog}`); } export const DefaultVertexSource = ` diff --git a/src/core/shaders/webgl/Border.ts b/src/core/shaders/webgl/Border.ts index e3a7238..acf3018 100644 --- a/src/core/shaders/webgl/Border.ts +++ b/src/core/shaders/webgl/Border.ts @@ -42,12 +42,10 @@ export const Border: WebGlShaderType = { varying vec2 v_outerBorderUv; varying vec2 v_innerBorderUv; varying vec2 v_halfDimensions; - varying float v_edgeWidth; void main() { vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y); vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0); - v_edgeWidth = 1.0 / u_pixelRatio; float borderTop = u_borderWidth.x; float borderRight = u_borderWidth.y; @@ -120,7 +118,6 @@ export const Border: WebGlShaderType = { varying vec2 v_outerBorderUv; varying vec2 v_innerBorderUv; varying vec2 v_halfDimensions; - varying float v_edgeWidth; float box(vec2 p, vec2 s) { vec2 q = abs(p) - s; @@ -131,24 +128,25 @@ export const Border: WebGlShaderType = { vec4 color = texture2D(u_texture, v_textureCoords) * v_color; vec4 resultColor = vec4(0.0); vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions; + float edgeWidth = 1.0 / u_pixelRatio; - float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth); - float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth); + float outerDist = box(boxUv + v_outerBorderUv, v_outerSize - edgeWidth); + float innerDist = box(boxUv + v_innerBorderUv, v_innerSize - edgeWidth); if(u_borderGap == 0.0) { - float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist); - float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist); + float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist); + float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist); resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a); resultColor = mix(resultColor, color, innerAlpha); gl_FragColor = resultColor * u_alpha; return; } - float nodeDist = box(boxUv, v_halfDimensions - v_edgeWidth); - float nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist); + float nodeDist = box(boxUv, v_halfDimensions - edgeWidth); + float nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist); float borderDist = max(-innerDist, outerDist); - float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist); + float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist); resultColor = mix(resultColor, color, nodeAlpha); resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a); diff --git a/src/core/shaders/webgl/RoundedWithBorder.ts b/src/core/shaders/webgl/RoundedWithBorder.ts index f391e46..b38ffdf 100644 --- a/src/core/shaders/webgl/RoundedWithBorder.ts +++ b/src/core/shaders/webgl/RoundedWithBorder.ts @@ -53,20 +53,18 @@ export const RoundedWithBorder: WebGlShaderType = { varying vec4 v_innerBorderRadius; varying vec4 v_outerBorderRadius; varying vec2 v_halfDimensions; - varying float v_edgeWidth; - varying float v_borderZero; void main() { vec2 vertexPos = a_position * u_pixelRatio; vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y); vec2 edge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0); vec2 edgeOffset = vec2(0.0); + float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0))); - v_borderZero = u_borderWidth == vec4(0.0) ? 1.0 : 0.0; v_innerSize = vec2(0.0); v_outerSize = vec2(0.0); - if(v_borderZero == 0.0) { + if(borderZero == 0.0) { float borderTop = u_borderWidth.x; float borderRight = u_borderWidth.y; float borderBottom = u_borderWidth.z; @@ -125,7 +123,6 @@ export const RoundedWithBorder: WebGlShaderType = { v_textureCoords = a_textureCoords + (screenSpace + edgeOffset) / (u_dimensions); v_halfDimensions = u_dimensions * 0.5; - v_edgeWidth = 1.0 / u_pixelRatio; } `, fragment: ` @@ -159,8 +156,6 @@ export const RoundedWithBorder: WebGlShaderType = { varying vec4 v_innerBorderRadius; varying vec4 v_outerBorderRadius; varying vec2 v_halfDimensions; - varying float v_edgeWidth; - varying float v_borderZero; float roundedBox(vec2 p, vec2 s, vec4 r) { r.xy = (p.x > 0.0) ? r.yz : r.xw; @@ -173,36 +168,38 @@ export const RoundedWithBorder: WebGlShaderType = { vec4 color = texture2D(u_texture, v_textureCoords) * v_color; vec4 resultColor = vec4(0.0); vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions; + float borderZero = 1.0 - step(0.001, dot(abs(u_borderWidth), vec4(1.0))); + float edgeWidth = 1.0 / u_pixelRatio; float nodeDist; float nodeAlpha; - if(v_borderZero == 1.0) { - nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius); - nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist); + if(borderZero == 1.0) { + nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius); + nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist); gl_FragColor = (color * nodeAlpha) * u_alpha; return; } - float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius); - float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius); + float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius); + float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius); if(u_borderGap == 0.0) { - float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist); - float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist); + float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist); + float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist); resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a); resultColor = mix(resultColor, color, innerAlpha); gl_FragColor = resultColor * u_alpha; return; } - nodeDist = roundedBox(boxUv, v_halfDimensions - v_edgeWidth, u_radius); - nodeAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, nodeDist); - float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist); + nodeDist = roundedBox(boxUv, v_halfDimensions - edgeWidth, u_radius); + nodeAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, nodeDist); + float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist); float gapAlpha = max(0.0, innerAlpha - nodeAlpha); float borderDist = max(-innerDist, outerDist); - float borderAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, borderDist); + float borderAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, borderDist); resultColor = (color * nodeAlpha) + (u_fillColor * gapAlpha); resultColor = mix(resultColor, u_borderColor, borderAlpha * u_borderColor.a); diff --git a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts index b72d0f1..c41339f 100644 --- a/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +++ b/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts @@ -59,22 +59,19 @@ export const RoundedWithBorderAndShadow: WebGlShaderType 0.0) ? r.yz : r.xw; @@ -189,32 +183,34 @@ export const RoundedWithBorderAndShadow: WebGlShaderType v_halfDimensions.x || v_outerSize.y > v_halfDimensions.y) { - shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - v_edgeWidth, v_outerBorderRadius + u_shadow.z); + shadowAlpha = shadowBox(boxUv + v_outerBorderUv - u_shadow.xy, v_outerSize + u_shadow.w - edgeWidth, v_outerBorderRadius + u_shadow.z); } else { - shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - v_edgeWidth, u_radius + u_shadow.z); + shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w - edgeWidth, u_radius + u_shadow.z); } - float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - v_edgeWidth, v_outerBorderRadius); - float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - v_edgeWidth, v_innerBorderRadius); + float outerDist = roundedBox(boxUv + v_outerBorderUv, v_outerSize - edgeWidth, v_outerBorderRadius); + float innerDist = roundedBox(boxUv + v_innerBorderUv, v_innerSize - edgeWidth, v_innerBorderRadius); if(u_borderGap == 0.0) { - float outerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, outerDist); - float innerAlpha = 1.0 - smoothstep(-0.5 * v_edgeWidth, 0.5 * v_edgeWidth, innerDist); + float outerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, outerDist); + float innerAlpha = 1.0 - smoothstep(-0.5 * edgeWidth, 0.5 * edgeWidth, innerDist); resultColor = mix(resultColor, u_shadowColor, shadowAlpha); resultColor = mix(resultColor, u_borderColor, outerAlpha * u_borderColor.a); resultColor = mix(resultColor, color, innerAlpha); @@ -222,10 +218,10 @@ export const RoundedWithBorderAndShadow: WebGlShaderType