Skip to content

Commit

Permalink
fix: turn off diagnostic in uniform control flow #6
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoiver committed Jul 23, 2024
1 parent 0bdfd9f commit f2dbe3f
Show file tree
Hide file tree
Showing 10 changed files with 229 additions and 102 deletions.
7 changes: 7 additions & 0 deletions packages/lesson_008/src/drawcalls/SDF.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,19 @@ export class SDF extends Drawcall {
this.#inputLayout.destroy();
this.#pipeline.destroy();
}

const diagnosticDerivativeUniformityHeader =
this.device.queryVendorInfo().platformString === 'WebGPU'
? 'diagnostic(off,derivative_uniformity);'
: '';

this.#program = this.device.createProgram({
vertex: {
glsl: defines + vert,
},
fragment: {
glsl: defines + frag,
postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs,
},
});

Expand Down
7 changes: 7 additions & 0 deletions packages/lesson_009/src/drawcalls/SDF.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,19 @@ export class SDF extends Drawcall {
this.#inputLayout.destroy();
this.#pipeline.destroy();
}

const diagnosticDerivativeUniformityHeader =
this.device.queryVendorInfo().platformString === 'WebGPU'
? 'diagnostic(off,derivative_uniformity);'
: '';

this.#program = this.device.createProgram({
vertex: {
glsl: defines + vert,
},
fragment: {
glsl: defines + frag,
postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs,
},
});

Expand Down
90 changes: 2 additions & 88 deletions packages/lesson_010/examples/main.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Canvas, Circle, Ellipse, Rect } from '../src';
import { Canvas, Circle } from '../src';

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

const canvas = await new Canvas({
canvas: $canvas,
// renderer: 'webgpu',
renderer: 'webgpu',
shaderCompilerPath:
'https://unpkg.com/@antv/[email protected]/dist/pkg/glsl_wgsl_compiler_bg.wasm',
}).initialized;
Expand All @@ -38,65 +38,6 @@ for (let i = 0; i < 1; i++) {
});
canvas.appendChild(circle);

const ellipse = new Ellipse({
// cx: Math.random() * 1000,
// cy: Math.random() * 1000,
// rx: Math.random() * 20,
// ry: Math.random() * 20,
cx: 100,
cy: 300,
rx: 50,
ry: 100,
stroke: 'black',
// strokeWidth: 20,
// strokeOpacity: 0.5,
fillOpacity: 0.5,
fill: 'red',
});
canvas.appendChild(ellipse);

const rect = new Rect({
x: 0,
y: 0,
width: 400,
height: 100,
fill: 'red',
// fillOpacity: 0.5,
// strokeWidth: 10,
// stroke: 'black',
// strokeOpacity: 0.5,
cornerRadius: 50,
batchable: false,
dropShadowColor: 'black',
dropShadowOffsetX: 10,
dropShadowOffsetY: 10,
dropShadowBlurRadius: 10,
});
canvas.appendChild(rect);

const rect2 = new Rect({
x: 50,
y: 50,
width: 400,
height: 100,
fill: 'red',
// fillOpacity: 0.5,
// strokeWidth: 10,
// stroke: 'black',
// strokeOpacity: 0.5,
// batchable: false,
cornerRadius: 50,
// dropShadowColor: 'black',
// dropShadowOffsetX: 10,
// dropShadowOffsetY: 10,
// dropShadowBlurRadius: 10,
innerShadowColor: 'blue',
innerShadowOffsetX: 10,
innerShadowOffsetY: 10,
innerShadowBlurRadius: 10,
});
canvas.appendChild(rect2);

// circle.addEventListener('pointerenter', () => {
// circle.fill = 'red';
// });
Expand All @@ -105,33 +46,6 @@ for (let i = 0; i < 1; i++) {
// });
}

// for (let i = 0; i < 100; i++) {
// const fill = `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
// Math.random() * 255,
// )},${Math.floor(Math.random() * 255)})`;
// const rect = new Rect({
// x: Math.random() * 1000,
// y: Math.random() * 1000,
// fill,
// batchable: false,
// dropShadowColor: 'black',
// dropShadowOffsetX: Math.random() * 5,
// dropShadowOffsetY: Math.random() * 5,
// dropShadowBlurRadius: Math.random() * 10,
// });
// rect.width = Math.random() * 40;
// rect.height = Math.random() * 40;
// rect.cornerRadius = Math.min(rect.width / 2, rect.height / 2);
// canvas.appendChild(rect);

// rect.addEventListener('pointerenter', () => {
// rect.fill = 'red';
// });
// rect.addEventListener('pointerleave', () => {
// rect.fill = fill;
// });
// }

const animate = () => {
canvas.render();
requestAnimationFrame(animate);
Expand Down
4 changes: 3 additions & 1 deletion packages/lesson_010/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,15 @@
},
"dependencies": {
"@antv/g-device-api": "^1.6.12",
"@lit/context": "^1.1.2",
"@loaders.gl/core": "^4.2.2",
"@loaders.gl/images": "^4.2.2",
"@pixi/math": "^7.4.2",
"bezier-easing": "^2.1.0",
"d3-color": "^3.1.0",
"eventemitter3": "^5.0.1",
"gl-matrix": "^3.4.3",
"lit": "^3.1.3",
"@lit/context": "latest",
"rbush": "^3.0.1"
},
"devDependencies": {
Expand Down
7 changes: 7 additions & 0 deletions packages/lesson_010/src/drawcalls/SDF.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,12 +79,19 @@ export class SDF extends Drawcall {
this.#inputLayout.destroy();
this.#pipeline.destroy();
}

const diagnosticDerivativeUniformityHeader =
this.device.queryVendorInfo().platformString === 'WebGPU'
? 'diagnostic(off,derivative_uniformity);'
: '';

this.#program = this.device.createProgram({
vertex: {
glsl: defines + vert,
},
fragment: {
glsl: defines + frag,
postprocess: (fs) => diagnosticDerivativeUniformityHeader + fs,
},
});

