BestHub
search
Sign in
Tag

Distance Field

1 views collected around this technical thread.

ByteFE
ByteFE
Jun 1, 2022 · Frontend Development

Understanding and Implementing Distance Fields in WebGL (Part 2)

This article explains the concept of distance fields, shows how to compute distance fields for rectangles, lines, and line segments in GLSL, and demonstrates sampling techniques and curve rendering using WebGL shaders with complete code examples.

Distance FieldGLSLGraphics
0 likes · 9 min read
Understanding and Implementing Distance Fields in WebGL (Part 2)
Tencent Cloud Developer
Tencent Cloud Developer
Jun 2, 2021 · Game Development

Shader-Based Image Deformation Effects: Implementation and Principles

The article explains how to implement three common beauty‑camera image deformation effects—twirl, inflate, and pinch—using GLSL shaders, detailing the underlying deformation functions, sampling distance‑field transformations, and smoothstep‑based strength controls, and provides full shader code, animated examples, and resource links.

Distance FieldGLSLPost-processing
0 likes · 9 min read
Shader-Based Image Deformation Effects: Implementation and Principles