Skip to content

Commit

Permalink
fix: smoothstep low high error in wgsl #9
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoiver
xiaoiver committed Nov 5, 2024
1 parent 8199d9e commit ab4ba11
Show file tree
Hide file tree
Showing 30 changed files with 702 additions and 303 deletions.
227 changes: 64 additions & 163 deletions packages/core/examples/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
Ellipse,
parsePath,
} from '../src';
import { CheckboardStyle } from '../src/plugins';

const $canvas = document.getElementById('canvas') as HTMLCanvasElement;
const resize = (width: number, height: number) => {
Expand All @@ -24,178 +23,80 @@ resize(window.innerWidth, window.innerHeight);

const canvas = await new Canvas({
canvas: $canvas,
// renderer: 'webgpu',
// shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
renderer: 'webgpu',
shaderCompilerPath: '/glsl_wgsl_compiler_bg.wasm',
}).initialized;

const svg = {
circle: 'M40,0A40,40 0 1,1 0,-40A40,40 0 0,1 40,0Z',
triangle: `M${[0, 1, 2]
.map(
(i) =>
`${Math.sin((i / 3) * 2 * Math.PI)},${-Math.cos(
(i / 3) * 2 * Math.PI,
)}`,
)
.join('L')}Z`,
square: `M1,1L-1,1L-1,-1L1,-1Z`,
pentagon: `M${[0, 1, 2, 3, 4]
.map(
(i) =>
`${Math.sin((i / 5) * 2 * Math.PI)},${-Math.cos(
(i / 5) * 2 * Math.PI,
)}`,
)
.join('L')}Z`,
hexagon: `M${[0, 1, 2, 3, 4, 5]
.map(
(i) =>
`${Math.sin((i / 6) * 2 * Math.PI)},${-Math.cos(
(i / 6) * 2 * Math.PI,
)}`,
)
.join('L')}Z`,
star: `M${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
.map(
(i) =>
`${Math.sin((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)},${
-Math.cos((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)
}`,
)
.join('L')}Z`,
plus: `M4,1L1,1L1,4L-1,4L-1,1L-4,1L-4,-1L-1,-1L-1,-4L1,-4L1,-1L4,-1Z`,
};

const path = new Path({
d: svg.circle,
fill: 'black',
opacity: 0.5,
});
canvas.appendChild(path);

const path2 = new Path({
d: svg.circle,
fill: 'black',
opacity: 0.5,
// const svg = {
// circle: 'M40,0A40,40 0 1,1 0,-40A40,40 0 0,1 40,0Z',
// triangle: `M${[0, 1, 2]
// .map(
// (i) =>
// `${Math.sin((i / 3) * 2 * Math.PI)},${-Math.cos(
// (i / 3) * 2 * Math.PI,
// )}`,
// )
// .join('L')}Z`,
// square: `M1,1L-1,1L-1,-1L1,-1Z`,
// pentagon: `M${[0, 1, 2, 3, 4]
// .map(
// (i) =>
// `${Math.sin((i / 5) * 2 * Math.PI)},${-Math.cos(
// (i / 5) * 2 * Math.PI,
// )}`,
// )
// .join('L')}Z`,
// hexagon: `M${[0, 1, 2, 3, 4, 5]
// .map(
// (i) =>
// `${Math.sin((i / 6) * 2 * Math.PI)},${-Math.cos(
// (i / 6) * 2 * Math.PI,
// )}`,
// )
// .join('L')}Z`,
// star: `M${[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
// .map(
// (i) =>
// `${Math.sin((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)},${
// -Math.cos((i / 10) * 2 * Math.PI) * (i % 2 === 1 ? 0.5 : 1)
// }`,
// )
// .join('L')}Z`,
// plus: `M4,1L1,1L1,4L-1,4L-1,1L-4,1L-4,-1L-1,-1L-1,-4L1,-4L1,-1L4,-1Z`,
// };

const polyline = new Polyline({
points: [
[0, 0],
[100, 0],
[100, 100],
// [NaN, NaN],
[200, 0],
[300, 0],
[300, 100],
],
stroke: 'black',
strokeWidth: 2,
fill: 'none',
});
path2.position.x = 100;
canvas.appendChild(path2);

// console.log(parsePath(svg.circle).subPaths[0].getPoints());

// const polyline1 = new Polyline({
// points: [
// [256, 100],
// [356, 100],
// [356, 200],
// [256, 200],
// [256, 100],
// [256, 100.1],
// ],
// stroke: 'red',
// strokeWidth: 20,
// strokeLinejoin: 'round',
// // strokeLinecap: 'square',
// strokeDasharray: [5, 5],
// // strokeDashoffset: 0,
// // sizeAttenuation: false,
// });
// canvas.appendChild(polyline1);
canvas.appendChild(polyline);
// polyline.position.x = 100;
// polyline.position.y = 100;

// polyline1.strokeDasharray = [10, 10];
// polyline1.addEventListener('pointerenter', () => {
// polyline1.stroke = 'green';
// });
// polyline1.addEventListener('pointerleave', () => {
// polyline1.stroke = 'red';
// });

// const exporter = new ImageExporter({
// canvas,
// });

// const svg = exporter.toSVG({ grid: true });

// console.log(svg);

// const rect2 = new Rect({
// x: 256,
// y: 100,
// width: 100,
// height: 100,
// const ring = new Path({
// // d: 'M 50 10 A 40 40 0 1 0 50 90 A 40 40 0 1 0 50 10 Z M 50 30 A 20 20 0 1 1 50 70 A 20 20 0 1 1 50 30 Z',
// d: 'M 0 0 L 100 0 L 100 100 L 0 100 Z',
// fill: 'black',
// fillOpacity: 0.5,
// stroke: 'red',
// // opacity: 0.5,
// strokeWidth: 10,
// dropShadowBlurRadius: 10,
// dropShadowColor: 'black',
// dropShadowOffsetX: 10,
// dropShadowOffsetY: 10,
// strokeDasharray: [5, 5],
// });
// canvas.appendChild(rect2);

// const circle = new Circle({
// cx: 350,
// cy: 100,
// r: 50,
// fill: 'black',
// stroke: 'red',
// strokeWidth: 20,
// fillOpacity: 0.5,
// });

// setTimeout(() => {
// circle.strokeDasharray = [5, 5];
// }, 1000);
// canvas.appendChild(circle);

// const ellipse = new Ellipse({
// cx: 350,
// cy: 300,
// rx: 100,
// ry: 50,
// fill: 'black',
// stroke: 'red',
// strokeWidth: 20,
// fillOpacity: 0.5,
// strokeDasharray: [5, 5],
// });
// canvas.appendChild(ellipse);

canvas.render();

// const polyline1 = new Polyline({
// points: [
// [100, 100],
// // [100, 200],
// [200, 200],
// [200, 100],
// ],
// stroke: 'red',
// strokeWidth: 20,
// // strokeAlignment: 'outer',
// strokeLinejoin: 'round',
// cullable: false,
// batchable: false,
// });
// canvas.appendChild(polyline1);
// ring.position.x = 100;
// ring.position.y = 100;
// canvas.appendChild(ring);

// const polyline2 = new Polyline({
// points: [
// [220, 100],
// [220, 200],
// [320, 200],
// [320, 100],
// ],
// stroke: 'green',
// strokeWidth: 20,
// strokeLinejoin: 'round',
// // strokeAlignment: 'center',
// cullable: false,
// batchable: false,
// });
// canvas.appendChild(polyline2);
canvas.render();

const animate = () => {
canvas.render();
Expand Down
2 changes: 1 addition & 1 deletion packages/core/src/drawcalls/BatchManager.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ SHAPE_DRAWCALL_CTORS.set(Ellipse, [SDF, SmoothPolyline]);
SHAPE_DRAWCALL_CTORS.set(Rect, [ShadowRect, SDF, SmoothPolyline]);
SHAPE_DRAWCALL_CTORS.set(Polyline, [SmoothPolyline]);
// SHAPE_DRAWCALL_CTORS.set(Path, [SDFPath]);
SHAPE_DRAWCALL_CTORS.set(Path, [Mesh]);
SHAPE_DRAWCALL_CTORS.set(Path, [Mesh, SmoothPolyline]);

export class BatchManager {
/**
Expand Down
50 changes: 10 additions & 40 deletions packages/core/src/drawcalls/Mesh.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import {
} from '@antv/g-device-api';
import { Path } from '../shapes';
import { Drawcall, ZINDEX_FACTOR } from './Drawcall';
import { vert, frag } from '../shaders/mesh';
import { vert, frag, Location } from '../shaders/mesh';
import { isString, paddingMat3 } from '../utils';
import earcut from 'earcut';

Expand Down Expand Up @@ -162,7 +162,7 @@ export class Mesh extends Drawcall {
stepMode: VertexStepMode.VERTEX,
attributes: [
{
shaderLocation: 1, // a_Position
shaderLocation: Location.POSITION, // a_Position
offset: 0,
format: Format.F32_RG,
},
Expand All @@ -173,52 +173,42 @@ export class Mesh extends Drawcall {
if (this.instanced) {
vertexBufferDescriptors.push(
{
arrayStride: 4 * 24,
arrayStride: 4 * 16,
stepMode: VertexStepMode.INSTANCE,
attributes: [
{
shaderLocation: 2, // a_FillColor
shaderLocation: Location.FILL_COLOR, // a_FillColor
offset: 4 * 0,
format: Format.F32_RGBA,
},
{
shaderLocation: 3, // a_StrokeColor
shaderLocation: Location.STROKE_COLOR, // a_StrokeColor
offset: 4 * 4,
format: Format.F32_RGBA,
},
{
shaderLocation: 4, // a_ZIndexStrokeWidth
shaderLocation: Location.ZINDEX_STROKE_WIDTH, // a_ZIndexStrokeWidth
offset: 4 * 8,
format: Format.F32_RGBA,
},
{
shaderLocation: 5, // a_Opacity
shaderLocation: Location.OPACITY, // a_Opacity
offset: 4 * 12,
format: Format.F32_RGBA,
},
{
shaderLocation: 6, // a_InnerShadowColor
offset: 4 * 16,
format: Format.F32_RGBA,
},
{
shaderLocation: 7, // a_InnerShadow
offset: 4 * 20,
format: Format.F32_RGBA,
},
],
},
{
arrayStride: 4 * 6,
stepMode: VertexStepMode.INSTANCE,
attributes: [
{
shaderLocation: 14,
shaderLocation: Location.ABCD,
offset: 0,
format: Format.F32_RGBA,
},
{
shaderLocation: 15,
shaderLocation: Location.TXTY,
offset: 4 * 4,
format: Format.F32_RG,
},
Expand Down Expand Up @@ -399,10 +389,6 @@ export class Mesh extends Drawcall {
opacity,
fillOpacity,
strokeOpacity,
innerShadowColorRGB: { r: isr, g: isg, b: isb, opacity: iso },
innerShadowOffsetX,
innerShadowOffsetY,
innerShadowBlurRadius,
} = shape;

const { r: fr, g: fg, b: fb, opacity: fo } = fillRGB || {};
Expand All @@ -416,30 +402,14 @@ export class Mesh extends Drawcall {
strokeAlignmentMap[strokeAlignment],
];
const u_Opacity = [opacity, fillOpacity, strokeOpacity, 0];
const u_InnerShadowColor = [isr / 255, isg / 255, isb / 255, iso];
const u_InnerShadow = [
innerShadowOffsetX,
innerShadowOffsetY,
innerShadowBlurRadius,
fillRGB ? 0 : 1,
];

return [
[
...u_FillColor,
...u_StrokeColor,
...u_ZIndexStrokeWidth,
...u_Opacity,
...u_InnerShadowColor,
...u_InnerShadow,
],
[...u_FillColor, ...u_StrokeColor, ...u_ZIndexStrokeWidth, ...u_Opacity],
{
u_FillColor,
u_StrokeColor,
u_ZIndexStrokeWidth,
u_Opacity,
u_InnerShadowColor,
u_InnerShadow,
},
];
}
Expand Down
Loading

0 comments on commit ab4ba11

Please sign in to comment.