Merge pull request #5 from web3dev1337/feature/editor-usability-work1

feat: ShaderBrew rename + 3D preview upgrade + exports

Author: web3dev1337

CLAUDE.md

@@ -1,4 +1,4 @@
-# EffectTextureMaker - Enhanced Fork
+# ShaderBrew
 
 ## First Steps
 1. Read `CODEBASE_DOCUMENTATION.md` for full architecture and file reference

CODEBASE_DOCUMENTATION.md

@@ -1,4 +1,4 @@
-# EffectTextureMaker — Codebase Documentation
+# ShaderBrew — Codebase Documentation
 
 Enhanced fork of mebiusbox's MIT-licensed WebGL procedural texture generator. Transformed from a single-effect viewer into a multi-layer texture creation tool with PBR export, 3D preview, gradient editor, undo/redo, and 160 animated sprite sheet effects (100 FXGEN + 52 custom GLSL + 8 composites).
 

FINDINGS.md

@@ -1,4 +1,4 @@
-# EffectTextureMaker Findings and Roadmap
+# ShaderBrew Findings and Roadmap
 
 Updated: 2026-02-22
 

PLAN.md

@@ -1,8 +1,8 @@
-# EffectTextureMaker - Take It To The Next Level
+# ShaderBrew - Take It To The Next Level
 
 ## Context
 
-EffectTextureMaker is an MIT-licensed WebGL shader-based procedural texture generator (by mebiusbox). We forked it and have been enhancing it. The user wants to transform it from a basic single-effect viewer into a professional multi-layer texture creation tool.
+ShaderBrew (originally EffectTextureMaker by mebiusbox, MIT) is a WebGL shader-based procedural texture generator. We forked it and have been enhancing it into a professional multi-layer texture creation tool.
 
 **Current state (work already done on branch `work1`):**
 - Created `gallery.html` - live animated gallery of all 70+ effects with IntersectionObserver for GPU efficiency

README.md

@@ -1,8 +1,8 @@
-# ShaderSmith
+# ShaderBrew
 
 Professional WebGL procedural texture generator. Multi-layer compositing, PBR map generation, 3D material preview, 52 custom GLSL shaders, and 65+ procedural effects — all running in your browser with zero dependencies.
 
