Three.js Comparison between GPT5 & Sonnet4 Using Octocode MCP

This is testing of both models with and without Octocode MCP using the same prompt to create Three.js example for octopus
All four implementations used the identical prompt to generate their Three.js octopus scenes

Date of research: 9/8/25

🐙 Octocode MCP Repository 📊 Examples Repository

Sonnet4 + Octocode MCP

Sonnet4 - no Octocode

GPT5 + Octocode MCP

GPT5 - no Octocode

Create a single, self-contained HTML file that renders an animated 3D scene using the latest stable Three.js loaded from a public CDN (module imports). No build tools.

IMPORTANT:
Research step (use Octocode MCP)

    Use Octocode MCP to conduct deep research before coding:

        Retrieve the latest Three.js documentation, implementaion files and examples implementation files - read all 

        Search GitHub for additional examples that use the latest Three.js version.

        Incorporate best practices discovered during research into the implementation

        Get many examples and read all threejs docs and implementaions


Scene requirements

    Ocean environment with subtle fog and a moving water surface (shader or scrolling normal map; no external textures).

    A pink octopus made from geometries. Eight tentacles animated simulate swimming. The body should have a simple lambert/standard material with rim-light effect.

    It has 2 big eyes and it swimming acroos the ocean

    Soft lighting: at least one directional light and ambient or hemisphere light.

    Camera orbit interaction using OrbitControls.

    Responsive canvas that handles window resize.

    Make it look amazing

    Animation loop at ~60 FPS on a typical laptop; avoid heavy geometry.

Constraints

    Do not fetch external assets (models, images, fonts). Everything must be generated at runtime.

    Use ES modules with explicit imports for three and OrbitControls from the same CDN. Pin to "latest" if supported by the CDN; otherwise pin to the most recent release tag in the import URLs.

    Use import maps (<script type="importmap">) to properly resolve module specifiers before the main script tag.

    No TypeScript; plain JS inside a <script type="module">.

    No console errors or warnings from browser execution

    Don't search the web for anything

Output

    Return only the complete HTML file contents, starting with <!doctype html> and ending with </html>.

    Include minimal CSS so the canvas fills the viewport.

    Add brief inline comments explaining key parts (octopus construction, tentacle animation, water, lights).

