new-experiment

name	new-experiment
description	Create a new experiment in TresJS Lab with all necessary files

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:

   ---
   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:

   <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:

     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:

     uniform float uTime;
     void main() {
       gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
     }
     

   • Update The{PascalCaseName}.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

# 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