diff --git a/CODEBASE_DOCUMENTATION.md b/CODEBASE_DOCUMENTATION.md
index e569a32..276a971 100644
--- a/CODEBASE_DOCUMENTATION.md
+++ b/CODEBASE_DOCUMENTATION.md
@@ -8,6 +8,9 @@ WebGL procedural texture generator built on mebiusbox's MIT-licensed pixy.js sha
ENTRY POINTS:
editor.html Main editor (loads src/app.js)
index.html Redirect to showcase.html
+ pinkthositive-dashboard.html One-page prompt-led dashboard for Pinkthositive hero constructs plus usable material studies
+ pinkthositive-preview.html One-page live preview for Moon Surface Hero and Squid Tentacles Hero custom GLSL renders
+ pinkthositive-materials.html One-page 3D material study for seam-safe moon sphere variations and tentacle mesh skin
gallery.html Live animated gallery of 70+ effects
showcase.html Feature showcase (pipeline + custom GLSL previews)
demos.html Interactive material demos
@@ -20,6 +23,7 @@ ENTRY POINTS:
PROJECT TRACKING:
FINDINGS.md Findings checklist and usability roadmap
+ PINKTHOSITIVE_SHADER_WORKFLOW.md Pinkthositive-specific guide for hero shaders, materials, baking, prompts, and engine usage
CORE MODULES (src/):
app.js Main coordinator — init, animate, render
@@ -68,11 +72,16 @@ PRESET & LOADER:
LIBRARY (DO NOT MODIFY):
pixy.module.min.js 439KB MIT-licensed shader library by mebiusbox — 70+ effects, noise functions, Composer
+ shader-defs.js Shared full-screen custom GLSL hero shader library
+ pinkthositive-dashboard-app.js Runtime bootstrap for the Pinkthositive shader dashboard
+ pinkthositive-dashboard-shaders.js New Pinkthositive shader catalog with prompt metadata and fragment shaders
+ pinkthositive-usable-materials.js Geometry-bound Pinkthositive material catalog for the dashboard's usable pack
+ pinkthositive-material-shaders.js Dedicated 3D material shaders for moon sphere and tentacle mesh studies
DATA:
presets/ 38 JSON preset files (13 custom + 25 built-in)
presets/manifest.json Manifest for the preset browser (labels, categories, file paths)
- presets/projects/ Example multi-layer project JSONs
+ presets/projects/ 11 multi-layer project JSON presets (4 examples + 7 Pinkthositive additions)
sprites/ 160 pre-rendered sprite sheet PNGs (6×6 grid, 192px frames)
game-sprites/ Split-frame outputs for game engine imports
images/grunge.png Texture used by shader effects
@@ -205,7 +214,7 @@ Exportable individually or as ZIP bundle.
| 6 | DONE | Undo/redo (JSON snapshots, Ctrl+Z/Y) |
| 7 | DONE | Enhanced export (PNG/JPEG/ZIP, resolution selector) |
| 8 | FUTURE | Node graph editor |
-| — | DONE | 38 gallery presets, 13 custom presets |
+| — | DONE | 38 single-effect presets + 11 project presets (including 7 Pinkthositive additions), 13 custom presets |
| — | DONE | 100 procedural sprite sheets (pixy effects) |
| — | DONE | 19 custom GLSL shaders (raymarched, fractals, physics) |
| — | DONE | Sprite sheet gallery with category filters |
@@ -230,7 +239,7 @@ xvfb-run --auto-servernum --server-args="-screen 0 1280x1024x24" node save-custo
| pixy.module.min.js | 1 | 439KB |
| src/ modules | 22 | ~3,800 lines |
| sprites/ | 118 | ~133MB |
-| presets/ | 38 | ~200KB |
+| presets/ | 50 | ~232KB |
| gen-custom.html (GLSL) | 1 | ~1,350 lines |
## Dependencies
diff --git a/PINKTHOSITIVE_SHADER_WORKFLOW.md b/PINKTHOSITIVE_SHADER_WORKFLOW.md
new file mode 100644
index 0000000..b755807
--- /dev/null
+++ b/PINKTHOSITIVE_SHADER_WORKFLOW.md
@@ -0,0 +1,588 @@
+# Pinkthositive Shader Workflow
+
+This document explains what was built for the Pinkthositive moon and squid work, what those outputs actually are, how they were made, how to make more work like this, and how to move the results into engines such as Three.js and Roblox.
+
+## Related Files
+
+- `shader-defs.js`
+- `pinkthositive-dashboard.html`
+- `pinkthositive-dashboard-app.js`
+- `pinkthositive-dashboard-shaders.js`
+- `pinkthositive-usable-materials.js`
+- `pinkthositive-preview.html`
+- `pinkthositive-material-shaders.js`
+- `pinkthositive-materials.html`
+- `presets/projects/moon-surface-hero.json`
+- `presets/projects/squid-tentacles-hero.json`
+
+## What These Outputs Actually Are
+
+There are three different artifact types involved here:
+
+| Type | What it is | Best use | Bad use |
+| --- | --- | --- | --- |
+| Hero shader render | A custom GLSL render designed as a beauty shot | Landing pages, concept art, promo stills, animated showcases | Wrapping directly onto a sphere or model |
+| Material shader | A shader that runs on actual mesh geometry | Surfaces, planets, props, model skins | Replacing geometry that should exist in 3D |
+| Texture set | Baked 2D images such as albedo, normal, roughness, AO, emissive | Engines that cannot run your custom shader directly | Preserving interactive procedural controls |
+
+For this project:
+
+- The `hero` moon and squid pages are custom GLSL beauty renders.
+- The later `materials` page is a procedural 3D scene.
+- The moon material study is a real sphere material.
+- The tentacle study is not just a texture. It is a combination of:
+ - actual tentacle geometry
+ - a custom tentacle skin shader
+ - real 3D sucker meshes attached to the tentacles
+
+That last page is much closer to a procedural model study than a plain texture.
+
+## What Was Built
+
+### 1. Moon Hero
+
+The first good moon result was a hero render:
+
+- cratered heightfield look
+- hard directional light
+- cold rim highlights
+- cinematic camera angle
+
+Why it worked:
+
+- moon terrain reads mostly from large-scale forms and lighting
+- a hero shot can cheat perspective and composition
+
+Why it is not the same thing as a reusable game material:
+
+- it contains a horizon and a composed view
+- it is screen-space art, not sphere-space material logic
+
+### 2. Squid Hero
+
+The first good squid result was also a hero render:
+
+- silhouette-first tentacle shapes
+- suction cup rows
+- wet highlights
+- magenta and cyan art direction
+
+Why it worked:
+
+- the eye reads creatures from silhouette first
+- broad tentacle bodies sold the subject better than abstract texture noise
+
+Why it was not enough:
+
+- it still was a composed shot, not a reusable model material
+
+### 3. Moon Material Study
+
+The later moon page was the correct approach for putting a moon-like surface on a sphere:
+
+- crater logic based on sphere direction
+- seam-safe object-space/sphere-space sampling
+- multiple variations on actual spheres
+
+Why it worked:
+
+- the pattern lives on the sphere, not on a flat image
+- there is no camera-baked horizon in the texture logic
+
+### 4. Tentacle Material Study
+
+The later tentacle page became the right answer only after moving from fake cup painting toward real form:
+
+- `TubeGeometry` tentacle meshes for the primary forms
+- custom skin shader for wet flesh, veins, specular, and glow
+- attached 3D sucker meshes for readable depth
+
+That is the important lesson:
+
+- readable subjects need primary form in geometry
+- shading should support the form, not try to invent the form alone
+
+## The Core Process That Worked
+
+The useful workflow was:
+
+1. Define the target artifact before writing shader code.
+2. Decide where the truth of the image should live.
+3. Build primary forms first.
+4. Add secondary surface detail second.
+5. Add lighting and color last.
+6. Validate against the actual subject, not just whether it looks "cool."
+
+### Step 1. Pick The Right Artifact
+
+Before touching code, answer this:
+
+- Is this a beauty shot?
+- Is this a reusable material?
+- Is this a texture set for export?
+- Is this a model study with procedural shading?
+
+If this is wrong, the whole result drifts.
+
+Examples:
+
+- `Moon on a sphere` means material shader, not hero render.
+- `Squid tentacle anatomy` means geometry plus material, not pure fullscreen texture.
+- `Nebula background` means hero shader is fine.
+
+### Step 2. Decide Where The Truth Lives
+
+There are four common spaces:
+
+| Space | Good for | Risk |
+| --- | --- | --- |
+| Screen space | Hero renders, portals, VFX, concept shots | Does not wrap correctly on models |
+| UV space | Authored textures, decals, baked maps | Seams and stretching |
+| Object space | Props, planets, materials tied to a mesh | Repeats per object instance |
+| World space | Terrain, triplanar materials, shared environments | Can swim if objects move through it |
+
+The moon material used sphere/object-space logic.
+
+The squid hero used screen space.
+
+The tentacle material study used actual mesh geometry plus shader shading.
+
+### Step 3. Block Primary Forms First
+
+This is where the early failed passes taught the right lesson.
+
+Do not start with fine noise and hope it becomes a recognizable subject.
+
+Start with:
+
+- silhouette
+- mass
+- large landmarks
+- anatomy or terrain logic
+
+Examples:
+
+- Moon:
+ - basin shapes
+ - crater bowls
+ - crater rims
+ - broad mare regions
+- Squid:
+ - tentacle taper
+ - arm clustering
+ - underside cup placement
+ - terminal shape behavior
+
+### Step 4. Add Secondary Detail
+
+Only after the big read is correct:
+
+- micro pitting
+- regolith grain
+- slime sheen
+- flesh mottling
+- rim sparkle
+- cup lip detail
+
+This detail should never be doing the job of primary form.
+
+### Step 5. Add Lighting And Color
+
+Lighting is what makes the surface believable.
+
+Examples from this work:
+
+- Moon:
+ - hard sun direction
+ - soft hemisphere fill
+ - cold rim tint
+- Squid:
+ - wet specular
+ - soft magenta flesh lighting
+ - cyan accent glow
+ - clearcoat-like highlights on suckers
+
+### Step 6. Validate Aggressively
+
+The practical loop was:
+
+1. render live page
+2. inspect for shader compile errors
+3. check for black frames
+4. capture screenshots
+5. compare against the intended subject
+6. refine the weakest read
+
+The big correction in this project was not "tune the parameters more." It was "change the artifact type."
+
+## The Most Important Design Rule
+
+For recognizable subjects:
+
+- texture-first works for surfaces
+- geometry-first works for anatomy
+
+That is why:
+
+- the moon could become a convincing material
+- the squid needed actual tentacle meshes and then real sucker geometry
+
+## Meta Prompt Template
+
+The useful meta prompt is not "make me a cool shader."
+
+It should specify:
+
+- subject
+- artifact type
+- target engine
+- whether it must wrap on geometry
+- whether it must be tileable
+- what must read at silhouette level
+- what can be cheated in shading
+- what outputs are required
+
+Use this structure:
+
+```md
+Create a [hero render | material shader | seamless texture set | model study] of [subject].
+
+Target use:
+- [promo still | sphere material | mesh skin | sprite sheet | baked PBR maps]
+
+Subject read requirements:
+- Must clearly read as [subject]
+- Must show [3-5 primary landmarks]
+- Must avoid reading as [common failure mode]
+
+Technical constraints:
+- [screen space | UV space | object space | world space]
+- [tileable / non-tileable]
+- [live shader / baked maps]
+- [resolution]
+- [animation yes/no]
+
+Deliverables:
+- [live GLSL page]
+- [albedo / normal / roughness / AO / emissive]
+- [mesh or geometry requirement]
+
+Art direction:
+- Palette:
+- Lighting:
+- Motion:
+- Surface qualities:
+```
+
+## Prompt Examples
+
+### Good Prompt For A Moon Material
+
+```md
+Create a seam-safe moon material shader for an actual sphere, not a fullscreen beauty shot.
+
+Target use:
+- reusable planet material in Three.js
+- must hold up when orbiting a camera around the sphere
+
+Subject read requirements:
+- crater bowls, raised rims, ejecta feel, dusty regolith, darker mare zones
+- must read as lunar terrain, not generic rock noise
+- avoid visible UV seam and avoid a baked horizon
+
+Technical constraints:
+- object-space or sphere-space logic
+- live shader first, then bake albedo, normal, roughness, and AO
+- 1024 map target
+
+Art direction:
+- grey and silver base
+- subtle blue-white cold rim light
+- hard directional sun
+```
+
+### Good Prompt For A Squid Tentacle Study
+
+```md
+Create a tentacle model study, not just a tentacle texture.
+
+Target use:
+- readable creature appendage for real-time rendering
+
+Subject read requirements:
+- tentacle taper
+- underside sucker placement
+- wet flesh read
+- clustered arm arrangement
+- avoid parallel neon tubes and avoid flat painted cup illusions
+
+Technical constraints:
+- geometry-first
+- custom skin shader for flesh and sheen
+- actual 3D sucker geometry
+- export path should support baking for engines that cannot run GLSL
+
+Art direction:
+- deep magenta and purple flesh
+- bioluminescent cyan accents
+- glossy wet highlights
+```
+
+## How To Produce More "Stuff"
+
+Use this decision grid:
+
+| If the subject is... | Start with... | Then add... |
+| --- | --- | --- |
+| Terrain, rock, bark, moon, rust | Material shader | Baked PBR maps |
+| Creature appendage, anatomy, iconic object | Geometry or strong silhouette | Skin shader and secondary detail |
+| Portal, nebula, energy beam, abstract VFX | Hero shader | Sprite sheet or video bake |
+| Mobile or engine-limited target | Baked textures early | Reduced live procedural complexity |
+
+A reliable production sequence is:
+
+1. reference the subject
+2. pick artifact type
+3. build primary read
+4. validate
+5. only then add fancy detail
+6. decide whether to keep it live or bake it
+
+## Export Strategy
+
+There are three real export strategies.
+
+### 1. Keep It As A Live Shader
+
+Use this when:
+
+- you are shipping on the web
+- you want interactive parameters
+- you want infinite variation from uniforms
+
+Good targets:
+
+- Three.js
+- custom WebGL apps
+- custom engines with shader support
+
+### 2. Bake It To Texture Maps
+
+Use this when:
+
+- the engine cannot run your custom shader
+- you need consistent art across tools
+- you are targeting standard PBR workflows
+
+Typical outputs:
+
+- albedo/base color
+- normal
+- roughness
+- ambient occlusion
+- metalness when relevant
+- emissive when relevant
+- height/displacement when relevant
+
+### 3. Bake It To Sprites Or Video
+
+Use this when:
+
+- it is mostly a visual effect
+- the effect is camera-facing
+- the target engine is limited
+
+Typical outputs:
+
+- sprite sheet
+- flipbook atlas
+- looping video
+- alpha sequence
+
+## How To Use These Results In Three.js
+
+There are two main paths.
+
+### Live Shader Path
+
+Use `THREE.ShaderMaterial` when you want the effect to stay procedural.
+
+That is what the hero renders and moon/tentacle material studies are doing.
+
+Core pieces:
+
+- geometry
+- `ShaderMaterial`
+- uniforms
+- render loop
+
+Good for:
+
+- moon material on a sphere
+- animated creature skin
+- live web demos
+
+### Baked PBR Path
+
+If you bake maps, use `THREE.MeshStandardMaterial` or `THREE.MeshPhysicalMaterial`.
+
+Typical map assignment:
+
+- `map`
+- `normalMap`
+- `roughnessMap`
+- `aoMap`
+- `metalnessMap`
+- `emissiveMap`
+
+Use this path when:
+
+- you need engine-friendly content
+- you want simpler runtime cost
+- you want to reuse the look across many scenes
+
+### Practical Three.js Notes
+
+- `ShaderMaterial` is the correct path for custom GLSL materials.
+- `WebGLRenderTarget` is the correct path when you want to render a shader into a texture and then reuse that texture.
+- `MeshStandardMaterial` is the correct path for baked PBR maps.
+- normal maps affect lighting, not actual silhouette.
+- if silhouette matters, use geometry or displacement.
+
+## How To Use These Results In Roblox
+
+Roblox is the most important constraint case:
+
+- Roblox does not use your arbitrary GLSL directly in the same way a custom WebGL app does.
+- For Roblox, the reliable path is to bake the result.
+
+### Best Roblox Path For Static Or Prop-Like Assets
+
+1. build the look procedurally
+2. bake texture maps
+3. import the mesh as `MeshPart`
+4. use `SurfaceAppearance` with baked PBR maps
+
+Useful baked outputs for Roblox:
+
+- albedo
+- normal
+- roughness
+- metalness when relevant
+
+Important practical constraints:
+
+- use UV-mapped meshes
+- Roblox supports PBR textures on `SurfaceAppearance`
+- normal maps should be OpenGL tangent-space normals
+- mesh objects get one material assignment
+
+### Best Roblox Path For Tentacles Or Creatures
+
+For something like the tentacle study:
+
+- export the geometry from Blender or a DCC as `fbx` or `gltf`
+- keep the tentacle form and sucker geometry in the mesh
+- bake the shading into texture maps
+- animate the mesh or rig separately
+
+Do not plan on shipping the browser GLSL directly into Roblox.
+
+### Best Roblox Path For Effects
+
+For shader-like effects that are mostly visual:
+
+- bake sprite sheets
+- bake flipbooks
+- bake animated image sequences
+
+Treat Roblox as a bake target, not as the place where the original GLSL lives.
+
+## How To Use These Results "Anywhere"
+
+The portable rule is simple:
+
+- if the target can run your shader language and pipeline, keep it live
+- otherwise bake it
+
+### Unity / Unreal / Godot
+
+Usually you will either:
+
+- rebuild the shader in the engine's shader graph or shading language
+- or bake the maps and use the engine's standard material system
+
+### Blender / DCC
+
+Use the shader or material study as the source lookdev pass, then:
+
+- bake maps
+- export mesh plus textures
+- move to glTF, FBX, or engine-native formats
+
+## What The Current Repo Can Export Today
+
+There is an important difference between the editor pipeline and the custom Pinkthositive pages.
+
+### Editor Pipeline
+
+The main editor already has:
+
+- texture export
+- PBR generation
+- 3D preview
+
+That is the standard export path for editor-built layered textures.
+
+### Custom Pinkthositive Pages
+
+The Pinkthositive hero and material pages are live custom shader pages.
+
+Right now they are best for:
+
+- live display
+- look development
+- visual reference
+- screenshot or capture
+
+If these need formal content export, the next proper system is:
+
+1. render the custom material into fixed-resolution `WebGLRenderTarget`s
+2. output dedicated passes for albedo, normal, roughness, AO, emissive, and height
+3. save those as PNGs
+
+That would turn the current live studies into a proper asset bake pipeline.
+
+## Recommended Technique Library
+
+If we keep producing more work like this, the useful technique set is:
+
+- sphere-space crater fields for planets
+- object-space procedural rock and bark materials
+- triplanar mapping for seam hiding
+- mesh-based creature appendages
+- attached procedural secondary geometry
+- offscreen bake passes for export
+- sprite sheet baking for VFX targets
+
+## Honest Lessons From These Passes
+
+The failed versions were useful because they exposed the wrong abstraction.
+
+The main lessons were:
+
+- not every subject should start as a procedural texture preset
+- a good-looking abstract surface is not the same as a readable subject
+- creatures need silhouette and anatomy
+- planets need correct material space
+- shader quality is less about "more noise" and more about "right representation"
+
+## External References
+
+These platform notes were checked against official docs:
+
+- Three.js `ShaderMaterial`: https://threejs.org/docs/pages/ShaderMaterial.html
+- Three.js `MeshStandardMaterial`: https://threejs.org/docs/api/en/materials/MeshStandardMaterial
+- Three.js `WebGLRenderTarget`: https://threejs.org/docs/pages/WebGLRenderTarget.html
+- Three.js render targets manual: https://threejs.org/manual/en/rendertargets.html
+- Roblox texture specifications and `SurfaceAppearance`: https://create.roblox.com/docs/art/modeling/texture-specifications
diff --git a/pinkthositive-dashboard-app.js b/pinkthositive-dashboard-app.js
new file mode 100644
index 0000000..71a0969
--- /dev/null
+++ b/pinkthositive-dashboard-app.js
@@ -0,0 +1,259 @@
+import * as THREE from "three";
+import { PINKTHOSITIVE_DASHBOARD_SHADERS } from "./pinkthositive-dashboard-shaders.js";
+import { MATERIAL_VERT, PINKTHOSITIVE_USABLE_MATERIALS } from "./pinkthositive-usable-materials.js";
+
+const FULLSCREEN_VERT = `
+varying vec2 vUv;
+void main(){
+ vUv=uv;
+ gl_Position=vec4(position.xy,0.0,1.0);
+}
+`;
+
+class FullscreenShaderCard {
+ constructor(card, shaderDef) {
+ this.card = card;
+ this.canvas = card.querySelector("canvas");
+ this.renderer = new THREE.WebGLRenderer({
+ canvas: this.canvas,
+ antialias: true,
+ preserveDrawingBuffer: true,
+ powerPreference: "high-performance"
+ });
+ this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+ this.scene = new THREE.Scene();
+ this.camera = new THREE.Camera();
+ this.uniforms = {
+ time: { value: 0 },
+ resolution: { value: new THREE.Vector2(1, 1) }
+ };
+ this.material = new THREE.ShaderMaterial({
+ vertexShader: FULLSCREEN_VERT,
+ fragmentShader: shaderDef.shader,
+ uniforms: this.uniforms,
+ depthTest: false,
+ depthWrite: false
+ });
+ this.scene.add(new THREE.Mesh(new THREE.PlaneGeometry(2, 2), this.material));
+ this.resize();
+ }
+
+ resize() {
+ const rect = this.canvas.getBoundingClientRect();
+ this.renderer.setSize(rect.width, rect.height, false);
+ const drawSize = new THREE.Vector2();
+ this.renderer.getDrawingBufferSize(drawSize);
+ this.uniforms.resolution.value.copy(drawSize);
+ }
+
+ render(t) {
+ this.uniforms.time.value = t;
+ this.renderer.render(this.scene, this.camera);
+ }
+}
+
+function makeGeometry(type) {
+ switch (type) {
+ case "box":
+ return new THREE.BoxGeometry(1.8, 1.8, 1.8, 24, 24, 24);
+ case "icosahedron":
+ return new THREE.IcosahedronGeometry(1.28, 4);
+ case "octahedron":
+ return new THREE.OctahedronGeometry(1.34, 2);
+ case "torusknot":
+ return new THREE.TorusKnotGeometry(0.88, 0.28, 220, 32, 2, 5);
+ case "sphere":
+ default:
+ return new THREE.SphereGeometry(1.28, 120, 72);
+ }
+}
+
+class MaterialShaderCard {
+ constructor(card, materialDef) {
+ this.card = card;
+ this.canvas = card.querySelector("canvas");
+ this.renderer = new THREE.WebGLRenderer({
+ canvas: this.canvas,
+ antialias: true,
+ alpha: false,
+ preserveDrawingBuffer: true,
+ powerPreference: "high-performance"
+ });
+ this.renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2));
+ this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+ this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
+ this.renderer.toneMappingExposure = 1.24;
+
+ this.scene = new THREE.Scene();
+ this.scene.background = new THREE.Color(0x040811);
+ this.camera = new THREE.PerspectiveCamera(34, 1, 0.1, 100);
+ this.camera.position.set(0, 0.34, 4.3);
+
+ this.group = new THREE.Group();
+ this.scene.add(this.group);
+
+ this.uniforms = {
+ uTime: { value: 0 },
+ uLightDir: { value: new THREE.Vector3(-0.62, 0.74, 0.48) }
+ };
+
+ this.mesh = new THREE.Mesh(
+ makeGeometry(materialDef.geometry),
+ new THREE.ShaderMaterial({
+ vertexShader: MATERIAL_VERT,
+ fragmentShader: materialDef.fragmentShader,
+ uniforms: this.uniforms
+ })
+ );
+ this.group.add(this.mesh);
+
+ const base = new THREE.Mesh(
+ new THREE.CylinderGeometry(1.58, 1.8, 0.28, 54),
+ new THREE.MeshStandardMaterial({
+ color: 0x0d131f,
+ roughness: 0.82,
+ metalness: 0.16
+ })
+ );
+ base.position.set(0, -1.72, 0);
+ this.group.add(base);
+
+ const ring = new THREE.Mesh(
+ new THREE.TorusGeometry(1.62, 0.05, 14, 80),
+ new THREE.MeshBasicMaterial({
+ color: 0x5fa9d8,
+ transparent: true,
+ opacity: 0.38
+ })
+ );
+ ring.rotation.x = Math.PI * 0.5;
+ ring.position.set(0, -1.5, 0);
+ this.group.add(ring);
+
+ const hemi = new THREE.HemisphereLight(0x6f96ba, 0x020306, 0.78);
+ this.scene.add(hemi);
+ const back = new THREE.PointLight(0x2f6fa4, 0.55, 10);
+ back.position.set(-1.8, 1.4, -2.2);
+ this.scene.add(back);
+
+ this.resize();
+ }
+
+ resize() {
+ const rect = this.canvas.getBoundingClientRect();
+ this.renderer.setSize(rect.width, rect.height, false);
+ this.camera.aspect = rect.width / rect.height;
+ this.camera.updateProjectionMatrix();
+ }
+
+ render(t) {
+ this.uniforms.uTime.value = t;
+ this.mesh.rotation.y = t * 0.42;
+ this.mesh.rotation.x = Math.sin(t * 0.36) * 0.16;
+ this.group.rotation.y = Math.sin(t * 0.2) * 0.08;
+ this.renderer.render(this.scene, this.camera);
+ }
+}
+
+function makePromptList(lines) {
+ return lines.map(line => `
+ This dashboard turns the workflow meta-prompt into new live artifacts instead of vague style requests. Each
+ piece has a clear subject, artifact type, primary read target, and export path. This pass now mixes hero
+ renders with geometry-bound material studies so there is a meaningful difference between spectacle and
+ actually usable surface work.
+
+ Three fresh pieces built directly from the workflow: one architectural hero render, one cosmic bioform,
+ and one storm environment. Each card exposes the prompt vector so the generation logic is inspectable.
+
+
+ Live GLSL
+
+
+
+
+
+
+
+
Usable Material Pack
+
+ Six new material studies rendered on actual geometry. These are the more production-relevant outputs:
+ surfaces that could be baked into maps, rebuilt in engine shaders, or used directly as look-dev sources
+ for props, creatures, crystals, and environment assets.
+
+
+ Material Studies
+
+
+
+
+
+
+
+
Pinkthositive Archive
+
+ Previous moon and squid work stays linked here so the dashboard acts as a single entry point for the
+ whole Pinkthositive thread: original hero experiments, material studies, and the process guide.
+
+ This page uses actual 3D materials instead of camera-baked hero renders. The moon study is seam-safe on
+ spheres because the crater field lives in object space. The squid study applies a tentacle skin shader to
+ real `TubeGeometry` tentacle meshes, with suction cups and wet sheen on the model instead of on a flat image.
+
Three cratered moon variants on actual spheres: dense highlands, mare-heavy basalt, and a colder silver pass. Orbit the stage to inspect the seam-free surface behavior.
+
+ Sphere Material
+
+
+
+
+
+
+
+
Highland Craterfield
+
Dense crater amplitude, minimal mare flattening, brighter dust and sharper crater rims.
+
+
+
Mare Basin
+
Broader dark plains mixed into the crater field so it reads more like a planetary surface than a generic rock ball.
+
+
+
Cold Silver
+
Same seam-safe crater workflow, but with more blue-white rim light and a cleaner, colder regolith response.
+
+
+
+
+
+
+
+
+
Squid Tentacle Model Study
+
Procedural squid skin on tentacle meshes built from curves and `TubeGeometry`. The cups live on the underside band of the actual mesh rather than in a flat 2D composition.
+
+ Tentacle Mesh
+
+
+
+
+
+
+
+
Model Strategy
+
Five tapered tentacle meshes with different curve silhouettes, sway timing, and a shared collar so the study reads like a real creature rig instead of parallel tubes.
+
+
+
Skin Strategy
+
Shader now handles the wet flesh, veins, and cyan edge bloom, while real attached cup meshes provide the readable sucker depth instead of a flat painted illusion.
+ Two fully custom fragment shaders, rendered directly on this page. The moon is a cratered
+ heightfield hero shot instead of a noise texture. The squid render is shape-first with
+ broad tentacle bodies, suction cup rows, wet specular sheen, and cyan glow accents.
+