Slides | Yu-Chao (Curtis) Wang's Personal Website

Real-time Painterly Rendering

Thu, 30 Apr 2026 00:00:00 +0000

CS535 Final Project:

NPR Rendering w/ Kuwahara Filters

CS535 Presentation

Presented by: Yu-Chao (Curtis) Wang

1. Project Motivation

Beyond Photorealistic Images: Move from PBR rendering to NPR by utilizing a filter.
Silhouette Integrity: Prevent the “smearing” effect common in NPR by preserving crisp object contours via geometry data.
Address Filter Drawbacks: Reduce block artifacts and temporal flickering.
Advanced Methods: Investigate Anisotropic Kuwahara in a 3D context.
Stability & Coherence: Achieve temporal stability for interactive applications.

2. Literature Review: Standard Kuwahara Filters

Definition A non-linear smoothing filter for adaptive noise reduction in digital image processing.

Key Advantage Smooths images while explicitly preserving sharp edges, overcoming linear filter limitations.

Origins (1976) “Processing of RI-angiocardiographic images” Developed by Dr. Michiyoshi Kuwahara for medical imaging of dynamic heart muscles.

2. Literature Review: Standard Kuwahara (Cont.)

Core Mechanism

Window Selection: Employs a sliding square window around a target pixel.
Subregion Division: Divides into four smaller, slightly overlapping subregions.
Statistical Analysis: Computes arithmetic mean and standard deviation for each.
Homogeneity Check: Identifies the subregion with the lowest standard deviation.
Pixel Assignment: Assigns the central pixel the mean value of that subregion.
Edge Preservation: Prevents blending across boundaries.

2. Literature Review: Standard Kuwahara (Cont.)

Special Handling for Color Images

Cannot be applied to RGB separately (causes severe color artifacts).
Requires conversion to HSV color space.
Evaluates standard deviation exclusively on the “Value” (brightness) channel.

Drawbacks & Limitations

Susceptible to noise ambiguities.
Prone to generating unnatural block artifacts in highly textured areas due to its rigid rectangular subdivision.

3. Literature Review: Anisotropic Kuwahara

Limitations of Standard Filter Unstable in the presence of noise and suffers from prominent block artifacts.

Anisotropic Approach Adapts shape, scale, and orientation to local input structure via smoothed structure tensors.

Visual Effect Creates a feature-preserving, painting-like flattening while avoiding clustering artifacts.

Reference: J. E. Kyprianidis et al., 2009

4. Literature Review: Adaptive Kuwahara

Dynamic Window Adjustment Adjusts window size based on local image properties, expanding as long as variance decreases.

Performance Benefits Preserves edges and reduces pixelation better than standard filters while maintaining high efficiency.

Reference: K. Bartyzel, “Adaptative Kuwahara filter,” 2015

5. Initial Prototype: OpenGL Implementation

Standalone C++17 Framework Before transitioning to Unity, we developed a high-performance prototype to validate the core filters.

Technical Stack

Graphics API: OpenGL 4.6 (Core Profile)
Window & Input: GLFW 3 + GLAD
UI Framework: Dear ImGui (Docking Branch)
Math & Utilities: GLM, stb_image
Language: C++17 (Visual Studio 2022 / v143)

Key Features

Compute-Focused: Primary implementation uses GLSL Compute Shaders for parallel variance analysis.
Modular Design: Custom Core::Application / Scene architecture for rapid filter prototyping.
Real-time Tuning: ImGui-driven parameter adjustment and shader hot-reloading.

6. The Paradigm Shift: From Image-Space to Geometry-Aware

Why leave the OpenGL prototype?

The “Painterly Smear” Problem: Traditional image-space filters often “melt” object silhouettes, leading to a loss of visual clarity in 3D scenes.
Infrastructure Overhead: Building a complete 3D environment (PBR, Lighting, Asset Loading) in pure OpenGL is a major distraction from core NPR research.
The Unity Advantage:
- Native G-Buffer: Instant access to Depth, Normals, and Object IDs to anchor strokes to geometry.
- Silhouette Preservation: Object IDs allow us to prevent color bleeding and keep contours crisp.
- API Control: URP’s Render Graph enables precise multi-pass post-processing scheduling.

7. Final Implementation: Unity 6 & Render Graph

Modern Engine Integration Transitioned to Unity 6 to leverage advanced G-Buffer access and the Render Graph API for optimal GPU scheduling and resource management.

Technical Stack

