Skip to content

README.md

Latest commit

 

History

History
55 lines (42 loc) · 2.7 KB

README.md

File metadata and controls

55 lines (42 loc) · 2.7 KB
Raw

Shader Shop — live demos of the talk

Companion site of the talk « Shaders : pour des effets hallucinants, même sur le web » by Simon Bédard, given at BDX I/O 2024 and Devoxx (talk in French, site in English). Every shader from the slides runs live in the browser, with its GLSL code next to it.

Pages

Page Shows
index.html — Explanations The lesson step by step: colour, time, textures, perspective, mouse. ?lang=FR or ?lang=ENG picks the language of the explanations.
galleryExtern.html — Extern Shaders by other authors, credited.
galleryAI.html — AI Shaders written by AI models (GPT, Claude, Gemini, Mistral, Grok, DeepSeek).
galleryStyle.html — Style One shader per visual style: cyberpunk, retro pixel, organic…
galleryToApply.html — Applied Shaders applied to images.
explicationSounds.html — Sounds A shader driven by your microphone.

Run it locally

No build, no dependencies (three.js and the fonts come from CDNs). From the repository root:

python3 -m http.server 8000

then open http://localhost:8000/. It must be served over HTTP: the header and footer (parts/*.html) are loaded with fetch(), which fails from file://.

Add a shader

Each shader is one file exporting a THREE.ShaderMaterial, in the folder of the page that shows it. A page shows only what its folder's list imports:

Page Folder (js/…) List
AI aiMadeShaderMaterials/ ZShadersList.js
Extern externShaderMaterials/ ZShadersList.js
Style styleShaderMaterials/ ZShaderList.js
Applied toApplyShaderMaterials/ ZtoApplyShaderList.js
Explanations explanationsShaderMaterials/ explanationList.js
Sounds explanationsSoundsShadersMaterials/ soundsExplanationList.js
  1. Copy a file of the same folder as a starting point — the entry shape differs by folder (AI and Extern files export { name, author, material }; Style and Applied files export a bare material that the list wraps with its name and author).
  2. Import it in the folder's list and add it to the exported array.
  3. Serve the site and open the page: the new card is there, and the console is clean.

The runtime sets uniforms by name only: time (seconds) everywhere, iTime and iResolution in the galleries, mousePosition on Explanations, amplitude, dominantFrequency and bandAmplitudes on Sounds. Any other uniform keeps its initial value.