-**[Live Demo](https://web3dev1337.github.io/shadersmith/showcase.html)** | **[Open Editor](https://web3dev1337.github.io/shadersmith/editor.html)**
+**[Live Demo](https://web3dev1337.github.io/shaderbrew/showcase.html)** | **[Open Editor](https://web3dev1337.github.io/shaderbrew/editor.html)**
 
 ---
 
@@ -29,12 +29,12 @@ Professional WebGL procedural texture generator. Multi-layer compositing, PBR ma
 
 | Page | Description |
 |------|-------------|
-| **[Showcase](https://web3dev1337.github.io/shadersmith/showcase.html)** | Guided tour — live renders, 3D preview, PBR maps, 7 chapters |
-| **[Editor](https://web3dev1337.github.io/shadersmith/editor.html)** | Full texture editor — layers, gradients, PBR export, undo/redo |
-| **[Gallery](https://web3dev1337.github.io/shadersmith/gallery.html)** | Live animated gallery of 70+ procedural effects |
-| **[Material Forge](https://web3dev1337.github.io/shadersmith/demos.html)** | 3D material demo — textures on lit spinning objects with bloom |
-| **[Sprite Gallery](https://web3dev1337.github.io/shadersmith/sprite-gallery.html)** | 119 animated sprite sheets (FXGEN + custom GLSL) |
-| **[Particles](https://web3dev1337.github.io/shadersmith/particles.html)** | 3D particle viewport with sprite-sheet effects |
+| **[Showcase](https://web3dev1337.github.io/shaderbrew/showcase.html)** | Guided tour — live renders, 3D preview, PBR maps, 7 chapters |
+| **[Editor](https://web3dev1337.github.io/shaderbrew/editor.html)** | Full texture editor — layers, gradients, PBR export, undo/redo |
+| **[Gallery](https://web3dev1337.github.io/shaderbrew/gallery.html)** | Live animated gallery of 70+ procedural effects |
+| **[Material Forge](https://web3dev1337.github.io/shaderbrew/demos.html)** | 3D material demo — textures on lit spinning objects with bloom |
+| **[Sprite Gallery](https://web3dev1337.github.io/shaderbrew/sprite-gallery.html)** | 119 animated sprite sheets (FXGEN + custom GLSL) |
+| **[Particles](https://web3dev1337.github.io/shaderbrew/particles.html)** | 3D particle viewport with sprite-sheet effects |
 
 ---
 
@@ -93,8 +93,8 @@ shader-defs.js         52 custom GLSL shader sources
 ## Running Locally
 
 ```bash
-git clone https://github.com/web3dev1337/shadersmith.git
-cd shadersmith
+git clone https://github.com/web3dev1337/shaderbrew.git
+cd shaderbrew
 python3 -m http.server 4444
 # Open http://localhost:4444/editor.html
 ```
@@ -103,7 +103,7 @@ python3 -m http.server 4444
 
 Built on [EffectTextureMaker](https://github.com/mebiusbox/EffectTextureMaker) by [mebiusbox](https://github.com/mebiusbox) (MIT License). The original tool provides the core procedural shader library (pixy) and single-layer editor.
 
-ShaderSmith adds multi-layer compositing, gradient mapping, PBR generation, 3D preview, 52 custom GLSL shaders, sprite sheet generation, the showcase, material forge, and the enhanced editor UI.
+ShaderBrew adds multi-layer compositing, gradient mapping, PBR generation, 3D preview, 52 custom GLSL shaders, sprite sheet generation, the showcase, material forge, and the enhanced editor UI.
 
 ## License
 

ai-memory/feature/editor-usability-work1-681197f/progress.md

@@ -19,3 +19,11 @@
 - [x] Fix z-index: sidebar/toolbar 9990, popups 9998, dock 9999, picker 10000
 - [x] Constrain all popup panels between sidebars (left:260px, right:300px)
 - [x] Fix custom GLSL panel overflowing onto sidebars
+- [x] Upgrade 3D preview to showcase Chapter 7 quality (PMREMGenerator, 5 lights, shadows, emissive)
+- [x] Reorder showcase sections (hero → 3D Material Forge → Dark Ritual Build → custom GLSL → chapters)
+- [x] Export gen-smite.html as MP4 + GIF (Puppeteer + Xvfb + ffmpeg)
+- [x] Export Dark Ritual Portal sprite sheet as MP4 + GIF + WebM with alpha
+- [x] Set up GitHub Pages deployment
+- [x] Add attribution to original EffectTextureMaker repo (top-nav + showcase)
+- [x] Add GitHub link + comprehensive README with animated GIFs
+- [x] Rename project to ShaderBrew (repo, UI, README, titles, all references)

editor.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>EffectTextureMaker</title>
+		<title>ShaderBrew</title>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
 		<style>
@@ -55,7 +55,7 @@
 	</head>
 	<body>
 		<div id="info">
-			EffectTextureMaker - Powered by <a href="http://threejs.org" target="_blank">three.js (r174)</a>
+			ShaderBrew - Powered by <a href="http://threejs.org" target="_blank">three.js (r174)</a>
 		</div>
 		<div id="time"></div>
 		<script type="importmap">

gallery.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-<title>Effect Texture Maker - Live Gallery</title>
+<title>ShaderBrew - Live Gallery</title>
 <meta charset="utf-8"/>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
 <style>

showcase.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>EffectTextureMaker — Feature Showcase</title>
+<title>ShaderBrew — Feature Showcase</title>
 <style>
 *{margin:0;padding:0;box-sizing:border-box}
 body{background:radial-gradient(1200px 600px at 50% -200px,#16162a 0%,#07070c 55%,#030306 100%);color:#ccc;font-family:'Segoe UI',system-ui,sans-serif;line-height:1.6}

src/app.js

@@ -1,5 +1,5 @@
 /**
- * Main EffectTextureMaker application.
+ * Main ShaderBrew application.
  * Coordinates rendering, GUI, presets, and export.
  */
 import * as THREE from "three";
@@ -427,7 +427,7 @@ class App {
 		const blob = new Blob([json], { type: "text/plain" });
 		const a = document.createElement("a");
 		a.href = URL.createObjectURL(blob);
-		a.download = "EffectTextureMaker_Project.json";
+		a.download = "ShaderBrew_Project.json";
 		a.click();
 	}
 
@@ -456,7 +456,7 @@ class App {
 		const blob = new Blob([json], { type: "text/plain" });
 		const a = document.createElement("a");
 		a.href = URL.createObjectURL(blob);
-		a.download = "EffectTextureMaker_Untitled.json";
+		a.download = "ShaderBrew_Untitled.json";
 		a.click();
 	}