Engine: Unity 6 (6000.3.x)
Pipeline: Universal Render Pipeline (URP 17.0.x)
Framework: Render Graph API (Pass Recording)
Shaders: HLSL / Compute Shaders (SM 5.0+)

Advanced Multi-Pass Architecture

Semantic Masking (ObjectID): Custom pass for object-boundary awareness.
Normal Pre-filter: Smooths geometric data to reduce high-frequency noise.
Hybrid Temporal Tensor: Stabilizes orientation via Motion Vectors and History Buffers.
Bilateral Anisotropic Kuwahara: The final painterly filter guided by depth and IDs.

8. Pipeline Overview

graph LR A[Color Buffer] --> E(Structure Tensor) B[Depth Buffer] --> E C[Normal Buffer] --> E D[Motion Vectors] --> I(Temporal Anti-Aliasing) E --> F{Anisotropy Matrix} F -->|Guided by Normals and Depth| G[Sector Evaluation] G --> H[Final Anisotropic Filtering] H --> I I --> J[Output Painterly Image] style A fill:#f4f4f4,stroke:#333,color:#333 style B fill:#f4f4f4,stroke:#333,color:#333 style C fill:#f4f4f4,stroke:#333,color:#333 style D fill:#f4f4f4,stroke:#333,color:#333 style J fill:#CFB991,stroke:#000,color:#000

9. Core Enhancements

Geometry-Guided & Temporal Coherence

Depth & Normal Guidance

Radius dynamically scales based on linear eye depth.
Brush strokes naturally follow 3D curvature.

Masking & Temporal History

Object ID Masking prevents color bleeding across characters.
TAA-like history accumulation solves temporal flickering.

10. Structure Tensor Calculation

The “Brain” of Anisotropic Kuwahara

Gradient Extraction: Uses Sobel kernels to find color gradients $I_x$ and $I_y$.
Tensor Construction: Forms a symmetric matrix at each pixel: $S = \begin{pmatrix} E & F \\ F & G \end{pmatrix} = \begin{pmatrix} \langle I_x^2 \rangle & \langle I_x I_y \rangle \\ \langle I_y I_x \rangle & \langle I_y^2 \rangle \end{pmatrix}$ $\langle \cdot \rangle$ denotes local Gaussian smoothing.
Eigen-Analysis:
- Eigenvalues ($\lambda_1, \lambda_2$): Define the local contrast.
- Eigenvector ($\vec{t}$): Provides the principal tangent orientation.
- Anisotropy ($A$): $\frac{\lambda_1 - \lambda_2}{\lambda_1 + \lambda_2}$ determines the “stretch”.

graph TD In[Input Color] --> Sob[Sobel Kernels] Sob --> Grad[I_x, I_y] Grad --> Prod[Product E,F,G] Prod --> Blur[Gaussian Blur] Blur --> Eigen[Eigen-analysis] Eigen --> Res["Orientation and Anisotropy"] style In fill:#f4f4f4 style Res fill:#CFB991

11. Parameter Tuning & Significance

Parameter	Function	Artistic Impact
Radius	Window size	Controls the “scale” of abstraction. Larger = more painterly/broad.
Sharpness	Variance exponent	Higher values make edges crisper; Lower values make transitions softer.
Tuning	Anisotropy multiplier	Stretches the brush strokes along the edge. High = elongated strokes.
Temporal Blend	History weighting	Higher values stabilize the “boiling” effect in motion (TAA-like).

Pro Tip: In our implementation, Tuning dynamically scales the sampling matrix, allowing the filter to “hug” the geometry edges without bleeding.

12. Full Demo Showcase

(Switch to Unity Editor for live demonstration)

13. Conclusion & Next Steps

Development Milestones

Core Kuwahara algorithm logic implemented.
Integrated real-time structure tensor calculation.
Explored Geometry-Guided sub-region selection.
Mitigated artifacts using Temporal Coherence.

Future Work

Optimization pass for high-resolution 4K frame processing.
Real-time brush texture synthesis (impasto normals).

Q & A

HugoBlox Slides Showcase

Fri, 03 Apr 2026 00:00:00 +0000

HugoBlox Slides Showcase

A Comprehensive Reference for All Slide Features

Yu-Chao Wang · Your Organization

Agenda

1. Basic Structure

2. Code & Math

3. Layouts & Branding

4. Interactive Features

5. Advanced Topics

Basic Slide Structure

Slides are separated by --- (horizontal rule):

# First Slide
Content here
---
## Second Slide
More content
---
## Third Slide
And so on...

Each slide supports:

