@lightningjs/renderer 3.0.0-beta5 → 3.0.0-beta6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/core/CoreNode.d.ts +6 -16
- package/dist/src/core/CoreNode.js +24 -37
- package/dist/src/core/CoreNode.js.map +1 -1
- package/dist/src/core/CoreTextNode.js +0 -1
- package/dist/src/core/CoreTextNode.js.map +1 -1
- package/dist/src/core/CoreTextureManager.js +4 -5
- package/dist/src/core/CoreTextureManager.js.map +1 -1
- package/dist/src/core/Stage.js +0 -3
- package/dist/src/core/Stage.js.map +1 -1
- package/dist/src/core/TextureMemoryManager.js +3 -4
- package/dist/src/core/TextureMemoryManager.js.map +1 -1
- package/dist/src/core/renderers/CoreRenderer.d.ts +1 -1
- package/dist/src/core/renderers/webgl/WebGlRenderOp.d.ts +1 -1
- package/dist/src/core/renderers/webgl/WebGlRenderOp.js.map +1 -1
- package/dist/src/core/shaders/canvas/RoundedWithBorder.js +8 -2
- package/dist/src/core/shaders/canvas/RoundedWithBorder.js.map +1 -1
- package/dist/src/core/shaders/webgl/Border.js +57 -34
- package/dist/src/core/shaders/webgl/Border.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js +69 -37
- package/dist/src/core/shaders/webgl/RoundedWithBorder.js.map +1 -1
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js +78 -41
- package/dist/src/core/shaders/webgl/RoundedWithBorderAndShadow.js.map +1 -1
- package/dist/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js +3 -1
- package/dist/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.js.map +1 -1
- package/dist/src/main-api/Inspector.js +1 -1
- package/dist/src/main-api/Inspector.js.map +1 -1
- package/dist/src/main-api/Renderer.js +2 -3
- package/dist/src/main-api/Renderer.js.map +1 -1
- package/dist/src/utils.d.ts +1 -6
- package/dist/src/utils.js +2 -9
- package/dist/src/utils.js.map +1 -1
- package/dist/tsconfig.dist.tsbuildinfo +1 -1
- package/package.json +1 -2
- package/src/core/CoreNode.test.ts +0 -1
- package/src/core/CoreNode.ts +34 -59
- package/src/core/CoreTextNode.ts +0 -1
- package/src/core/CoreTextureManager.ts +4 -5
- package/src/core/Stage.ts +0 -3
- package/src/core/TextureMemoryManager.ts +3 -4
- package/src/core/renderers/CoreRenderer.ts +1 -1
- package/src/core/renderers/webgl/WebGlRenderOp.ts +1 -1
- package/src/core/shaders/canvas/RoundedWithBorder.ts +8 -4
- package/src/core/shaders/webgl/Border.ts +57 -37
- package/src/core/shaders/webgl/RoundedWithBorder.ts +70 -40
- package/src/core/shaders/webgl/RoundedWithBorderAndShadow.ts +78 -45
- package/src/core/text-rendering/renderers/SdfTextRenderer/SdfTextRenderer.ts +4 -1
- package/src/main-api/Inspector.ts +1 -1
- package/src/main-api/Renderer.ts +2 -4
- package/src/utils.ts +10 -10
- package/scripts/please-use-pnpm.js +0 -13
- package/src/core/platform.ts +0 -64
|
@@ -25,14 +25,51 @@ import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
|
|
|
25
25
|
|
|
26
26
|
export const Border: WebGlShaderType<BorderProps> = {
|
|
27
27
|
props: BorderTemplate.props,
|
|
28
|
-
update() {
|
|
29
|
-
this.uniform4fa('
|
|
30
|
-
this.
|
|
31
|
-
'u_asymWidth',
|
|
32
|
-
valuesAreEqual(this.props!.width as number[]) ? 0 : 1,
|
|
33
|
-
);
|
|
34
|
-
this.uniformRGBA('u_color', this.props!.color);
|
|
28
|
+
update(node) {
|
|
29
|
+
this.uniform4fa('u_borderWidth', this.props!.width as Vec4);
|
|
30
|
+
this.uniformRGBA('u_borderColor', this.props!.color);
|
|
35
31
|
},
|
|
32
|
+
vertex: `
|
|
33
|
+
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
34
|
+
precision highp float;
|
|
35
|
+
# else
|
|
36
|
+
precision mediump float;
|
|
37
|
+
# endif
|
|
38
|
+
|
|
39
|
+
attribute vec2 a_position;
|
|
40
|
+
attribute vec2 a_textureCoords;
|
|
41
|
+
attribute vec4 a_color;
|
|
42
|
+
attribute vec2 a_nodeCoords;
|
|
43
|
+
|
|
44
|
+
uniform vec2 u_resolution;
|
|
45
|
+
uniform float u_pixelRatio;
|
|
46
|
+
uniform vec2 u_dimensions;
|
|
47
|
+
|
|
48
|
+
uniform vec4 u_radius;
|
|
49
|
+
uniform vec4 u_borderWidth;
|
|
50
|
+
|
|
51
|
+
varying vec4 v_color;
|
|
52
|
+
varying vec2 v_textureCoords;
|
|
53
|
+
varying vec2 v_nodeCoords;
|
|
54
|
+
|
|
55
|
+
varying vec2 v_innerSize;
|
|
56
|
+
varying vec2 v_halfDimensions;
|
|
57
|
+
|
|
58
|
+
void main() {
|
|
59
|
+
vec2 normalized = a_position * u_pixelRatio;
|
|
60
|
+
vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
|
|
61
|
+
|
|
62
|
+
v_color = a_color;
|
|
63
|
+
v_nodeCoords = a_nodeCoords;
|
|
64
|
+
v_textureCoords = a_textureCoords;
|
|
65
|
+
|
|
66
|
+
v_halfDimensions = u_dimensions * 0.5;
|
|
67
|
+
v_innerSize = vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]), u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) * 0.5 - 0.5;
|
|
68
|
+
|
|
69
|
+
gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
|
|
70
|
+
gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
|
|
71
|
+
}
|
|
72
|
+
`,
|
|
36
73
|
fragment: `
|
|
37
74
|
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
38
75
|
precision highp float;
|
|
@@ -47,49 +84,32 @@ export const Border: WebGlShaderType<BorderProps> = {
|
|
|
47
84
|
uniform vec2 u_dimensions;
|
|
48
85
|
uniform sampler2D u_texture;
|
|
49
86
|
|
|
50
|
-
uniform vec4
|
|
51
|
-
uniform vec4
|
|
52
|
-
|
|
53
|
-
uniform int u_asymWidth;
|
|
87
|
+
uniform vec4 u_borderWidth;
|
|
88
|
+
uniform vec4 u_borderColor;
|
|
54
89
|
|
|
55
90
|
varying vec4 v_color;
|
|
56
|
-
varying vec2
|
|
91
|
+
varying vec2 v_nodeCoords;
|
|
57
92
|
varying vec2 v_textureCoords;
|
|
58
93
|
|
|
94
|
+
varying vec2 v_innerSize;
|
|
95
|
+
varying vec2 v_halfDimensions;
|
|
96
|
+
|
|
59
97
|
float box(vec2 p, vec2 s) {
|
|
60
|
-
vec2 q = abs(p) -
|
|
98
|
+
vec2 q = abs(p) - s;
|
|
61
99
|
return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0)));
|
|
62
100
|
}
|
|
63
101
|
|
|
64
|
-
float asymBorderWidth(vec2 p, float d, vec4 w) {
|
|
65
|
-
p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
|
|
66
|
-
p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
|
|
67
|
-
|
|
68
|
-
vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
|
|
69
|
-
float borderDist = box(p, size + 2.0);
|
|
70
|
-
return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
|
|
71
|
-
}
|
|
72
|
-
|
|
73
102
|
void main() {
|
|
74
103
|
vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
|
|
75
|
-
vec2
|
|
76
|
-
|
|
77
|
-
vec2 boxUv = v_textureCoords.xy * u_dimensions - halfDimensions;
|
|
78
|
-
float boxDist = box(boxUv, halfDimensions);
|
|
104
|
+
vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
|
|
79
105
|
|
|
80
|
-
|
|
81
|
-
|
|
106
|
+
boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
|
|
107
|
+
boxUv.y += u_borderWidth.z > u_borderWidth.x ? (u_borderWidth.z - u_borderWidth.x) * 0.5 : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
|
|
82
108
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
else {
|
|
87
|
-
borderAlpha = 1.0 - smoothstep(u_width[0], u_width[0], abs(boxDist));
|
|
88
|
-
}
|
|
109
|
+
float innerDist = box(boxUv, v_innerSize);
|
|
110
|
+
float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
|
|
89
111
|
|
|
90
|
-
vec4 resColor =
|
|
91
|
-
resColor = mix(resColor, color, min(color.a, boxAlpha));
|
|
92
|
-
resColor = mix(resColor, u_color, min(u_color.a, min(borderAlpha, boxAlpha)));
|
|
112
|
+
vec4 resColor = mix(u_borderColor, color, innerAlpha);
|
|
93
113
|
gl_FragColor = resColor * u_alpha;
|
|
94
114
|
}
|
|
95
115
|
`,
|
|
@@ -16,24 +16,20 @@
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import type { CoreNode } from '../../CoreNode.js';
|
|
19
|
-
import { calcFactoredRadiusArray
|
|
19
|
+
import { calcFactoredRadiusArray } from '../../lib/utils.js';
|
|
20
20
|
import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
|
|
21
21
|
import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
|
|
22
22
|
import {
|
|
23
23
|
RoundedWithBorderTemplate,
|
|
24
24
|
type RoundedWithBorderProps,
|
|
25
25
|
} from '../templates/RoundedWithBorderTemplate.js';
|
|
26
|
-
import { Rounded } from './Rounded.js';
|
|
27
26
|
|
|
28
27
|
export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
|
|
29
28
|
props: RoundedWithBorderTemplate.props,
|
|
30
29
|
update(node: CoreNode) {
|
|
31
|
-
this.uniformRGBA('
|
|
32
|
-
this.uniform4fa('
|
|
33
|
-
|
|
34
|
-
'u_border_asym',
|
|
35
|
-
valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
|
|
36
|
-
);
|
|
30
|
+
this.uniformRGBA('u_borderColor', this.props!['border-color']);
|
|
31
|
+
this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
|
|
32
|
+
|
|
37
33
|
this.uniform4fa(
|
|
38
34
|
'u_radius',
|
|
39
35
|
calcFactoredRadiusArray(
|
|
@@ -43,7 +39,56 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
|
|
|
43
39
|
),
|
|
44
40
|
);
|
|
45
41
|
},
|
|
46
|
-
vertex:
|
|
42
|
+
vertex: `
|
|
43
|
+
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
44
|
+
precision highp float;
|
|
45
|
+
# else
|
|
46
|
+
precision mediump float;
|
|
47
|
+
# endif
|
|
48
|
+
|
|
49
|
+
attribute vec2 a_position;
|
|
50
|
+
attribute vec2 a_textureCoords;
|
|
51
|
+
attribute vec4 a_color;
|
|
52
|
+
attribute vec2 a_nodeCoords;
|
|
53
|
+
|
|
54
|
+
uniform vec2 u_resolution;
|
|
55
|
+
uniform float u_pixelRatio;
|
|
56
|
+
uniform vec2 u_dimensions;
|
|
57
|
+
|
|
58
|
+
uniform vec4 u_radius;
|
|
59
|
+
uniform vec4 u_borderWidth;
|
|
60
|
+
|
|
61
|
+
varying vec4 v_color;
|
|
62
|
+
varying vec2 v_textureCoords;
|
|
63
|
+
varying vec2 v_nodeCoords;
|
|
64
|
+
|
|
65
|
+
varying vec4 v_innerRadius;
|
|
66
|
+
varying vec2 v_innerSize;
|
|
67
|
+
varying vec2 v_halfDimensions;
|
|
68
|
+
|
|
69
|
+
void main() {
|
|
70
|
+
vec2 normalized = a_position * u_pixelRatio;
|
|
71
|
+
vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
|
|
72
|
+
|
|
73
|
+
v_color = a_color;
|
|
74
|
+
v_nodeCoords = a_nodeCoords;
|
|
75
|
+
v_textureCoords = a_textureCoords;
|
|
76
|
+
|
|
77
|
+
v_halfDimensions = u_dimensions * 0.5;
|
|
78
|
+
|
|
79
|
+
v_innerRadius = vec4(
|
|
80
|
+
max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
|
|
81
|
+
max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
|
|
82
|
+
max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
|
|
83
|
+
max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
|
|
84
|
+
);
|
|
85
|
+
|
|
86
|
+
v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) + 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
|
|
87
|
+
|
|
88
|
+
gl_Position = vec4(normalized.x * screenSpace.x - 1.0, normalized.y * -abs(screenSpace.y) + 1.0, 0.0, 1.0);
|
|
89
|
+
gl_Position.y = -sign(screenSpace.y) * gl_Position.y;
|
|
90
|
+
}
|
|
91
|
+
`,
|
|
47
92
|
fragment: `
|
|
48
93
|
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
49
94
|
precision highp float;
|
|
@@ -59,14 +104,17 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
|
|
|
59
104
|
|
|
60
105
|
uniform vec4 u_radius;
|
|
61
106
|
|
|
62
|
-
uniform vec4
|
|
63
|
-
uniform vec4
|
|
64
|
-
uniform int u_border_asym;
|
|
107
|
+
uniform vec4 u_borderWidth;
|
|
108
|
+
uniform vec4 u_borderColor;
|
|
65
109
|
|
|
66
110
|
varying vec4 v_color;
|
|
67
111
|
varying vec2 v_textureCoords;
|
|
68
112
|
varying vec2 v_nodeCoords;
|
|
69
113
|
|
|
114
|
+
varying vec2 v_halfDimensions;
|
|
115
|
+
varying vec4 v_innerRadius;
|
|
116
|
+
varying vec2 v_innerSize;
|
|
117
|
+
|
|
70
118
|
float roundedBox(vec2 p, vec2 s, vec4 r) {
|
|
71
119
|
r.xy = (p.x > 0.0) ? r.yz : r.xw;
|
|
72
120
|
r.x = (p.y > 0.0) ? r.y : r.x;
|
|
@@ -74,40 +122,22 @@ export const RoundedWithBorder: WebGlShaderType<RoundedWithBorderProps> = {
|
|
|
74
122
|
return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
|
|
75
123
|
}
|
|
76
124
|
|
|
77
|
-
float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
|
|
78
|
-
r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
|
|
79
|
-
r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
|
|
80
|
-
r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
|
|
81
|
-
r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
|
|
82
|
-
|
|
83
|
-
p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
|
|
84
|
-
p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
|
|
85
|
-
|
|
86
|
-
vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
|
|
87
|
-
float borderDist = roundedBox(p, size + u_pixelRatio, r);
|
|
88
|
-
return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
|
|
89
|
-
}
|
|
90
|
-
|
|
91
125
|
void main() {
|
|
92
126
|
vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
|
|
93
|
-
vec2 halfDimensions = (u_dimensions * 0.5);
|
|
94
127
|
|
|
95
|
-
vec2 boxUv = v_nodeCoords.xy * u_dimensions -
|
|
96
|
-
float
|
|
128
|
+
vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
|
|
129
|
+
float outerDist = roundedBox(boxUv, v_halfDimensions, u_radius);
|
|
130
|
+
|
|
131
|
+
float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
|
|
97
132
|
|
|
98
|
-
|
|
99
|
-
|
|
133
|
+
boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
|
|
134
|
+
boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
|
|
100
135
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
else {
|
|
105
|
-
borderAlpha = 1.0 - smoothstep(u_border_width[0] - u_pixelRatio, u_border_width[0], abs(boxDist));
|
|
106
|
-
}
|
|
136
|
+
float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
|
|
137
|
+
float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
|
|
107
138
|
|
|
108
|
-
vec4 resColor =
|
|
109
|
-
resColor = mix(
|
|
110
|
-
resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
|
|
139
|
+
vec4 resColor = mix(u_borderColor, color, innerAlpha);
|
|
140
|
+
resColor = mix(vec4(0.0), resColor, outerAlpha);
|
|
111
141
|
gl_FragColor = resColor * u_alpha;
|
|
112
142
|
}
|
|
113
143
|
`,
|
|
@@ -16,28 +16,22 @@
|
|
|
16
16
|
*/
|
|
17
17
|
|
|
18
18
|
import type { CoreNode } from '../../CoreNode.js';
|
|
19
|
-
import { calcFactoredRadiusArray
|
|
19
|
+
import { calcFactoredRadiusArray } from '../../lib/utils.js';
|
|
20
20
|
import type { Vec4 } from '../../renderers/webgl/internal/ShaderUtils.js';
|
|
21
21
|
import type { WebGlShaderType } from '../../renderers/webgl/WebGlShaderNode.js';
|
|
22
22
|
import {
|
|
23
23
|
RoundedWithBorderAndShadowTemplate,
|
|
24
24
|
type RoundedWithBorderAndShadowProps,
|
|
25
25
|
} from '../templates/RoundedWithBorderAndShadowTemplate.js';
|
|
26
|
-
import { Shadow } from './Shadow.js';
|
|
27
26
|
|
|
28
27
|
export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndShadowProps> =
|
|
29
28
|
{
|
|
30
29
|
props: RoundedWithBorderAndShadowTemplate.props,
|
|
31
30
|
update(node: CoreNode) {
|
|
32
|
-
this.uniformRGBA('
|
|
33
|
-
this.uniform4fa('
|
|
31
|
+
this.uniformRGBA('u_borderColor', this.props!['border-color']);
|
|
32
|
+
this.uniform4fa('u_borderWidth', this.props!['border-width'] as Vec4);
|
|
34
33
|
|
|
35
|
-
this.
|
|
36
|
-
'u_border_asym',
|
|
37
|
-
valuesAreEqual(this.props!['border-width'] as number[]) ? 0 : 1,
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
this.uniformRGBA('u_shadow_color', this.props!['shadow-color']);
|
|
34
|
+
this.uniformRGBA('u_shadowColor', this.props!['shadow-color']);
|
|
41
35
|
this.uniform4fa('u_shadow', this.props!['shadow-projection']);
|
|
42
36
|
|
|
43
37
|
this.uniform4fa(
|
|
@@ -49,7 +43,61 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
|
|
|
49
43
|
),
|
|
50
44
|
);
|
|
51
45
|
},
|
|
52
|
-
vertex:
|
|
46
|
+
vertex: `
|
|
47
|
+
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
48
|
+
precision highp float;
|
|
49
|
+
# else
|
|
50
|
+
precision mediump float;
|
|
51
|
+
# endif
|
|
52
|
+
|
|
53
|
+
attribute vec2 a_position;
|
|
54
|
+
attribute vec2 a_textureCoords;
|
|
55
|
+
attribute vec4 a_color;
|
|
56
|
+
attribute vec2 a_nodeCoords;
|
|
57
|
+
|
|
58
|
+
uniform vec2 u_resolution;
|
|
59
|
+
uniform float u_pixelRatio;
|
|
60
|
+
uniform float u_rtt;
|
|
61
|
+
uniform vec2 u_dimensions;
|
|
62
|
+
|
|
63
|
+
uniform vec4 u_shadow;
|
|
64
|
+
uniform vec4 u_radius;
|
|
65
|
+
uniform vec4 u_borderWidth;
|
|
66
|
+
|
|
67
|
+
varying vec4 v_color;
|
|
68
|
+
varying vec2 v_textureCoords;
|
|
69
|
+
varying vec2 v_nodeCoords;
|
|
70
|
+
|
|
71
|
+
varying vec4 v_innerRadius;
|
|
72
|
+
varying vec2 v_innerSize;
|
|
73
|
+
varying vec2 v_halfDimensions;
|
|
74
|
+
|
|
75
|
+
void main() {
|
|
76
|
+
vec2 screenSpace = vec2(2.0 / u_resolution.x, -2.0 / u_resolution.y);
|
|
77
|
+
vec2 outerEdge = clamp(a_nodeCoords * 2.0 - vec2(1.0), -1.0, 1.0);
|
|
78
|
+
|
|
79
|
+
vec2 shadowEdge = outerEdge * ((u_shadow.w * 2.0)+ u_shadow.z) + u_shadow.xy;
|
|
80
|
+
vec2 normVertexPos = a_position * u_pixelRatio;
|
|
81
|
+
|
|
82
|
+
vec2 vertexPos = (a_position + outerEdge + shadowEdge) * u_pixelRatio;
|
|
83
|
+
gl_Position = vec4(vertexPos.x * screenSpace.x - 1.0, -sign(screenSpace.y) * (vertexPos.y * -abs(screenSpace.y)) + 1.0, 0.0, 1.0);
|
|
84
|
+
|
|
85
|
+
v_halfDimensions = u_dimensions * 0.5;
|
|
86
|
+
|
|
87
|
+
v_innerRadius = vec4(
|
|
88
|
+
max(0.0, u_radius.x - max(u_borderWidth.x, u_borderWidth.w) - 0.5),
|
|
89
|
+
max(0.0, u_radius.y - max(u_borderWidth.x, u_borderWidth.y) - 0.5),
|
|
90
|
+
max(0.0, u_radius.z - max(u_borderWidth.z, u_borderWidth.y) - 0.5),
|
|
91
|
+
max(0.0, u_radius.w - max(u_borderWidth.z, u_borderWidth.w) - 0.5)
|
|
92
|
+
);
|
|
93
|
+
|
|
94
|
+
v_innerSize = (vec2(u_dimensions.x - (u_borderWidth[3] + u_borderWidth[1]) - 1.0, u_dimensions.y - (u_borderWidth[0] + u_borderWidth[2])) - 2.0) * 0.5;
|
|
95
|
+
|
|
96
|
+
v_color = a_color;
|
|
97
|
+
v_nodeCoords = a_nodeCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
98
|
+
v_textureCoords = a_textureCoords + (screenSpace + shadowEdge) / (u_dimensions);
|
|
99
|
+
}
|
|
100
|
+
`,
|
|
53
101
|
fragment: `
|
|
54
102
|
# ifdef GL_FRAGMENT_PRECISION_HIGH
|
|
55
103
|
precision highp float;
|
|
@@ -65,16 +113,19 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
|
|
|
65
113
|
uniform float u_rtt;
|
|
66
114
|
|
|
67
115
|
uniform vec4 u_radius;
|
|
68
|
-
uniform vec4
|
|
69
|
-
uniform vec4
|
|
70
|
-
uniform
|
|
71
|
-
uniform vec4 u_shadow_color;
|
|
116
|
+
uniform vec4 u_borderWidth;
|
|
117
|
+
uniform vec4 u_borderColor;
|
|
118
|
+
uniform vec4 u_shadowColor;
|
|
72
119
|
uniform vec4 u_shadow;
|
|
73
120
|
|
|
74
121
|
varying vec4 v_color;
|
|
75
122
|
varying vec2 v_textureCoords;
|
|
76
123
|
varying vec2 v_nodeCoords;
|
|
77
124
|
|
|
125
|
+
varying vec2 v_halfDimensions;
|
|
126
|
+
varying vec4 v_innerRadius;
|
|
127
|
+
varying vec2 v_innerSize;
|
|
128
|
+
|
|
78
129
|
float roundedBox(vec2 p, vec2 s, vec4 r) {
|
|
79
130
|
r.xy = (p.x > 0.0) ? r.yz : r.xw;
|
|
80
131
|
r.x = (p.y > 0.0) ? r.y : r.x;
|
|
@@ -82,20 +133,6 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
|
|
|
82
133
|
return (min(max(q.x, q.y), 0.0) + length(max(q, 0.0))) - r.x;
|
|
83
134
|
}
|
|
84
135
|
|
|
85
|
-
float asymBorderWidth(vec2 p, float d, vec4 r, vec4 w) {
|
|
86
|
-
r.x = (r.x - (max(w.w, w.x) - min(w.w, w.x))) * 0.5;
|
|
87
|
-
r.y = (r.y - (max(w.y, w.x) - min(w.y, w.x))) * 0.5;
|
|
88
|
-
r.z = (r.z - (max(w.y, w.z) - min(w.y, w.z))) * 0.5;
|
|
89
|
-
r.w = (r.w - (max(w.w, w.z) - min(w.w, w.z))) * 0.5;
|
|
90
|
-
|
|
91
|
-
p.x += w.y > w.w ? (w.y - w.w) * 0.5 : -(w.w - w.y) * 0.5;
|
|
92
|
-
p.y += w.z > w.x ? (w.z - w.x) * 0.5 : -(w.x - w.z) * 0.5;
|
|
93
|
-
|
|
94
|
-
vec2 size = vec2(u_dimensions.x - (w[3] + w[1]), u_dimensions.y - (w[0] + w[2])) * 0.5;
|
|
95
|
-
float borderDist = roundedBox(p, size, r);
|
|
96
|
-
return 1.0 - smoothstep(0.0, u_pixelRatio, max(-borderDist, d));
|
|
97
|
-
}
|
|
98
|
-
|
|
99
136
|
float shadowBox(vec2 p, vec2 s, vec4 r) {
|
|
100
137
|
r.xy = (p.x > 0.0) ? r.yz : r.xw;
|
|
101
138
|
r.x = (p.y > 0.0) ? r.y : r.x;
|
|
@@ -106,27 +143,23 @@ export const RoundedWithBorderAndShadow: WebGlShaderType<RoundedWithBorderAndSha
|
|
|
106
143
|
|
|
107
144
|
void main() {
|
|
108
145
|
vec4 color = texture2D(u_texture, v_textureCoords) * v_color;
|
|
109
|
-
vec2 halfDimensions = (u_dimensions * 0.5);
|
|
110
146
|
|
|
111
|
-
vec2 boxUv = v_nodeCoords.xy * u_dimensions -
|
|
112
|
-
float
|
|
147
|
+
vec2 boxUv = v_nodeCoords.xy * u_dimensions - v_halfDimensions;
|
|
148
|
+
float outerDist = roundedBox(boxUv, v_halfDimensions - 1.0, u_radius);
|
|
149
|
+
|
|
150
|
+
float outerAlpha = 1.0 - smoothstep(0.0, 1.0, outerDist);
|
|
113
151
|
|
|
114
|
-
|
|
115
|
-
|
|
152
|
+
boxUv.x += u_borderWidth.y > u_borderWidth.w ? (u_borderWidth.y - u_borderWidth.w) * 0.5 : -(u_borderWidth.w - u_borderWidth.y) * 0.5;
|
|
153
|
+
boxUv.y += u_borderWidth.z > u_borderWidth.x ? ((u_borderWidth.z - u_borderWidth.x) * 0.5 + 0.5) : -(u_borderWidth.x - u_borderWidth.z) * 0.5;
|
|
116
154
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
120
|
-
else {
|
|
121
|
-
borderAlpha = 1.0 - smoothstep(u_border_width[0], u_border_width[0], abs(outerBoxDist));
|
|
122
|
-
}
|
|
155
|
+
float innerDist = roundedBox(boxUv, v_innerSize, v_innerRadius);
|
|
156
|
+
float innerAlpha = 1.0 - smoothstep(0.0, 1.0, innerDist);
|
|
123
157
|
|
|
124
|
-
float shadowAlpha = shadowBox(boxUv - u_shadow.xy,
|
|
158
|
+
float shadowAlpha = shadowBox(boxUv - u_shadow.xy, v_halfDimensions + u_shadow.w, u_radius + u_shadow.z);
|
|
125
159
|
|
|
126
|
-
vec4
|
|
127
|
-
resColor = mix(
|
|
128
|
-
resColor = mix(
|
|
129
|
-
resColor = mix(resColor, u_border_color, min(u_border_color.a, min(borderAlpha, roundedAlpha)));
|
|
160
|
+
vec4 shadow = mix(vec4(0.0), u_shadowColor, shadowAlpha);
|
|
161
|
+
vec4 resColor = mix(u_borderColor, color, innerAlpha);
|
|
162
|
+
resColor = mix(shadow, resColor, outerAlpha);
|
|
130
163
|
gl_FragColor = resColor * u_alpha;
|
|
131
164
|
}
|
|
132
165
|
`,
|
|
@@ -708,7 +708,10 @@ export class SdfTextRenderer extends TextRenderer<SdfTextRendererState> {
|
|
|
708
708
|
width: textW,
|
|
709
709
|
rtt: false,
|
|
710
710
|
parentHasRenderTexture: node.parentHasRenderTexture,
|
|
711
|
-
framebufferDimensions:
|
|
711
|
+
framebufferDimensions:
|
|
712
|
+
node.parentHasRenderTexture === true
|
|
713
|
+
? node.parentFramebufferDimensions
|
|
714
|
+
: null,
|
|
712
715
|
},
|
|
713
716
|
0,
|
|
714
717
|
);
|
|
@@ -172,7 +172,7 @@ export class Inspector {
|
|
|
172
172
|
private scaleY = 1;
|
|
173
173
|
|
|
174
174
|
constructor(canvas: HTMLCanvasElement, settings: RendererMainSettings) {
|
|
175
|
-
if (isProductionEnvironment
|
|
175
|
+
if (isProductionEnvironment === true) return;
|
|
176
176
|
|
|
177
177
|
if (!settings) {
|
|
178
178
|
throw new Error('settings is required');
|
package/src/main-api/Renderer.ts
CHANGED
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
import type { ExtractProps, TextureMap } from '../core/CoreTextureManager.js';
|
|
21
21
|
import { EventEmitter } from '../common/EventEmitter.js';
|
|
22
|
-
import {
|
|
22
|
+
import { isProductionEnvironment } from '../utils.js';
|
|
23
23
|
import { Stage } from '../core/Stage.js';
|
|
24
24
|
import { CoreNode, type CoreNodeProps } from '../core/CoreNode.js';
|
|
25
25
|
import { type CoreTextNodeProps } from '../core/CoreTextNode.js';
|
|
@@ -466,7 +466,7 @@ export class RendererMain extends EventEmitter {
|
|
|
466
466
|
targetEl.appendChild(canvas);
|
|
467
467
|
|
|
468
468
|
// Initialize inspector (if enabled)
|
|
469
|
-
if (inspector &&
|
|
469
|
+
if (inspector && isProductionEnvironment === false) {
|
|
470
470
|
this.inspector = new inspector(canvas, resolvedSettings);
|
|
471
471
|
}
|
|
472
472
|
}
|
|
@@ -489,8 +489,6 @@ export class RendererMain extends EventEmitter {
|
|
|
489
489
|
createNode<ShNode extends CoreShaderNode<any>>(
|
|
490
490
|
props: Partial<INodeProps<ShNode>>,
|
|
491
491
|
): INode<ShNode> {
|
|
492
|
-
assertTruthy(this.stage, 'Stage is not initialized');
|
|
493
|
-
|
|
494
492
|
const node = this.stage.createNode(props as Partial<CoreNodeProps>);
|
|
495
493
|
|
|
496
494
|
if (this.inspector) {
|
package/src/utils.ts
CHANGED
|
@@ -64,6 +64,15 @@ export function createWebGLContext(
|
|
|
64
64
|
return gl;
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
/**
|
|
68
|
+
* Checks if we're in a development environment or not.
|
|
69
|
+
*
|
|
70
|
+
* @returns
|
|
71
|
+
*/
|
|
72
|
+
declare const __DEV__: boolean;
|
|
73
|
+
export const isProductionEnvironment =
|
|
74
|
+
typeof __DEV__ !== 'undefined' ? !__DEV__ : true;
|
|
75
|
+
|
|
67
76
|
/**
|
|
68
77
|
* Asserts a condition is truthy, otherwise throws an error
|
|
69
78
|
*
|
|
@@ -80,7 +89,7 @@ export function assertTruthy(
|
|
|
80
89
|
condition: unknown,
|
|
81
90
|
message?: string,
|
|
82
91
|
): asserts condition {
|
|
83
|
-
if (isProductionEnvironment
|
|
92
|
+
if (isProductionEnvironment === true) return;
|
|
84
93
|
if (!condition) {
|
|
85
94
|
throw new Error(message || 'Assertion failed');
|
|
86
95
|
}
|
|
@@ -230,15 +239,6 @@ export function getImageAspectRatio(width: number, height: number): number {
|
|
|
230
239
|
return width / height;
|
|
231
240
|
}
|
|
232
241
|
|
|
233
|
-
/**
|
|
234
|
-
* Checks import.meta if env is production
|
|
235
|
-
*
|
|
236
|
-
* @returns
|
|
237
|
-
*/
|
|
238
|
-
export function isProductionEnvironment(): boolean {
|
|
239
|
-
return import.meta.env && import.meta.env.PROD;
|
|
240
|
-
}
|
|
241
|
-
|
|
242
242
|
/**
|
|
243
243
|
* Returns a new unique ID
|
|
244
244
|
*/
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
if (
|
|
2
|
-
process.cwd() === process.env.INIT_CWD &&
|
|
3
|
-
!process.env.npm_execpath.includes('pnpm')
|
|
4
|
-
) {
|
|
5
|
-
console.log('\x1b[31m');
|
|
6
|
-
console.log('=============================================\n');
|
|
7
|
-
console.log(' Please use PNPM as a package manager');
|
|
8
|
-
console.log(' See: https://pnpm.io/ for more info');
|
|
9
|
-
console.log('\n=============================================');
|
|
10
|
-
console.log('\x1b[0m');
|
|
11
|
-
|
|
12
|
-
process.exit(1);
|
|
13
|
-
}
|
package/src/core/platform.ts
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* If not stated otherwise in this file or this component's LICENSE file the
|
|
3
|
-
* following copyright and licenses apply:
|
|
4
|
-
*
|
|
5
|
-
* Copyright 2023 Comcast Cable Communications Management, LLC.
|
|
6
|
-
*
|
|
7
|
-
* Licensed under the Apache License, Version 2.0 (the License);
|
|
8
|
-
* you may not use this file except in compliance with the License.
|
|
9
|
-
* You may obtain a copy of the License at
|
|
10
|
-
*
|
|
11
|
-
* http://www.apache.org/licenses/LICENSE-2.0
|
|
12
|
-
*
|
|
13
|
-
* Unless required by applicable law or agreed to in writing, software
|
|
14
|
-
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
15
|
-
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
16
|
-
* See the License for the specific language governing permissions and
|
|
17
|
-
* limitations under the License.
|
|
18
|
-
*/
|
|
19
|
-
|
|
20
|
-
import type { Stage } from './Stage.js';
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Platform render loop initiator
|
|
24
|
-
*/
|
|
25
|
-
export const startLoop = (stage: Stage) => {
|
|
26
|
-
let isIdle = false;
|
|
27
|
-
const runLoop = () => {
|
|
28
|
-
stage.updateFrameTime();
|
|
29
|
-
stage.updateAnimations();
|
|
30
|
-
|
|
31
|
-
if (!stage.hasSceneUpdates()) {
|
|
32
|
-
// We still need to calculate the fps else it looks like the app is frozen
|
|
33
|
-
stage.calculateFps();
|
|
34
|
-
setTimeout(runLoop, 16.666666666666668);
|
|
35
|
-
|
|
36
|
-
if (!isIdle) {
|
|
37
|
-
stage.shManager.cleanup();
|
|
38
|
-
stage.eventBus.emit('idle');
|
|
39
|
-
isIdle = true;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (stage.txMemManager.checkCleanup() === true) {
|
|
43
|
-
stage.txMemManager.cleanup(false);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
stage.flushFrameEvents();
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
isIdle = false;
|
|
51
|
-
stage.drawFrame();
|
|
52
|
-
stage.flushFrameEvents();
|
|
53
|
-
requestAnimationFrame(runLoop);
|
|
54
|
-
};
|
|
55
|
-
requestAnimationFrame(runLoop);
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
/**
|
|
59
|
-
* Return unix timestamp
|
|
60
|
-
* @return {number}
|
|
61
|
-
*/
|
|
62
|
-
export const getTimeStamp = () => {
|
|
63
|
-
return performance ? performance.now() : Date.now();
|
|
64
|
-
};
|