Research

GLSL Vertex Displacement

Programming, GLSL, TouchDesigner, Art, GitHub

Example of Sphere Vertex Displacement Using GLSL

The Challenge

The challenge was to learn how to create programmatic visuals that could scale for large-format installations like video walls. I wanted to leverage my existing programming experience in Python, C++, and JavaScript to master a more graphically-focused language. This research was directly informed by my professional interest in large-scale AV systems, supported by my AVIXA Certified Technology Specialist (CTS) certification (2019-2022).

TouchDesigner Network Using an Image of Water to Displace the Vertices of a Sphere

My Solution & Approach

Using online resources like The Book of Shaders, Shadertoy, and community forums, I taught myself GLSL fundamentals. I then applied this knowledge to TouchDesigner, using the GLSL MAT node and creating a Fragment and Vertex shader. The vertex shader was programmed to displace the vertices of a 3D sphere along their normals, while the fragment shader used the same texture as a normal map to create intricate, dynamic lighting across the deformed surface.

Displacement based on Image of Copenhagen

Displacement based on Image of Leaves

Technical Highlights & Learnings

Vertex Shader: A GLSL shader that procedurally deforms 3D geometry based on the values of an input texture.
Fragment Shader (Normal Mapping): A technique implemented in the fragment shader to simulate intricate surface detail that realistically interacts with scene lighting.
Efficient Shader Design: A dynamic GLSL material that uses a single 2D texture for two distinct purposes: large-scale geometric deformation and micro-surface lighting detail.

Displacement based on Image of Sand

Displacement based on Image of Shuttle Launch

Project Files

GitHub Repository: The complete TouchDesigner project file and GLSL code are available on GitHub.

Tools & Technologies Used

Software: TouchDesigner
Programming: GLSL (OpenGL Shading Language)