Headers (#, ##, ###)
Paragraphs and lists
Images and media
Code blocks

Code Syntax Highlighting

Supports 50+ programming languages:

def calculate_accuracy(y_true, y_pred):
 correct = sum(1 for t, p in zip(y_true, y_pred) if t == p)
 return correct / len(y_true) * 100

accuracy = calculate_accuracy([1, 0, 1], [1, 1, 1])
print(f"Accuracy: {accuracy:.1f}%")

interface User {
 name: string;
 role: "admin" | "editor" | "viewer";
}

function greet(user: User): string {
 return `Hello, ${user.name}!`;
}

Mathematical Equations

Full LaTeX support for inline and block math:

Inline math: Einstein’s famous equation is $E = mc^2$.

Block math:

$$\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}$$

Maxwell’s equations:

$$\oint_{\partial \Sigma} \vec{E} \cdot d\vec{l} = -\frac{d}{dt} \iint_{\Sigma} \vec{B} \cdot d\vec{A}$$

Speaker Notes

Add private notes only visible in presenter view:

## My Slide
Visible content here

Note:
- This is a speaker note (press S to view)
- Only you see these in presenter mode
- Perfect for talking points and reminders

Press S during your presentation to open the presenter console.

Hiding Slides

Keep backup slides in your source without showing them:

## Visible Slide
This slide will appear in the presentation.
---
<!-- hide -->
## Hidden Slide
This won't appear but stays in source for reference.
---
## Another Visible Slide
Back to normal presentation flow.

Use cases:

Backup content for Q&A
Speaker reference material
Alternative explanations
Work-in-progress content

Title Slide (No Branding)

This slide has no branding elements.

Add  at the start of a slide to hide logo, title, author, and footer.

Other options:

 — hides logo + title
 — hides author + footer

Branding Configuration

Add your logo, title, author, and footer to every slide:

slides:
 branding:
 logo:
 filename: "logo.png"
 position: "top-right"
 width: "60px"
 title:
 show: true
 position: "bottom-left"
 author:
 show: true
 position: "bottom-right"
 footer:
 text: "© 2026 · Your Name"
 position: "bottom-center"

Tip: Use SVG logos with fill="currentColor" for automatic theme adaptation.

Dual Column Layouts

Equal Columns (50/50)

Before

Slow: 2.5s
Memory: 4GB
Cost: $100/mo

After

Fast: 0.3s ✅
Memory: 512MB ✅
Cost: $15/mo ✅

Dual Column: Code + Explanation

class Transformer:
 def __init__(self):
 self.layers = []
 self.attention = MultiHeadAttention()
 self.ffn = FeedForward()

 def forward(self, x):
 for layer in self.layers:
 x = layer(x)
 return x

Key Points

Multi-head attention
Feed forward network
Residual connections
Layer normalization

Create hierarchical slides with sub-slides:

## Main Topic
Overview content here
Press ↓ for details
---
{{< slide id="detail-1" >}}
### Detail Level 1
More information
---
{{< slide id="detail-2" >}}
### Detail Level 2
Even more detail
Press → to continue

Perfect for optional deep-dives that viewers can skip or explore.

Themes

Choose from 15+ built-in themes:

Dark Themes:

black (default) — Clean dark background
night — Dark blue/purple
blood — Dark red accent
league — Gray with orange

Light Themes:

white — Clean white background
simple — Minimal white
beige — Warm beige
sky — Light blue gradient

Special:

solarized — Solarized color scheme
moon — Purple/blue gradient
serif — Serif font styling

Custom Backgrounds

Add color, image, or video backgrounds to individual slides:

{{< slide background-color="#1e3a8a" >}}
## Blue Background
This slide has a custom blue background!
---
{{< slide background-image="background.jpg" >}}
## Image Background
Content over image
---
{{< slide background-video="video.mp4" >}}
## Video Background
Dynamic background!

Fragment Animations

Reveal content progressively:

First point appears. Then this point appears. Finally, this point appears. This point is highlighted in red!

Media Embedding

YouTube

{{< youtube dQw4w9WgXcQ >}}

Bilibili

{{< bilibili id="BV1dyXqBaEE5" >}}

Local Video

{{< video src="demo.mp4" controls="yes" >}}

Audio

{{< audio src="interview.mp3" >}}

Mermaid Diagrams

Create flowcharts, sequence diagrams, and more:

slides:
 diagram: true