Acceptance criteria

    Opening the file directly in a modern browser shows a pink octopus swimming in an ocean scene with moving water, working OrbitControls, and no console errors. Resize works without artifacts.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Octopus Ocean • Three.js (single file)</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      /* Minimal CSS: canvas fills the viewport */
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        overflow: hidden;
        background: #0c1f2a; /* matches fog/sea tones */
      }
      canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
    </style>
    <!-- Import map pins both three and its addons to the same CDN and version -->
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.164.1/build/three.module.js",
          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.164.1/examples/jsm/"
        }
      }
    </script>
  </head>
  <body>
    <script type="module">
      // Import Three.js and OrbitControls via import map (same CDN + version)
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

      // ----- Renderer -----
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.outputColorSpace = THREE.SRGBColorSpace;
      renderer.toneMapping = THREE.ACESFilmicToneMapping;
      document.body.appendChild(renderer.domElement);

      // ----- Scene -----
      const scene = new THREE.Scene();
      const fogColor = new THREE.Color(0x0f3040);
      scene.background = fogColor.clone();
      scene.fog = new THREE.FogExp2(fogColor.getHex(), 0.025); // subtle ocean haze

      // ----- Camera + Controls -----
      const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 100);
      camera.position.set(4, 2.2, 4.5);
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true;
      controls.target.set(0, 0.6, 0); // look at the octopus
      controls.update();

      // ----- Lights (soft lighting) -----
      // Hemisphere light for ambient sky-ocean tone
      const hemi = new THREE.HemisphereLight(0x87b5ff, 0x174a55, 0.65);
      scene.add(hemi);
      // Directional light for soft highlights
      const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
      dirLight.position.set(5, 8, 3);
      scene.add(dirLight);

      // ----- Water surface (procedural, no external textures) -----
      // Large plane with lightweight vertex displacement in shader
      const waterSize = 200;
      const waterSegs = 96;
      const waterGeo = new THREE.PlaneGeometry(waterSize, waterSize, waterSegs, waterSegs);
      const waterMat = new THREE.MeshStandardMaterial({
        color: new THREE.Color(0x145a73), // deep teal
        metalness: 0.05,
        roughness: 0.8,
        transparent: true,
        opacity: 0.98
      });
      let waterShader = null;
      waterMat.onBeforeCompile = (shader) => {
        // Uniforms to animate gentle waves
        shader.uniforms.uTime = { value: 0 };
        shader.uniforms.uAmp = { value: 0.35 };
        shader.uniforms.uFreq = { value: 0.9 };
        shader.uniforms.uSpeed = { value: 0.6 };
        shader.vertexShader = shader.vertexShader
          .replace(
            '#include <common>',
            `
            #include <common>
            uniform float uTime;
            uniform float uAmp;
            uniform float uFreq;
            uniform float uSpeed;
            `
          )
          .replace(
            // Displace along local Z (plane is XY by default; mesh is rotated to lie horizontally)
            '#include <begin_vertex>',
            `
            #include <begin_vertex>
            float wave = sin((position.x + position.y) * uFreq * 0.3 + uTime * uSpeed)
                       + 0.5 * sin((position.x - position.y) * uFreq * 0.55 - uTime * (uSpeed * 1.3));
            transformed.z += uAmp * wave * 0.5;
            `
          );
        // Slight color variation with view angle for a subtle fresnel-like effect
        shader.fragmentShader = shader.fragmentShader
          .replace(
            '#include <output_fragment>',
            `
            // faint horizon brightening
            float vdot = dot(normalize(vNormal), normalize(-vViewPosition));
            float fres = pow(1.0 - saturate(vdot), 2.0) * 0.15;
            gl_FragColor.rgb += fres;
            #include <output_fragment>
            `
          );

        waterShader = shader; // store so we can update time
      };
      const water = new THREE.Mesh(waterGeo, waterMat);
      water.rotation.x = -Math.PI * 0.5;
      water.position.y = 0.0;
      water.receiveShadow = false;
      scene.add(water);

      // ----- Octopus (basic geometries, no external models) -----
      const octopus = new THREE.Group();
      scene.add(octopus);

      // Body: stretched sphere with rim-light effect via onBeforeCompile
      const bodyGeo = new THREE.SphereGeometry(0.6, 32, 24);
      const bodyMat = new THREE.MeshStandardMaterial({
        color: new THREE.Color(0xff77aa), // pink
        metalness: 0.05,
        roughness: 0.6,
        emissive: new THREE.Color(0x000000)
      });
      bodyMat.onBeforeCompile = (shader) => {
        shader.uniforms.uRimColor = { value: new THREE.Color(0xffe6ff) };
        shader.uniforms.uRimStrength = { value: 0.7 };
        shader.fragmentShader = shader.fragmentShader
          .replace(
            '#include <common>',
            `
            #include <common>
            uniform vec3 uRimColor;
            uniform float uRimStrength;
            `
          )
          .replace(
            '#include <emissivemap_fragment>',
            `
            #include <emissivemap_fragment>
            // Rim-light: brighter on grazing angles, adds to emissive so it remains soft
            float rim = 1.0 - saturate(dot(normalize(vNormal), normalize(-vViewPosition)));
            rim = pow(rim, 2.0);
            totalEmissiveRadiance += uRimColor * rim * uRimStrength;
            `
          );
      };
      const body = new THREE.Mesh(bodyGeo, bodyMat);
      body.scale.set(1.0, 1.15, 1.0); // slightly taller
      body.position.y = 0.8;
      octopus.add(body);

      // Eyes: tiny spheres (basic geometry)
      const eyeMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.5, metalness: 0.0 });
      const eyeGeo = new THREE.SphereGeometry(0.05, 12, 10);
      const eyeL = new THREE.Mesh(eyeGeo, eyeMat);
      const eyeR = new THREE.Mesh(eyeGeo, eyeMat);
      eyeL.position.set(0.18, 0.93, 0.46);
      eyeR.position.set(-0.18, 0.93, 0.46);
      body.add(eyeL, eyeR);

      // Tentacles: 8 chains of lightweight cylinder segments animated by phase-shifted sine waves
      const tentacles = []; // store chains for animation
      const tentacleCount = 8;
      const segmentCount = 12;
      const segmentLength = 0.22;
      const baseRadius = 0.12;

      function createTentacleChain() {
        // Root object for the tentacle chain
        const root = new THREE.Object3D();
        const joints = [];
        let parent = root;

        // Pinkish tentacle material (reuse body color family)
        const tMaterial = new THREE.MeshStandardMaterial({
          color: new THREE.Color(0xff88bb),
          metalness: 0.05,
          roughness: 0.65
        });

        for (let i = 0; i < segmentCount; i++) {
          const t = 1 - i / (segmentCount - 1);
          const rTop = baseRadius * (0.55 + 0.45 * t) * 0.9;
          const rBottom = baseRadius * (0.45 + 0.35 * t) * 0.9;

          // Cylinder aligned along Y; we'll hinge at the top by offsetting the mesh
          const geo = new THREE.CylinderGeometry(rTop, rBottom, segmentLength, 8, 1, true);
          const joint = new THREE.Object3D();
          const mesh = new THREE.Mesh(geo, tMaterial);
          mesh.position.y = -segmentLength * 0.5; // pivot at the segment's top
          joint.add(mesh);

          parent.add(joint);
          joints.push(joint);

          // Next joint starts at end of this segment
          const next = new THREE.Object3D();
          next.position.y = -segmentLength;
          joint.add(next);
          parent = next;
        }
        return { root, joints };
      }

      // Arrange 8 tentacles around the body base
      const radiusAround = 0.45;
      for (let i = 0; i < tentacleCount; i++) {
        const angle = (i / tentacleCount) * Math.PI * 2;
        const base = new THREE.Object3D();
        base.position.set(Math.cos(angle) * radiusAround, 0.65, Math.sin(angle) * radiusAround);
        base.rotation.y = angle + Math.PI * 0.5; // face outward
        base.rotation.x = THREE.MathUtils.degToRad(12); // slight outward tilt
        octopus.add(base);

        const { root, joints } = createTentacleChain();
        base.add(root);
        tentacles.push({ base, joints, baseAngle: angle });
      }

      // ----- Animation state -----
      const clock = new THREE.Clock();
      let tAccum = 0;

      // ----- Resize handling -----
      function onResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      }
      window.addEventListener('resize', onResize);

      // ----- Main loop -----
      function animate() {
        const dt = clock.getDelta();
        tAccum += dt;

        // Animate water time uniform
        if (waterShader) {
          waterShader.uniforms.uTime.value = tAccum;
        }

        // Gentle bobbing/swim motion for the octopus body
        const swim = Math.sin(tAccum * 1.2) * 0.06;
        octopus.position.y = 0.25 + swim * 0.4;
        octopus.position.x = Math.sin(tAccum * 0.25) * 0.15;
        octopus.position.z = Math.cos(tAccum * 0.22) * 0.15;
        octopus.rotation.y = Math.sin(tAccum * 0.5) * 0.2;

        // Tentacle animation: phase-shifted sine along each chain
        const waveSpeed = 2.2;
        const segPhase = 0.6;
        for (let idx = 0; idx < tentacles.length; idx++) {
          const { joints, baseAngle } = tentacles[idx];
          const basePhase = baseAngle * 1.2; // shift per tentacle around the body
          for (let s = 0; s < joints.length; s++) {
            const joint = joints[s];
            const falloff = 1.0 - s / joints.length;
            const amp = 0.35 * Math.pow(falloff, 0.7); // taper amplitude
            const phase = waveSpeed * tAccum + basePhase + s * segPhase;

            // Bend primarily around Z, with a slight X component for 3D motion
            joint.rotation.z = amp * Math.sin(phase);
            joint.rotation.x = 0.35 * amp * Math.cos(phase * 0.9);
          }
        }

        controls.update();
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
      }

      // Small helper: show the octopus slightly above water for clarity
      octopus.position.y = 0.25;

      // Start!
      animate();
    </script>
  </body>