Expand Down
21 changes: 17 additions & 4 deletions packages/lesson_010/src/shapes/mixins/Renderable.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,12 @@ export interface IRenderable {
/**
* It's a presentation attribute that defines the color used to paint the element.
* @see https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill
*
* Enhanced with the following features:
* * base64 image is also supported.
* * HTMLImageElement is also supported.
*/
fill: string;
fill: string | HTMLImageElement;

/**
* It is a presentation attribute defining the color used to paint the outline of the shape.
Expand Down Expand Up @@ -141,7 +145,7 @@ export function Renderable<TBase extends GConstructor>(Base: TBase) {
boundsDirtyFlag = true;
globalRenderOrder: number;

#fill: string;
#fill: string | HTMLImageElement;
#fillRGB: d3.RGBColor;
#stroke: string;
#strokeRGB: d3.RGBColor;
Expand Down Expand Up @@ -214,10 +218,19 @@ export function Renderable<TBase extends GConstructor>(Base: TBase) {
get fill() {
return this.#fill;
}
set fill(fill: string) {
set fill(fill: string | HTMLImageElement) {
if (this.#fill !== fill) {
this.#fill = fill;
this.#fillRGB = d3.rgb(fill);

if (fill instanceof HTMLImageElement) {
if (!fill.complete) {
fill.onload = () => {
this.renderDirtyFlag = true;
};
}
} else {
this.#fillRGB = d3.rgb(fill);
}
this.renderDirtyFlag = true;
}
}
Expand Down
4 changes: 3 additions & 1 deletion packages/site/docs/guide/lesson-009.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ float sdf_rounded_box(vec2 p, vec2 b, float r) {
}
```

Referencing Figma's naming, we use `cornerRadius`, but SDF alone cannot achieve the `smoothing` effect, see [Adjust corner radius and smoothing] for details. In addition, it is also possible to support different corner radii for each corner, refer to [Zed Blade WGSL], which is a Shader written by Zed based on [blade] renderer, using WGSL syntax.
Referencing Figma's naming, we use `cornerRadius`, but SDF alone cannot achieve the `smoothing` effect, see [Adjust corner radius and smoothing] and [Desperately seeking squircles] for details. In addition, it is also possible to support different corner radii for each corner, refer to [Zed Blade WGSL], which is a Shader written by Zed based on [blade] renderer, using WGSL syntax.

```js eval code=false
$icCanvas2 = call(() => {
Expand Down Expand Up @@ -808,6 +808,7 @@ function isPointInRoundedRectangle(
Hyperellipsoid]
- [Fast Rounded Rectangle Shadows]
- [Blurred rounded rectangles]
- [Desperately seeking squircles]

[Lesson 2]: /guide/lesson-002
[2D distance functions]: https://iquilezles.org/articles/distfunctions2d/
Expand Down Expand Up @@ -839,3 +840,4 @@ function isPointInRoundedRectangle(
[tailwindcss - Drop Shadow]: https://tailwindcss.com/docs/drop-shadow
[Drop shadow of rounded rect]: https://www.shadertoy.com/view/NtVSW1
[Inner shadow of rounded rect]: https://www.shadertoy.com/view/mssGzn
[Desperately seeking squircles]: https://www.figma.com/blog/desperately-seeking-squircles/
4 changes: 3 additions & 1 deletion packages/site/docs/zh/guide/lesson-009.md
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ float sdf_rounded_box(vec2 p, vec2 b, float r) {
}
```

参考 Figma 的命名我们使用 `cornerRadius`,但仅凭 SDF 无法实现 `smoothing` 效果,详见 [Adjust corner radius and smoothing]。另外也可以支持四个角不同的圆角半径,可以参考 [Zed Blade WGSL],这是 Zed 基于 [blade] 渲染器编写的 Shader,使用 WGSL 语法。
参考 Figma 的命名我们使用 `cornerRadius`,但仅凭 SDF 无法实现 `smoothing` 效果,详见 [Adjust corner radius and smoothing][Desperately seeking squircles]。另外也可以支持四个角不同的圆角半径,可以参考 [Zed Blade WGSL],这是 Zed 基于 [blade] 渲染器编写的 Shader,使用 WGSL 语法。

```js eval code=false
$icCanvas2 = call(() => {
Expand Down Expand Up @@ -810,6 +810,7 @@ function isPointInRoundedRectangle(
Hyperellipsoid]
- [Fast Rounded Rectangle Shadows]
- [Blurred rounded rectangles]
- [Desperately seeking squircles]

[课程 2]: /zh/guide/lesson-002
[2D distance functions]: https://iquilezles.org/articles/distfunctions2d/
Expand Down Expand Up @@ -841,3 +842,4 @@ function isPointInRoundedRectangle(
[tailwindcss - Drop Shadow]: https://tailwindcss.com/docs/drop-shadow
[Drop shadow of rounded rect]: https://www.shadertoy.com/view/NtVSW1
[Inner shadow of rounded rect]: https://www.shadertoy.com/view/mssGzn
[Desperately seeking squircles]: https://www.figma.com/blog/desperately-seeking-squircles/
Loading

0 comments on commit f2dbe3f

Please sign in to comment.