graph LR A[Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D

Tables for Data

Present research results and benchmarks:

Model	Accuracy	Latency	Memory
GPT-3	87.3%	450ms	4GB
GPT-4	92.1%	890ms	8GB
Ours	95.8%	320ms	2GB

Citations & Blockquotes

“The best way to predict the future is to invent it.” — Alan Kay

Recent research by Chen et al. (2024) demonstrates significant improvements.¹

Custom Slide Attributes

Use the slide shortcode for advanced customization:

{{< slide id="custom" class="my-class" data-background-color="#ff0000" >}}
## Custom Slide
This slide has:
- Custom ID for linking
- Custom CSS class
- Red background

Keyboard Shortcuts

Key	Action
`→` `←`	Navigate slides (horizontal)
`↓` `↑`	Navigate substeps (vertical)
`Space`	Next slide
`S`	Open speaker notes
`F`	Fullscreen mode
`ESC`	Exit fullscreen / Overview mode
`O`	Overview mode (see all slides)
`/`	Search slides
`?`	Show keyboard help

Presenter View

Press S to open a separate presenter window showing:

Current slide
Next slide preview
Speaker notes
Elapsed time
Slide progress

Tip: Open presenter view on your laptop while mirroring the main presentation to the projector!

Linking Slides to Events

Associate slide decks with conference talks:

Create slides: content/slides/neurips-2024/index.md
Create event: content/events/neurips-talk/index.md
Link them: Add slides: "neurips-2024" to the event front matter

Slides automatically embed on the event page with fullscreen toggle.

PDF Export

Export slides to PDF:

Open slides in browser
Add ?print-pdf to URL
Print to PDF (Ctrl+P / Cmd+P)
Save as PDF file

Tip: Use Chrome or Chromium for best results.

Hidden Slide: Backup Content

This slide is hidden from the presentation but remains in the source.

Use cases:

Backup slides for Q&A
Detailed technical explanations
Alternative versions for different audiences
Work-in-progress content

Thank You!

Questions?

Resources:

Appendix: Full Configuration

slides:
 theme: black
 highlight_style: dracula
 diagram: true
 branding:
 logo:
 filename: "logo.png"
 position: "top-right"
 width: "60px"
 title:
 show: true
 position: "bottom-left"
 author:
 show: true
 position: "bottom-right"
 footer:
 text: "© 2026 · Your Name"
 position: "bottom-center"
 reveal_options:
 controls: true
 progress: true
 slideNumber: true
 hash: true
 history: true
 keyboard: true
 overview: true
 center: true
 touch: true
 loop: false
 fragments: true
 help: true
 transition: "slide"
 menu_enabled: true

Chen, S. et al. (2024). Advances in AI. Nature. ↩︎

Slides | Yu-Chao (Curtis) Wang's Personal Website

Real-time Painterly Rendering

CS535 Final Project:

NPR Rendering w/ Kuwahara Filters

CS535 Presentation

1. Project Motivation

2. Literature Review: Standard Kuwahara Filters

2. Literature Review: Standard Kuwahara (Cont.)

2. Literature Review: Standard Kuwahara (Cont.)

3. Literature Review: Anisotropic Kuwahara

4. Literature Review: Adaptive Kuwahara

5. Initial Prototype: OpenGL Implementation

6. The Paradigm Shift: From Image-Space to Geometry-Aware

7. Final Implementation: Unity 6 & Render Graph

8. Pipeline Overview

9. Core Enhancements

Geometry-Guided & Temporal Coherence

10. Structure Tensor Calculation

11. Parameter Tuning & Significance

12. Full Demo Showcase

13. Conclusion & Next Steps

Q & A

HugoBlox Slides Showcase

HugoBlox Slides Showcase

A Comprehensive Reference for All Slide Features

Agenda

1. Basic Structure

2. Code & Math

3. Layouts & Branding

4. Interactive Features

5. Advanced Topics

Basic Slide Structure

Code Syntax Highlighting

Mathematical Equations

Speaker Notes

Hiding Slides

Title Slide (No Branding)

Branding Configuration

Dual Column Layouts

Equal Columns (50/50)

Before

After

Dual Column: Code + Explanation

Key Points

Vertical Slide Navigation

Themes

Custom Backgrounds

Fragment Animations

Media Embedding

YouTube

Bilibili

Local Video

Audio

Mermaid Diagrams

Tables for Data

Citations & Blockquotes

Custom Slide Attributes

Keyboard Shortcuts

Presenter View

Linking Slides to Events

PDF Export

Hidden Slide: Backup Content

Thank You!

Questions?

Appendix: Full Configuration