</html>

<!doctype html>
<html lang="en">
<head>
    <title>Animated Pink Octopus in Ocean - Three.js</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background: #001e0f;
            font-family: Arial, sans-serif;
        }
        canvas {
            display: block;
        }
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-size: 14px;
            z-index: 100;
            background: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div id="info">
        Pink Octopus Swimming in Ocean<br/>
        Mouse: Orbit camera | Scroll: Zoom
    </div>

    <script type="importmap">
    {
        "imports": {
            "three": "https://cdn.jsdelivr.net/npm/three@0.179.1/build/three.module.js",
            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.179.1/examples/jsm/"
        }
    }
    </script>

    <script type="module">
        import * as THREE from 'three';
        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

        // Scene setup
        let scene, camera, renderer, controls;
        let octopus, tentacles = [];
        let water, waterGeometry, waterMaterial;
        let clock = new THREE.Clock();

        init();
        animate();

        function init() {
            // Scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x006994);
            scene.fog = new THREE.FogExp2(0x006994, 0.002);

            // Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 10, 30);

            // Renderer
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setPixelRatio(window.devicePixelRatio);
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            document.body.appendChild(renderer.domElement);

            // Controls
            controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true;
            controls.dampingFactor = 0.05;
            controls.minDistance = 10;
            controls.maxDistance = 100;
            controls.maxPolarAngle = Math.PI * 0.495;

            // Lighting setup
            setupLighting();
            
            // Ocean surface
            createOcean();
            
            // Create octopus
            createOctopus();

            // Event listeners
            window.addEventListener('resize', onWindowResize);
        }

        function setupLighting() {
            // Directional light (sun)
            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5);
            directionalLight.position.set(10, 10, 5);
            directionalLight.castShadow = true;
            directionalLight.shadow.mapSize.width = 1024;
            directionalLight.shadow.mapSize.height = 1024;
            directionalLight.shadow.camera.near = 0.5;
            directionalLight.shadow.camera.far = 50;
            directionalLight.shadow.camera.left = -20;
            directionalLight.shadow.camera.right = 20;
            directionalLight.shadow.camera.top = 20;
            directionalLight.shadow.camera.bottom = -20;
            scene.add(directionalLight);

            // Hemisphere light for soft ambient lighting
            const hemisphereLight = new THREE.HemisphereLight(0x87ceeb, 0x006994, 0.6);
            scene.add(hemisphereLight);

            // Rim light effect
            const rimLight = new THREE.DirectionalLight(0x87ceeb, 0.5);
            rimLight.position.set(-5, 5, -5);
            scene.add(rimLight);
        }

        function createOcean() {
            // Create animated water surface using a plane with custom shader material
            waterGeometry = new THREE.PlaneGeometry(200, 200, 50, 50);
            
            // Custom water shader material
            waterMaterial = new THREE.ShaderMaterial({
                uniforms: {
                    time: { value: 0 },
                    color: { value: new THREE.Color(0x006994) },
                    deepColor: { value: new THREE.Color(0x001e0f) }
                },
                vertexShader: `
                    uniform float time;
                    varying vec2 vUv;
                    varying float vElevation;
                    
                    void main() {
                        vUv = uv;
                        
                        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
                        
                        // Create wave animation
                        float elevation = sin(modelPosition.x * 0.3 + time * 2.0) * 0.5;
                        elevation += sin(modelPosition.z * 0.2 + time * 1.5) * 0.3;
                        elevation += sin(modelPosition.x * 0.1 + modelPosition.z * 0.1 + time) * 0.2;
                        
                        modelPosition.y += elevation;
                        vElevation = elevation;
                        
                        vec4 viewPosition = viewMatrix * modelPosition;
                        vec4 projectedPosition = projectionMatrix * viewPosition;
                        
                        gl_Position = projectedPosition;
                    }
                `,
                fragmentShader: `
                    uniform vec3 color;
                    uniform vec3 deepColor;
                    varying vec2 vUv;
                    varying float vElevation;
                    
                    void main() {
                        vec3 finalColor = mix(deepColor, color, vElevation + 0.5);
                        gl_FragColor = vec4(finalColor, 0.8);
                    }
                `,
                transparent: true,
                side: THREE.DoubleSide
            });

            water = new THREE.Mesh(waterGeometry, waterMaterial);
            water.rotation.x = -Math.PI * 0.5;
            water.position.y = -5;
            water.receiveShadow = true;
            scene.add(water);
        }

        function createOctopus() {
            octopus = new THREE.Group();
            
            // Octopus body (main sphere)
            const bodyGeometry = new THREE.SphereGeometry(2, 16, 12);
            const bodyMaterial = new THREE.MeshLambertMaterial({ 
                color: 0xff69b4,
                transparent: true,
                opacity: 0.9
            });
            const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
            body.position.y = 2;
            body.castShadow = true;
            octopus.add(body);

            // Eyes
            const eyeGeometry = new THREE.SphereGeometry(0.4, 8, 6);
            const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
            
            const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            leftEye.position.set(-0.8, 2.5, 1.5);
            octopus.add(leftEye);
            
            const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
            rightEye.position.set(0.8, 2.5, 1.5);
            octopus.add(rightEye);

            // Eye pupils
            const pupilGeometry = new THREE.SphereGeometry(0.2, 6, 4);
            const pupilMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
            
            const leftPupil = new THREE.Mesh(pupilGeometry, pupilMaterial);
            leftPupil.position.set(-0.8, 2.5, 1.8);
            octopus.add(leftPupil);
            
            const rightPupil = new THREE.Mesh(pupilGeometry, pupilMaterial);
            rightPupil.position.set(0.8, 2.5, 1.8);
            octopus.add(rightPupil);

            // Create 8 tentacles
            const tentacleMaterial = new THREE.MeshLambertMaterial({ 
                color: 0xff1493,
                transparent: true,
                opacity: 0.9
            });

            for (let i = 0; i < 8; i++) {
                const tentacle = new THREE.Group();
                const angle = (i / 8) * Math.PI * 2;
                
                // Create tentacle segments
                const segments = [];
                for (let j = 0; j < 6; j++) {
                    const segmentGeometry = new THREE.CylinderGeometry(
                        0.3 - j * 0.04, // top radius (gets smaller)
                        0.3 - (j + 1) * 0.04, // bottom radius
                        1.5, // height
                        8 // radial segments
                    );
                    const segment = new THREE.Mesh(segmentGeometry, tentacleMaterial);
                    segment.position.y = -j * 1.3;
                    segment.castShadow = true;
                    
                    segments.push(segment);
                    tentacle.add(segment);
                }
                
                tentacle.position.x = Math.cos(angle) * 1.8;
                tentacle.position.z = Math.sin(angle) * 1.8;
                tentacle.position.y = 0.5;
                
                tentacles.push({ group: tentacle, segments: segments, angle: angle });
                octopus.add(tentacle);
            }

            octopus.position.y = 5;
            scene.add(octopus);
        }

        function animateOctopus(time) {
            // Swimming motion - octopus moves up and down
            octopus.position.y = 5 + Math.sin(time * 1.5) * 1.5;
            octopus.rotation.y = Math.sin(time * 0.5) * 0.3;

            // Animate tentacles with wave-like motion
            tentacles.forEach((tentacle, index) => {
                const baseTime = time + index * 0.5;
                
                tentacle.segments.forEach((segment, segmentIndex) => {
                    const segmentTime = baseTime + segmentIndex * 0.3;
                    
                    // Create wave motion along tentacle
                    segment.rotation.x = Math.sin(segmentTime * 2) * 0.4;
                    segment.rotation.z = Math.cos(segmentTime * 1.5) * 0.3;
                    
                    // Add some lateral movement
                    const lateralOffset = Math.sin(segmentTime * 3) * 0.2;
                    segment.position.x = lateralOffset;
                    segment.position.z = Math.cos(segmentTime * 2.5) * 0.1;
                });
                
                // Move entire tentacle in swimming pattern
                tentacle.group.rotation.x = Math.sin(baseTime * 2) * 0.5;
                tentacle.group.rotation.z = Math.cos(baseTime * 1.8) * 0.4;
            });

            // Make octopus move forward slowly
            octopus.position.x = Math.sin(time * 0.3) * 10;
            octopus.position.z = Math.cos(time * 0.2) * 8;
        }

        function animate() {
            requestAnimationFrame(animate);
            
            const elapsedTime = clock.getElapsedTime();
            
            // Update water animation
            if (waterMaterial) {
                waterMaterial.uniforms.time.value = elapsedTime;
            }
            
            // Animate octopus
            animateOctopus(elapsedTime);
            
            // Update controls
            controls.update();
            
            // Render
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
                    <html lang="en">
                    <head>
                      <meta charset="UTF-8">
                      <meta name="viewport" content="width=device-width, initial-scale=1.0">
                      <title>Three.js Ocean Scene with Swimming Octopus</title>
                      <style>
                        /* Minimal CSS to make canvas fill viewport */
                        body, html {
                          margin: 0;
                          padding: 0;
                          overflow: hidden;
                          width: 100%;
                          height: 100%;
                          background: #001122;
                        }
                        canvas {
                          display: block;
                        }
                      </style>
                      <!-- Import map for module resolution -->
                      <script type="importmap">
                        {
                          "imports": {
                            "three": "https://unpkg.com/three@0.158.0/build/three.module.js",
                            "three/addons/": "https://unpkg.com/three@0.158.0/examples/jsm/"
                          }
                        }
                      </script>
                    </head>
                    <body>
                      <script type="module">
                        // Import Three.js and OrbitControls from CDN
                        import * as THREE from 'three';
                        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
                    
                        // Scene setup with fog for ocean depth
                        const scene = new THREE.Scene();
                        scene.fog = new THREE.Fog(0x001122, 20, 80);
                    
                        // Camera setup - positioned for good octopus view
                        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 200);
                        camera.position.set(0, 8, 20);
                    
                        // Renderer setup with antialiasing
                        const renderer = new THREE.WebGLRenderer({ antialias: true });
                        renderer.setSize(window.innerWidth, window.innerHeight);
                        renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Optimize for performance
                        document.body.appendChild(renderer.domElement);
                    
                        // OrbitControls for camera interaction
                        const controls = new OrbitControls(camera, renderer.domElement);
                        controls.enableDamping = true;
                        controls.dampingFactor = 0.05;
                        controls.screenSpacePanning = false;
                        controls.minDistance = 5;
                        controls.maxDistance = 50;
                        controls.maxPolarAngle = Math.PI / 2.2; // Prevent camera going under water
                    
                        // Soft lighting setup - hemisphere light for natural ocean lighting
                        const hemisphereLight = new THREE.HemisphereLight(0x87CEEB, 0x000080, 0.6);
                        scene.add(hemisphereLight);
                    
                        // Directional light simulating sunlight with rim-light effect
                        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
                        directionalLight.position.set(10, 15, 5);
                        directionalLight.castShadow = false; // Disabled for performance
                        scene.add(directionalLight);
                    
                        // Additional rim light for octopus
                        const rimLight = new THREE.DirectionalLight(0x87CEEB, 0.4);
                        rimLight.position.set(-10, 5, -5);
                        scene.add(rimLight);
                    
                        // Ocean water surface with animated shader
                        const oceanGeometry = new THREE.PlaneGeometry(200, 200, 128, 128);
                        const oceanMaterial = new THREE.ShaderMaterial({
                          uniforms: {
                            time: { value: 0 },
                            color1: { value: new THREE.Color(0x001122) },
                            color2: { value: new THREE.Color(0x003366) }
                          },
                          vertexShader: `
                            uniform float time;
                            varying vec2 vUv;
                            varying float vElevation;
                            
                            void main() {
                              vUv = uv;
                              vec4 modelPosition = modelMatrix * vec4(position, 1.0);
                              
                              // Create multiple wave patterns for realistic ocean movement
                              float elevation = sin(modelPosition.x * 0.05 + time * 0.8) * 0.3;
                              elevation += sin(modelPosition.z * 0.03 + time * 0.6) * 0.4;
                              elevation += sin(modelPosition.x * 0.08 + modelPosition.z * 0.05 + time * 1.2) * 0.2;
                              
                              modelPosition.y += elevation;
                              vElevation = elevation;
                              
                              vec4 viewPosition = viewMatrix * modelPosition;
                              vec4 projectedPosition = projectionMatrix * viewPosition;
                              
                              gl_Position = projectedPosition;
                            }
                          `,
                          fragmentShader: `
                            uniform vec3 color1;
                            uniform vec3 color2;
                            varying vec2 vUv;
                            varying float vElevation;
                            
                            void main() {
                              // Mix colors based on wave elevation for depth effect
                              vec3 color = mix(color1, color2, vElevation + 0.5);
                              gl_FragColor = vec4(color, 0.9);
                            }
                          `,
                          transparent: true,
                          side: THREE.DoubleSide
                        });
                        
                        const ocean = new THREE.Mesh(oceanGeometry, oceanMaterial);
                        ocean.rotation.x = -Math.PI / 2;
                        ocean.position.y = -2;
                        scene.add(ocean);
                    
                        // Octopus group for easy animation
                        const octopus = new THREE.Group();
                    
                        // Octopus body - main sphere with pink material
                        const bodyGeometry = new THREE.SphereGeometry(1.8, 32, 32);
                        const bodyMaterial = new THREE.MeshStandardMaterial({ 
                          color: 0xff69b4,
                          roughness: 0.4,
                          metalness: 0.1
                        });
                        const body = new THREE.Mesh(bodyGeometry, bodyMaterial);
                        body.position.y = 2;
                        octopus.add(body);
                    
                        // Octopus eyes - big expressive eyes
                        const eyeGeometry = new THREE.SphereGeometry(0.4, 24, 24);
                        const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff });
                        const pupilGeometry = new THREE.SphereGeometry(0.15, 16, 16);
                        const pupilMaterial = new THREE.MeshStandardMaterial({ color: 0x000000 });
                    
                        // Left eye
                        const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
                        leftEye.position.set(-0.6, 2.8, 1.4);
                        const leftPupil = new THREE.Mesh(pupilGeometry, pupilMaterial);
                        leftPupil.position.set(-0.6, 2.8, 1.65);
                        octopus.add(leftEye);
                        octopus.add(leftPupil);
                    
                        // Right eye
                        const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
                        rightEye.position.set(0.6, 2.8, 1.4);
                        const rightPupil = new THREE.Mesh(pupilGeometry, pupilMaterial);
                        rightPupil.position.set(0.6, 2.8, 1.65);
                        octopus.add(rightEye);
                        octopus.add(rightPupil);
                    
                        // Eight animated tentacles
                        const tentacles = [];
                        const tentacleGeometry = new THREE.CylinderGeometry(0.15, 0.25, 4, 16, 8);
                        const tentacleMaterial = new THREE.MeshStandardMaterial({ 
                          color: 0xff69b4,
                          roughness: 0.4,
                          metalness: 0.1
                        });
                    
                        for (let i = 0; i < 8; i++) {
                          const tentacle = new THREE.Mesh(tentacleGeometry, tentacleMaterial);
                          const angle = (i / 8) * Math.PI * 2;
                          const radius = 1.2;
                          
                          tentacle.position.set(
                            Math.cos(angle) * radius,
                            0.5,
                            Math.sin(angle) * radius
                          );
                          tentacle.rotation.z = Math.PI / 2;
                          tentacle.rotation.y = angle;
                          
                          octopus.add(tentacle);
                          tentacles.push(tentacle);
                        }
                    
                        // Position octopus in scene
                        octopus.position.y = 2;
                        scene.add(octopus);
                    
                        // Animation variables
                        const clock = new THREE.Clock();
                        let swimDirection = 0;
                    
                        // Main animation loop
                        function animate() {
                          requestAnimationFrame(animate);
                    
                          const elapsedTime = clock.getElapsedTime();
                    
                          // Animate ocean waves
                          oceanMaterial.uniforms.time.value = elapsedTime;
                    
                          // Octopus swimming motion - gentle up/down bobbing
                          octopus.position.y = 2 + Math.sin(elapsedTime * 1.5) * 0.5;
                    
                          // Octopus swimming across the ocean in a figure-8 pattern
                          const swimRadius = 8;
                          octopus.position.x = Math.sin(elapsedTime * 0.3) * swimRadius;
                          octopus.position.z = Math.sin(elapsedTime * 0.6) * swimRadius * 0.5;
                    
                          // Rotate octopus to face swimming direction
                          swimDirection += (Math.atan2(
                            Math.sin(elapsedTime * 0.3) * swimRadius,
                            Math.sin(elapsedTime * 0.6) * swimRadius * 0.5
                          ) - swimDirection) * 0.05;
                          octopus.rotation.y = swimDirection + Math.PI / 2;
                    
                          // Animate tentacles with swimming motion
                          tentacles.forEach((tentacle, index) => {
                            // Each tentacle waves with different phase for realistic swimming
                            const phase = elapsedTime * 3 + index * 0.8;
                            tentacle.rotation.x = Math.sin(phase) * 0.4;
                            tentacle.rotation.z = Math.PI / 2 + Math.cos(phase * 0.7) * 0.2;
                          });
                    
                          // Animate eyes to look around occasionally
                          const eyeLookTime = Math.sin(elapsedTime * 0.5) * 0.1;
                          leftPupil.position.x = -0.6 + eyeLookTime;
                          rightPupil.position.x = 0.6 + eyeLookTime;
                    
                          // Update controls and render
                          controls.update();
                          renderer.render(scene, camera);
                        }
                    
                        // Handle window resize for responsiveness
                        window.addEventListener('resize', () => {
                          const width = window.innerWidth;
                          const height = window.innerHeight;
                          
                          // Update camera aspect ratio
                          camera.aspect = width / height;
                          camera.updateProjectionMatrix();
                          
                          // Update renderer size
                          renderer.setSize(width, height);
                          renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                        });
                    
                        // Start the animation loop
                        animate();
                      </script>
                    </body>
                    </html>

