A Three.js WebGL image/video displacement mapping shader engine — visualizing elevation layers, interactive sway physics, and high-bitrate WebM video capture.
Welcome to Displacement View, an interactive WebGL showcase that applies dynamic displacement shaders to any dropped image or video file. The custom GLSL elevation algorithm calculates brightness value offsets dynamically, raising mesh vertices in real-time. Features include manual parameter controls, auto-sway physics, export/record functions, and native Obsidian HSL theme variable bindings.
- Real-time Displacement: Elevates plane geometry vertices based on source luminance value layers.
- Adjustable Layers & Softness: Fine-tune the stepping bands and brightness interpolation in real-time.
- Interactive Controls: Sway speed, displacement strength, and auto-rotation sway toggling.
- Drag and Drop Support: Drop any local image or video directly onto the canvas.
- URL Video Stream: Instantly fetch and map remote MP4 streams.
- WebM/MP4 Recording: Export high-bitrate screen recording clips of your displacement animations.
- Screenshot Capture: Instantly snap high-resolution PNG copies of the WebGL canvas.
- Obsidian Integration: The
lil-guipanel dynamically styles background HSL and active accent tokens from your host Obsidian theme. - Portal View Leaf: Reparents cleanly into pane workspaces for seamless edge-to-edge layouts.
| File | Description |
|---|---|
DISPLACEMENT VIEW.md |
The main entry point leaf designed to be loaded inside Obsidian panes. |
src/index.jsx |
Main bootstrap application loader and polling invalidation daemon. |
src/App.jsx |
The view coordinator loading dependency modules. |
src/components/DisplacementComponent.jsx |
The core displacement shader, rendering loop, and MediaRecorder binding. |
src/styles/styles.jsx |
Layout variables mapped to Obsidian theme CSS properties. |
src/utils/domUtils.jsx |
DOM helper utilities for full-tab containment. |
src/utils/LoadScriptUpgrade.js |
Self-contained ESM script loader with local vault cache support. |
data/mcp_commands.json |
Local polling payload for HMR invalidation. |
METADATA.md |
Packaging manifest outlining indexing, target, and security configurations. |
CONTRIBUTION.md |
Contributor architecture standards. |
LICENSE.md |
MIT open-source license. |
- Get the Code:
- Option A: Clone directly into your Obsidian vault directory:
git clone https://github.com/beto-group/DisplacementView
- Option B: Extract the repository ZIP into your Obsidian vault.
- Option A: Clone directly into your Obsidian vault directory:
- Prerequisites: Ensure the Datacore community plugin is active in Obsidian.
- Launch: Open
DISPLACEMENT VIEW.mdinside Obsidian.
The visual and mathematical core of the dynamic displacement shader, elevation processing, and WebGL rendering in this project was ported and adapted from a creative experiment originally published on CodePen.
This project is licensed under the MIT License — see the LICENSE.md file for details.