Skip to main content

Introduction

Loading...
Vanilla
Loading...
Pencil

note

When hovering your mouse on the canvas you can:

  • Pan: Left-click and drag the mouse.
  • Zoom: Scroll or drag the mouse wheel.

This tutorial series will teach you how to use the modern GPU graphics pipeline to render brush strokes, commonly seen with a paint tool in graphics design software like Photoshop. The contents mainly come from my research work Ciallo: The next generation vector paint program, and the second chapter of the textbook "Image and Video-Based Artistic Stylisation" edited by Paul Rosin, John Collomosse. The chapter introduces classical stroke rendering methods, authored by Stephen DiVerdi. Since there will be more research work on GPU brush stroke rendering, I will continuously update this tutorial series to teach you related techniques in (potentially) influential research works.

Prerequisites​

Decent experience in one of the GPU graphics APIs like OpenGL and D3D is required. If you were relatively new to computer graphics, you should at least have rendered your first 3D scene and practiced instanced rendering.

GPU APIs have built-in line rendering functionalities. It's totally fine if you never heard about LINES, LINE_STRIP, and LINE_LOOP GPU primitives. We won't use these functionalities in this tutorial series. If you're interested in learning about their drawbacks, you can check out mattdesl's article titled Drawing Lines is Hard. Reading it isn't a prerequisite, I still recommend it.

Though I create all the demos in the web environment, you don't have to know about WebGL or WebGPU. We will concentrate on high-level techniques rather than the implementation details. No matter which GPU API you are familiar with, utilizing them to render a stroke will be easy after this series.

Structure​

Content​

The Basic section covers the basics of the rendering and stylization methods. Articles in the Basic part are organized in a progressive fashion. Don't jump right into one of them, or you may miss something important. After learning the Basic section, you can freely select your favorite topics. I will list extra prerequisites at the very beginning of each article.

Live coding​

You will find live code editors similar to the one displayed below, inspired by The Book of Shader. The rendering result is updated in real-time after modifying the code. Give it a try by altering the values of maxRadius, and watch how the canvas below changes.

Loading...
note

If there are bugs for common usages in the code editors or canvases, tell me at the issue page.

Only geometry generation code "geometry.js" is demonstrated here. You will find "vertex.glsl" and "fragment.glsl" for vertex and fragment shader code. Whether they are hidden or shown will depend on the context.

Supplementary contents​

Details

Dropdown tab Some contents are hidden inside a dropdown tab like this. They are complementary to the main contents. Feel free to skip them.

Citation​

@inproceedings{Ciallo2023,
    author = {Ciao, Shen and Wei, Li-Yi},
    title = {Ciallo: The next-Generation Vector Paint Program},
    year = {2023},
    isbn = {9798400701436},
    publisher = {Association for Computing Machinery},
    address = {New York, NY, USA},
    url = {https://doi.org/10.1145/3587421.3595418},
    doi = {10.1145/3587421.3595418},
    booktitle = {ACM SIGGRAPH 2023 Talks},
    articleno = {67},
    numpages = {2},
    keywords = {Digital painting, stylized stroke, arrangement, vector graphics. coloring, graphics processing unit (GPU)},
    location = {Los Angeles, CA, USA},
    series = {SIGGRAPH '23}
}
Research Tip

To demonstrate your research work about brush rendering, select vector drawings have variable radius or pen pressure data. Regular vector graphics datasets don't contain them.