new-experiment

# New Experiment Create a new experiment in the TresJS Lab app with all necessary files and structure. ## Steps 1. **Parse arguments**: Extract experiment name from `$ARGUMENTS`. If second argument is `shaders` or `true`, enable shader support. 2. **Convert naming**: Convert kebab-case to PascalCase for component naming (e.g., `wobble-sphere` → `WobbleSphere`). 3. **Create markdown file**: Create `apps/lab/content/experiments/{experiment-name}.md` with frontmatter: ```yaml --- title: {Experiment Title} author: {your-github-username} description: {Brief description} thumbnail: /experiments/{experiment-name}.png tags: [] date: {current-date} lastUpdated: {current-date} --- ``` 4. **Create component directory**: `apps/lab/app/components/{experiment-name}/` 5. **Create index.global.vue**: ```vue <script setup lang="ts"> // TODO: Implement experiment logic </script> <template> <TresCanvas> <TresPerspectiveCamera :position="[0, 0, 10]" :look-at="[0, 0, 0]" /> <{ExperimentName}The{PascalCaseName} /> <OrbitControls /> <TheScreenshot /> </TresCanvas> </template> ``` 6. **Create experiment component**: `The{PascalCaseName}.vue` with basic structure. 7. **If shaders enabled**: - Create `shaders/` directory inside component folder - Create `shaders/vertex.glsl`: ```glsl uniform float uTime; uniform vec2 uResolution; void main() { vec4 modelPosition = modelMatrix * vec4(position, 1.0); vec4 viewPosition = viewMatrix * modelPosition; vec4 projectedPosition = projectionMatrix * viewPosition; gl_Position = projectedPosition; } ``` - Create `shaders/fragment.glsl`: ```glsl uniform float uTime; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } ``` - Update `The{PascalCaseName}.vue`: ```vue <script setup lang="ts"> import vertexShader from './shaders/vertex.glsl'; import fragmentShader from './shaders/fragment.glsl'; const uniforms = { uTime: { value: 0 }, uResolution: { value: new Vector2(window.innerWidth, window.innerHeight) }, } </script> <template> <TresMesh> <TresPlaneGeometry /> <TresShaderMaterial :uniforms="uniforms" :vertex-shader="vertexShader" :fragment-shader="fragmentShader" /> </TresMesh> </template> ``` ## Examples ```bash # Basic experiment without shaders /new-experiment my-cool-effect # Experiment with shader support /new-experiment wobble-sphere shaders ``` ## Considerations - Use kebab-case for file/folder names - Use PascalCase for component names - Component prefix matches experiment folder name (e.g., `WobbleSphereTheWobbleSphere`) - Add appropriate tags in frontmatter (e.g., 'shaders', 'glsl', 'particles', 'basic') - Markdown content can be filled in later - only create frontmatter - For shader experiments, include basic uniforms for time-based animations