<!doctype html>
                    <html lang="en">
                      <head>
                        <meta charset="utf-8" />
                        <meta name="viewport" content="width=device-width, initial-scale=1" />
                        <title>Three.js Octopus Ocean (ESM, Import Map)</title>
                        <style>
                          html, body { height: 100%; margin: 0; }
                          body { background: #06141d; overflow: hidden; }
                          canvas { display: block; }
                          .hint { position: fixed; left: 12px; bottom: 10px; color: #9ecae1; font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; opacity: 0.85; }
                        </style>
                    
                        <!-- Import map: pin Three.js to a stable version and route addons/ -->
                        <script type="importmap">
                          {
                            "imports": {
                              "three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
                              "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
                            }
                          }
                        </script>
                      </head>
                      <body>
                        <div class="hint">Drag to orbit • Scroll to zoom</div>
                    
                        <script type="module">
                          import * as THREE from 'three';
                          import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
                    
                          // Renderer
                          const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
                          renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
                          renderer.setSize(window.innerWidth, window.innerHeight);
                          renderer.outputColorSpace = THREE.SRGBColorSpace;
                          renderer.toneMapping = THREE.ACESFilmicToneMapping;
                          document.body.appendChild(renderer.domElement);
                    
                          // Scene & fog (ocean haze)
                          const scene = new THREE.Scene();
                          const fogColor = new THREE.Color(0x082230);
                          scene.background = fogColor.clone();
                          scene.fog = new THREE.FogExp2(fogColor, 0.045);
                    
                          // Camera & controls
                          const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 200);
                          camera.position.set(4, 2.2, 6);
                    
                          const controls = new OrbitControls(camera, renderer.domElement);
                          controls.enableDamping = true;
                          controls.target.set(0, 0.6, 0);
                    
                          // Lighting: hemisphere (soft ambient) + directional (sun)
                          const hemi = new THREE.HemisphereLight(0x6ec6ff, 0x12324a, 0.7);
                          scene.add(hemi);
                    
                          const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
                          dirLight.position.set(-5, 5, 2);
                          scene.add(dirLight);
                    
                          // Ocean surface: standard material with onBeforeCompile to add procedural waves
                          const waveUniforms = { uTime: { value: 0 } };
                          const waterMat = new THREE.MeshStandardMaterial({
                            color: 0x1b3a4b,
                            roughness: 0.92,
                            metalness: 0.0,
                            envMapIntensity: 0.5
                          });
                    
                          // Inject vertex displacement and normal from analytic derivatives for nice lighting
                          waterMat.onBeforeCompile = (shader) => {
                            shader.uniforms.uTime = waveUniforms.uTime;
                            shader.vertexShader = shader.vertexShader
                              .replace('#include <common>', `#include <common>\nuniform float uTime;\n\n// Two directional gerstner-like waves (lightweight)\nfloat waveHeight(vec2 p, out vec2 grad) {\n  // Wave 1\n  vec2 d1 = normalize(vec2(1.0, 0.2));\n  float A1 = 0.08;\n  float w1 = 2.0;\n  float s1 = 0.6;\n  float phase1 = dot(d1, p) * w1 + uTime * 0.8 * s1;\n  float h1 = A1 * sin(phase1);\n  float dh1 = A1 * w1 * cos(phase1);\n\n  // Wave 2\n  vec2 d2 = normalize(vec2(-0.4, 1.0));\n  float A2 = 0.05;\n  float w2 = 1.2;\n  float s2 = 0.5;\n  float phase2 = dot(d2, p) * w2 + uTime * 1.2 * s2;\n  float h2 = A2 * sin(phase2);\n  float dh2 = A2 * w2 * cos(phase2);\n\n  grad = vec2(dh1 * d1.x + dh2 * d2.x, dh1 * d1.y + dh2 * d2.y);\n  return h1 + h2;\n}\n\n// Compute object-space normal from height field gradient (global function)\nvec3 displacedNormal(vec3 pos) {\n  vec2 g;\n  float h = waveHeight(pos.xz, g);\n  vec3 n = normalize(vec3(-g.x, 1.0, -g.y));\n  return n;\n}`)
                              .replace('#include <beginnormal_vertex>', `\n// Use displaced normal computed from the height field\nvec3 objectNormal = displacedNormal(position);`)
                              .replace('#include <begin_vertex>', `\n// Displace vertex along Y by sum of waves\nvec2 gradTmp;\nfloat h = waveHeight(position.xz, gradTmp);\nvec3 transformed = vec3(position.x, position.y + h, position.z);`);
                          };
                    
                          const waterGeom = new THREE.PlaneGeometry(200, 200, 128, 128);
                          const water = new THREE.Mesh(waterGeom, waterMat);
                          water.rotation.x = -Math.PI / 2;
                          water.position.y = 0.0;
                          scene.add(water);
                    
                          // Octopus construction
                          const octopus = new THREE.Group();
                          scene.add(octopus);
                          octopus.position.set(0, 0.9, 0);
                    
                          // Body: sphere scaled, with rim-light effect using onBeforeCompile on Standard material
                          const bodyMat = new THREE.MeshStandardMaterial({ color: 0xff77aa, roughness: 0.7, metalness: 0.0, emissive: 0x000000 });
                          const rimUniforms = {
                            rimColor: { value: new THREE.Color(0xffb6d8) },
                            rimPower: { value: 2.0 },
                            rimStrength: { value: 0.6 }
                          };
                          bodyMat.onBeforeCompile = (shader) => {
                            shader.uniforms.rimColor = rimUniforms.rimColor;
                            shader.uniforms.rimPower = rimUniforms.rimPower;
                            shader.uniforms.rimStrength = rimUniforms.rimStrength;
                            // Declare rim uniforms in fragment shader global scope
                            shader.fragmentShader = shader.fragmentShader
                              .replace('#include <common>', `#include <common>\nuniform vec3 rimColor;\nuniform float rimPower;\nuniform float rimStrength;`)
                              .replace('#include <emissivemap_fragment>', `#include <emissivemap_fragment>\n// Simple rim-light: brighter edges opposite the view direction\nfloat rim = 1.0 - saturate(dot(normalize(normal), normalize(vViewPosition)));\nrim = pow(rim, rimPower);\nvec3 rimCol = rimColor * rim * rimStrength;\ntotalEmissiveRadiance += rimCol;`);
                          };
                    
                          const bodyGeom = new THREE.SphereGeometry(0.6, 32, 24);
                          const body = new THREE.Mesh(bodyGeom, bodyMat);
                          body.scale.set(1.0, 0.85, 1.0); // squash slightly
                          body.castShadow = false;
                          body.receiveShadow = false;
                          octopus.add(body);
                    
                          // Eyes: two white spheres with darker pupils
                          const eyeWhiteMat = new THREE.MeshStandardMaterial({ color: 0xffffff, roughness: 0.3, metalness: 0.0 });
                          const pupilMat = new THREE.MeshStandardMaterial({ color: 0x222222, roughness: 0.6, metalness: 0.0 });
                          const eyeWhiteGeom = new THREE.SphereGeometry(0.14, 20, 16);
                          const pupilGeom = new THREE.SphereGeometry(0.06, 16, 12);
                    
                          function createEye(offsetX) {
                            const eye = new THREE.Group();
                            const white = new THREE.Mesh(eyeWhiteGeom, eyeWhiteMat);
                            const pupil = new THREE.Mesh(pupilGeom, pupilMat);
                            white.position.set(0, 0, 0);
                            pupil.position.set(0, 0, 0.11);
                            eye.add(white);
                            eye.add(pupil);
                            eye.position.set(offsetX, 0.02, 0.5);
                            eye.rotation.x = -0.05; // slight tilt
                            return eye;
                          }
                    
                          const leftEye = createEye(-0.22);
                          const rightEye = createEye(0.22);
                          octopus.add(leftEye, rightEye);
                    
                          // Tentacles: 8 chains of short tapered cylinders, animated by sinusoidal rotations
                          const tentacles = [];
                          const tentacleCount = 8;
                          const segmentCount = 12;
                          const segmentLength = 0.18;
                          const baseRadius = 0.11;
                    
                          const makeTentacle = (angle) => {
                            const root = new THREE.Group();
                            // Position roots around the body base circle
                            const r = 0.45;
                            root.position.set(Math.cos(angle) * r, -0.35, Math.sin(angle) * r);
                            root.rotation.y = angle + Math.PI; // face outward
                            octopus.add(root);
                    
                            let parent = root;
                            const segments = [];
                            for (let i = 0; i < segmentCount; i++) {
                              const t = i / (segmentCount - 1);
                              const radiusTop = THREE.MathUtils.lerp(baseRadius * 0.9, baseRadius * 0.2, t);
                              const radiusBottom = THREE.MathUtils.lerp(baseRadius * 0.8, baseRadius * 0.1, t);
                              const geom = new THREE.CylinderGeometry(radiusTop, radiusBottom, segmentLength, 10, 1, true);
                              const mat = new THREE.MeshStandardMaterial({ color: 0xff88bb, roughness: 0.8, metalness: 0.0 });
                              const seg = new THREE.Mesh(geom, mat);
                              seg.position.y = -segmentLength * 0.5;
                              const pivot = new THREE.Group();
                              pivot.position.y = -segmentLength * 0.5;
                              parent.add(seg);
                              seg.add(pivot);
                              parent = pivot;
                              segments.push({ seg, pivot });
                            }
                            return { root, segments };
                          };
                    
                          for (let i = 0; i < tentacleCount; i++) {
                            const ang = (i / tentacleCount) * Math.PI * 2;
                            tentacles.push(makeTentacle(ang));
                          }
                    
                          // Gentle bobbing animation for the body
                          const clock = new THREE.Clock();
                          let swimDir = new THREE.Vector3(1, 0, 0.5).normalize();
                          let swimSpeed = 0.35; // units per second
                          const swimBounds = 4.5;
                    
                          function animate() {
                            const t = clock.getElapsedTime();
                            waveUniforms.uTime.value = t;
                    
                            // Bobbing
                            const bob = Math.sin(t * 2.0) * 0.05;
                            octopus.position.y = 0.9 + bob;
                            octopus.rotation.y = Math.sin(t * 0.5) * 0.15;
                    
                            // Swim across ocean; bounce within bounds
                            octopus.position.addScaledVector(swimDir, swimSpeed * clock.getDelta());
                            if (Math.abs(octopus.position.x) > swimBounds) { swimDir.x *= -1; }
                            if (Math.abs(octopus.position.z) > swimBounds) { swimDir.z *= -1; }
                            controls.target.lerp(octopus.position.clone().setY(0.6), 0.05);
                    
                            // Tentacle undulation: phase along segments with per-tentacle offset
                            const basePhase = t * 2.8;
                            for (let i = 0; i < tentacles.length; i++) {
                              const tent = tentacles[i];
                              const tentPhase = basePhase + i * 0.55;
                              for (let j = 0; j < tent.segments.length; j++) {
                                const u = j / (tent.segments.length - 1);
                                const amp = (1.0 - u) * 0.45; // taper motion towards tip
                                const speed = 1.8;
                                const phase = tentPhase - u * 2.5;
                                const rx = Math.sin(phase * speed) * amp * 0.5;
                                const rz = Math.cos(phase * speed * 0.9) * amp * 0.35;
                                tent.segments[j].pivot.rotation.x = rx;
                                tent.segments[j].pivot.rotation.z = rz;
                              }
                            }
                    
                            controls.update();
                            renderer.render(scene, camera);
                            requestAnimationFrame(animate);
                          }
                    
                          requestAnimationFrame(animate);
                    
                          // Resize handling
                          window.addEventListener('resize', () => {
                            camera.aspect = window.innerWidth / window.innerHeight;
                            camera.updateProjectionMatrix();
                            renderer.setSize(window.innerWidth, window.innerHeight);
                          });
                        </script>
                      </body>
                    </html>

Three.js Comparison between GPT5 & Sonnet4 Using Octocode MCP

Sonnet4 + Octocode MCP

Sonnet4 - no Octocode

GPT5 + Octocode MCP

GPT5 - no Octocode

Used Prompt

GPT5 Generated Code

Sonnet4 + Octocode MCP Generated Code

Sonnet4 - no Octocode Generated Code

GPT5 + Octocode MCP Generated Code