{
  "id": "three-water-refraction",
  "theme": "three-shaders",
  "type": "code",
  "sourceCategory": "ocean",
  "kind": "shader",
  "genre": "water-shader",
  "title": "Transparent water with reflection and refraction",
  "description": "Show distortion of objects beneath the water and highlights on its surface.",
  "prompt": "Implement a Three.js water demonstration for {{scene}} with readable {{objects}} beneath the surface. Create restrained reflection and refraction cues, wavelength-scale normal distortion, depth-dependent tint and Fresnel blending. Choose between a lightweight environment-map approximation and a render-target approach based on the existing stack and performance budget. Describe the tradeoff rather than presenting screen-space approximations as physically exact water. Expose roughness, distortion strength, tint and opacity or transmission controls appropriate to the selected material. Keep submerged objects recognizable and prevent feedback loops when rendering reflection or refraction textures.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- A comparison toggle or developer control makes the distortion and Fresnel effect observable.\n- Rendering does not recursively sample its own active output target.\n- No major black edges, transparency-order glitches or disappearing underwater objects appear at supported camera angles.\n- Provide a cheaper fallback when render targets or required capabilities are unavailable.\n- Record GPU resource sizes and measured frame time for the final quality presets.",
  "variables": [
    {
      "key": "scene",
      "label": "Scene",
      "default": "a calm shallow pool viewed at a three-quarter angle",
      "required": true
    },
    {
      "key": "objects",
      "label": "Objects beneath the water",
      "default": "smooth stones and a simple tiled floor",
      "required": true
    }
  ],
  "notes": [
    "A prompt for a development agent implementing changes in an existing codebase; the requested output is code."
  ],
  "outputArtifact": "A reusable component and configuration integrated into the existing repository, required styles or shaders, a runnable demo, a list of changed files, validation results and known limitations.",
  "modelPolicy": "model-agnostic coding agent",
  "aspectRatio": null,
  "referenceImageRequired": false,
  "transparentOutputRequested": null,
  "ageConstraint": null,
  "acceptanceCriteria": [
    "A comparison toggle or developer control makes the distortion and Fresnel effect observable.",
    "Rendering does not recursively sample its own active output target.",
    "No major black edges, transparency-order glitches or disappearing underwater objects appear at supported camera angles.",
    "Provide a cheaper fallback when render targets or required capabilities are unavailable.",
    "Record GPU resource sizes and measured frame time for the final quality presets."
  ],
  "keywords": [
    "Three.js",
    "Water surface",
    "Reflection",
    "Refraction"
  ],
  "defaultPrompt": "Implement a Three.js water demonstration for a calm shallow pool viewed at a three-quarter angle with readable smooth stones and a simple tiled floor beneath the surface. Create restrained reflection and refraction cues, wavelength-scale normal distortion, depth-dependent tint and Fresnel blending. Choose between a lightweight environment-map approximation and a render-target approach based on the existing stack and performance budget. Describe the tradeoff rather than presenting screen-space approximations as physically exact water. Expose roughness, distortion strength, tint and opacity or transmission controls appropriate to the selected material. Keep submerged objects recognizable and prevent feedback loops when rendering reflection or refraction textures.\n\nImplementation constraints:\nFirst inspect the existing repository and installed versions. Reuse its routing, styling, build tools and dependency conventions. Use React Three Fiber only if the project already uses it or the integration is clearly justified; otherwise use the existing Three.js integration or a minimal isolated component. Do not assume version-specific APIs: check the installed package documentation and types. Do not change unrelated pages or silently replace the application architecture. Explain any required new dependency before adding it. Dispose GPU resources, remove event listeners and stop rendering when the component is not visible. Respect prefers-reduced-motion and provide a readable non-WebGL fallback. Keep links and controls in accessible HTML above the canvas. Return the changed files, configuration knobs, tests performed and known limitations.\n\nAcceptance criteria:\n- A comparison toggle or developer control makes the distortion and Fresnel effect observable.\n- Rendering does not recursively sample its own active output target.\n- No major black edges, transparency-order glitches or disappearing underwater objects appear at supported camera angles.\n- Provide a cheaper fallback when render targets or required capabilities are unavailable.\n- Record GPU resource sizes and measured frame time for the final quality presets.",
  "execution": {
    "status": "not-run",
    "actualModel": null,
    "modelVersion": null,
    "executionDate": null,
    "tokens": null,
    "cost": null,
    "elapsedSeconds": null,
    "output": null
  },
  "provenance": {
    "source": "Kumyu Academy creative templates",
    "sourceFile": "apps/academy/content/creative/templates/en/three-shaders.json",
    "sourceCommit": "33a0ac4473d64ec443e809d754051109d9324435",
    "sourceBlob": "63133a94f8f80ae74418bb869a122276a793f5bf",
    "sourceSha256": "0f842b83757f873f3f8838ee4d77509570d99cce1290a523a6e0ec1b9903f1fb",
    "originalJsonPointer": "/templates/2",
    "originalPromptSha256": "431120e5fbc8e1be47f50025f9eb821a200a650f84d4b049683fc3378c3009b8",
    "publicPromptSha256": "431120e5fbc8e1be47f50025f9eb821a200a650f84d4b049683fc3378c3009b8",
    "originalDefaultPromptSha256": "697f7622c5267b3df0549441b4405b533e65e87ba30016f51b4a2dc22240fcd7",
    "publicDefaultPromptSha256": "697f7622c5267b3df0549441b4405b533e65e87ba30016f51b4a2dc22240fcd7",
    "transformations": [],
    "defaultInterpolationMatchesOriginal": true,
    "validationNotes": []
  }
}