Thank you so much for this tutorial series!

[mehmetron]

I've been learning computer graphics and webgl/webgpu for a few weeks now and this series has been wonderful!

I really look forward to your upcoming lessons on bezier curve rendering! I've been trying to implement line rendering in webgpu. Right now I'm trying to understand and copy this repo https://github.com/rreusser/regl-gpu-lines

That repo also has some amazing links at the bottom of the README about line rendering. Do you guys plan on adding a lesson about line rendering as well? I'm assuming it'd be related to bezier curve rendering unless you plan to do that in the fragment shader.

In regards to text rendering. There is this repo with very nice understandable code https://github.com/astiopin/webgl_fonts
However, it uses sdf and not msdf so for some typefaces, it can have artifacts.

Again, thank you so much! This is an awesome project! I'll try to find a way to contribute once I get a hand of this computer graphics stuff

[xiaoiver]

Thank you for your encouragement!
The next part of our tutorial will cover the drawing of lines and text.
I will read the code from https://github.com/rreusser/regl-gpu-lines.

In my previous implementation(a small rendering engine), I use the method from:
https://www.khronos.org/assets/uploads/developers/presentations/Crazy_Panda_How_to_draw_lines_in_WebGL.pdf
They also calculate vertex coords in vertex shader.

Here's the demo and you can switch to WebGL renderer with GUI.
https://g.antv.antgroup.com/en/examples/shape/polyline/#polyline

[xiaoiver]

I used SDF generated at runtime to draw the text before, but it does have artifacts as you said.

Maybe later I'll try some pre-generated methods like：

• https://github.com/soimy/msdf-bmfont-xml
• https://medium.com/@evanwallace/easy-scalable-text-rendering-on-the-gpu-c3f4d782c5ac

[xiaoiver]

I hope this article helps. @mehmetron
https://infinitecanvas.cc/guide/lesson-012