Skip to content

Commit

Permalink
feat: rounded rect in lesson9
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoiver
xiaoiver committed Jun 30, 2024
1 parent 528f18c commit a1cab33
Show file tree
Hide file tree
Showing 32 changed files with 474 additions and 101 deletions.
2 changes: 1 addition & 1 deletion packages/lesson_001/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,6 @@
"build": "run-p build:*"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5"
"@antv/g-device-api": "^1.6.12"
}
}
1 change: 1 addition & 0 deletions packages/lesson_001/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_002/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"watch": "rimraf ./esm && tsc --module ESNext --outDir esm --watch"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"d3-color": "^3.1.0"
},
"devDependencies": {
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_002/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_003/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"build": "run-p build:*"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"d3-color": "^3.1.0"
},
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_003/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_004/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"build": "run-p build:*"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_004/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_005/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"build": "run-p build:*"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_005/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_006/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"build": "run-p build:*"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_006/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_007/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"watch": "rimraf ./esm && tsc --module ESNext --outDir esm --watch"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_007/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_008/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"watch": "rimraf ./esm && tsc --module ESNext --outDir esm --watch"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_008/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
33 changes: 16 additions & 17 deletions packages/lesson_009/examples/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,25 +33,24 @@ for (let i = 0; i < 1000; i++) {
// });
// canvas.appendChild(circle);

const ellipse = new Ellipse({
cx: Math.random() * 1000,
cy: Math.random() * 1000,
rx: Math.random() * 20,
ry: Math.random() * 20,
fill,
});
canvas.appendChild(ellipse);

// const rect = new Rect({
// x: 0,
// y: 0,
// width: 100,
// height: 100,
// const ellipse = new Ellipse({
// cx: Math.random() * 1000,
// cy: Math.random() * 1000,
// rx: Math.random() * 20,
// ry: Math.random() * 20,
// fill,
// rx: 10,
// ry: 50,
// });
// canvas.appendChild(rect);
// canvas.appendChild(ellipse);

const rect = new Rect({
x: 0,
y: 0,
width: 100,
height: 100,
fill,
cornerRadius: 10,
});
canvas.appendChild(rect);

// circle.addEventListener('pointerenter', () => {
// circle.fill = 'red';
Expand Down
2 changes: 1 addition & 1 deletion packages/lesson_009/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"watch": "rimraf ./esm && tsc --module ESNext --outDir esm --watch"
},
"dependencies": {
"@antv/g-device-api": "^1.6.5",
"@antv/g-device-api": "^1.6.12",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
Expand Down
9 changes: 5 additions & 4 deletions packages/lesson_009/src/drawcalls/SDF.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ export class SDF extends Drawcall {

let size: [number, number, number, number];
let type: number;
let rxRy: [number, number] = [0, 0];
let cornerRadius = 0;
if (shape instanceof Circle) {
const { cx, cy, r } = shape;
size = [cx, cy, r, r];
Expand All @@ -326,10 +326,10 @@ export class SDF extends Drawcall {
size = [cx, cy, rx, ry];
type = 1;
} else if (shape instanceof Rect) {
const { x, y, width, height, rx, ry } = shape;
const { x, y, width, height, cornerRadius: r } = shape;
size = [x + width / 2, y + height / 2, width / 2, height / 2];
type = 2;
rxRy = [rx, ry];
cornerRadius = r;
}

return [
Expand All @@ -344,7 +344,8 @@ export class SDF extends Drawcall {
so,
shape.globalRenderOrder / ZINDEX_FACTOR,
strokeWidth,
...rxRy,
cornerRadius,
0,
opacity,
fillOpacity,
strokeOpacity,
Expand Down
1 change: 1 addition & 0 deletions packages/lesson_009/src/plugins/Renderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export class Renderer implements Plugin {
if (renderer === 'webgl') {
deviceContribution = new WebGLDeviceContribution({
targets: ['webgl2', 'webgl1'],
antialias: true,
shaderDebug: true,
trackResources: true,
onContextCreationError: () => {},
Expand Down
43 changes: 28 additions & 15 deletions packages/lesson_009/src/shaders/sdf.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ out vec2 v_FragCoord;
out vec4 v_StrokeColor;
out float v_StrokeWidth;
out vec4 v_Opacity;
out vec2 v_RxRy;
out float v_CornerRadius;
#else
#endif
out vec2 v_Radius;
Expand All @@ -58,7 +58,7 @@ void main() {
v_StrokeColor = strokeColor;
v_StrokeWidth = strokeWidth;
v_Opacity = a_Opacity;
v_RxRy = a_ZIndexStrokeWidth.zw;
v_CornerRadius = a_ZIndexStrokeWidth.z;
#else
model = u_ModelMatrix;
position = u_PositionSize.xy;
Expand Down Expand Up @@ -102,7 +102,7 @@ in vec2 v_FragCoord;
in vec4 v_StrokeColor;
in float v_StrokeWidth;
in vec4 v_Opacity;
in vec2 v_RxRy;
in float v_CornerRadius;
#else
#endif
in vec2 v_Radius;
Expand All @@ -127,11 +127,22 @@ float sdf_ellipse(vec2 p, vec2 r) {
// return length(p)*(1.0-1.0/k1);
}
float sdf_rounded_box(vec2 p, vec2 b, vec4 r) {
r.xy = (p.x>0.0)?r.xy : r.zw;
r.x = (p.y>0.0)?r.x : r.y;
vec2 q = abs(p)-b+r.x;
return min(max(q.x,q.y),0.0) + length(max(q,0.0)) - r.x;
float sdf_rounded_box(vec2 p, vec2 b, float r) {
vec2 q = abs(p) - b + r;
return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
}
vec4 erf(vec4 x) {
vec4 s = sign(x), a = abs(x);
x = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
x *= x;
return s - s / (x * x);
}
float boxShadow(vec2 lower, vec2 upper, vec2 point, float sigma) {
vec4 query = vec4(point - lower, upper - point);
vec4 integral = 0.5 + 0.5 * erf(query * (sqrt(0.5) / sigma));
return (integral.z - integral.x) * (integral.w - integral.y);
}
void main() {
Expand All @@ -142,7 +153,7 @@ void main() {
float fillOpacity;
float strokeOpacity;
float shape;
vec2 rxRy;
float cornerRadius;
#ifdef USE_INSTANCES
fillColor = v_FillColor;
Expand All @@ -152,7 +163,7 @@ void main() {
fillOpacity = v_Opacity.y;
strokeOpacity = v_Opacity.z;
shape = v_Opacity.w;
rxRy = v_RxRy;
cornerRadius = v_CornerRadius;
#else
fillColor = u_FillColor;
strokeColor = u_StrokeColor;
Expand All @@ -161,12 +172,12 @@ void main() {
fillOpacity = u_Opacity.y;
strokeOpacity = u_Opacity.z;
shape = u_Opacity.w;
rxRy = u_ZIndexStrokeWidth.zw;
cornerRadius = u_ZIndexStrokeWidth.z;
#endif
vec2 r = (v_Radius - strokeWidth) / v_Radius.y;
float wh = v_Radius.x / v_Radius.y;
rxRy = rxRy / v_Radius.y;
cornerRadius = cornerRadius / v_Radius.y;
float dist = length(v_FragCoord);
float antialiasedBlur = -fwidth(dist);
Expand All @@ -181,10 +192,12 @@ void main() {
outerDistance = sdf_ellipse(v_FragCoord, vec2(wh, 1.0));
innerDistance = sdf_ellipse(v_FragCoord, r);
} else if (shape < 2.5) {
outerDistance = sdf_rounded_box(v_FragCoord, vec2(wh, 1.0), vec4(rxRy, rxRy));
innerDistance = sdf_rounded_box(v_FragCoord, r, vec4(rxRy, rxRy));
outerDistance = sdf_rounded_box(v_FragCoord, vec2(wh, 1.0), cornerRadius);
innerDistance = sdf_rounded_box(v_FragCoord, r, cornerRadius);
}
float a = boxShadow(vec2(-wh, -1.0), vec2(wh, 1.0), v_FragCoord, 5.0);
float opacity_t = clamp(outerDistance / antialiasedBlur, 0.0, 1.0);
float color_t = strokeWidth < 0.01 ? 0.0 : smoothstep(
Expand All @@ -194,7 +207,7 @@ void main() {
);
outputColor = mix(vec4(fillColor.rgb, fillColor.a * fillOpacity), strokeColor * strokeOpacity, color_t);
outputColor.a = outputColor.a * opacity * opacity_t;
outputColor.a = outputColor.a * opacity * opacity_t * 1.0;
if (outputColor.a < epsilon)
discard;
Expand Down
Loading

0 comments on commit a1cab33

Please sign in to comment.