Models 44

Nemotron 3.5 Lightning (free)

by NVIDIAReasoning1 console error
Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time
46.6 s
Cost
$0
Output tokens
3,482
Spent thinking
0 tokens
Speed
75.8 tok/s
Console errors
1
First token after
663 ms
First visible text after
663 ms
Prompt tokens
584
Code size
11.2 KB
Finish reason
stop
Served by
Nvidia
Model id
nvidia/nemotron-3.5-lightning:free
Reasoning sent
{"effort":"none"}
Max output
32,000 tokens
Generated
Nov 9, 2026

Console errors

Caught in the first 3 seconds after load, in a sandboxed iframe like the one above.

THREE.WebGLProgram: Shader Error 0 - VALIDATE_STATUS false

Material Name: 
Material Type: ShaderMaterial

Program Info Log: Vertex shader is not compiled.
VERTEX

ERROR: 0:76: '*' : wrong operand types - no operation '*' exists that takes a left-hand operand of type 'highp float' and a right operand of type 'const int' (or there is no acceptable conversion)

  71:         attribute float size;
  72:         uniform float time;
  73:         varying float vAlpha;
  74:         void main() {
  75

What it was asked

The prompt
Build a low-poly 3D scene of a campfire in a forest clearing at night, with Three.js in a single HTML file. Load Three.js only through this import map (do not use any other URL or version): <script type="importmap">{"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}</script> Requirements: - A ground with a few low-poly rocks and logs around a campfire in the center. - At least 30 low-poly trees placed randomly around the clearing (not on the fire). - The campfire has animated flames and a warm point light that flickers and casts shadows. - Sparks rising from the fire as a simple particle system. - A dark night sky with stars and a moon, plus fog that fades the distant trees. - OrbitControls to look around, with limits so the camera stays above the ground. - The renderer fills the window and handles resizing correctly.
System prompt, sent with every prompt
You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 329 lines

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Low-Poly Campfire Scene</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="importmap">
    {"imports":{"three":"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js","three/addons/":"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"}}
  </script>

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

    // Scene setup
    const scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x000000, 20, 80);

    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(10, 12, 15);

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

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.maxPolarAngle = Math.PI / 2.1;
    controls.minPolarAngle = Math.PI / 5;
    controls.enableDamping = true;

    // Ground
    const groundGeo = new THREE.PlaneGeometry(50, 50, 10, 10);
    const groundMat = new THREE.MeshStandardMaterial({ color: 0x2a1f10 });
    const ground = new THREE.Mesh(groundGeo, groundMat);
    ground.rotation.x = -Math.PI / 2;
    ground.receiveShadow = true;
    scene.add(ground);

    // Rocks
    function createRock(x, z) {
      const sizes = [2, 2.5, 3, 3.5];
      const geo = new THREE.IcosahedronGeometry(sizes[Math.floor(Math.random()*sizes.length)], 1);
      const mat = new THREE.MeshStandardMaterial({ color: 0x5a5a5a });
      const rock = new THREE.Mesh(geo, mat);
      rock.position.set(x, 0, z);
      rock.scale.setScalar(0.5 + Math.random() * 0.5);
      rock.castShadow = true;
      rock.receiveShadow = true;
      rock.userData = { type: 'rock' };
      return rock;
    }

    // Logs
    function createLog(x, z) {
      const length = 4 + Math.random() * 4;
      const geo = new THREE.CylinderGeometry(0.4, 0.4, length, 12, 1);
      const mat = new THREE.MeshStandardMaterial({ color: 0x8b5a2b });
      const log = new THREE.Mesh(geo, mat);
      log.position.set(x, length / 2, z);
      log.rotation.z = Math.random() * Math.PI * 2;
      log.castShadow = true;
      log.receiveShadow = true;
      log.userData = { type: 'log' };
      return log;
    }

    // Tree - low poly
    function createTree(x, z) {
      // Trunk
      const trunkGeo = new THREE.CylinderGeometry(0.3, 0.6, 5, 8, 1);
      const trunkMat = new THREE.MeshStandardMaterial({ color: 0x8b4513 });
      const trunk = new THREE.Mesh(trunkGeo, trunkMat);
      trunk.position.set(x, 2.5, z);
      trunk.castShadow = true;
      trunk.receiveShadow = true;

      // Leaves - low poly sphere
      const leafGeo = new THREE.IcosahedronGeometry(2 + Math.random() * 1.5, 0);
      const leafMat = new THREE.MeshStandardMaterial({ color: 0x228b22 });
      const leaves = new THREE.Mesh(leafGeo, leafMat);
      leaves.position.set(x, 7, z);
      leaves.scale.setScalar(0.8 + Math.random() * 0.4);
      leaves.castShadow = true;
      leaves.receiveShadow = true;

      const group = new THREE.Group();
      group.add(trunk);
      group.add(leaves);
      group.position.set(x, 0, z);
      group.userData = { type: 'tree' };
      return group;
    }

    // Rocks and logs around fire
    for (let i = 0; i < 8; i++) {
      const angle = (Math.PI * 2 / 8) * i;
      const radius = 6 + Math.random() * 4;
      const x = Math.cos(angle) * radius;
      const z = Math.sin(angle) * radius;
      if (Math.random() > 0.5) scene.add(createRock(x, z));
      else scene.add(createLog(x, z));
    }

    // Trees (at least 30, not on fire)
    for (let i = 0; i < 35; i++) {
      let x, z;
      let tooClose = true;
      while (tooClose) {
        x = (Math.random() - 0.5) * 40;
        z = (Math.random() - 0.5) * 40;
        tooClose = Math.abs(x) < 4 && Math.abs(z) < 4;
      }
      scene.add(createTree(x, z));
    }

    // Campfire center
    const fireCenter = new THREE.Group();
    scene.add(fireCenter);

    // Fire base
    const fireGeo = new THREE.ConeGeometry(0.5, 1.5, 8);
    const fireMat = new THREE.MeshBasicMaterial({ color: 0xff6600 });
    const fireBase = new THREE.Mesh(fireGeo, fireMat);
    fireBase.position.y = 0.75;
    fireCenter.add(fireBase);

    // Flame layers - animated
    const flameCount = 6;
    const flames = [];

    for (let i = 0; i < flameCount; i++) {
      const height = 1.5 + (i / flameCount) * 2;
      const geo = new THREE.ConeGeometry(0.3 + Math.random() * 0.3, height, 6);
      const color = new THREE.Color().setHSL(0.06 + Math.random() * 0.02, 0.7, 0.4 - i * 0.05);
      const mat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 0.8 - i * 0.1 });
      const flame = new THREE.Mesh(geo, mat);
      flame.position.y = height / 2;
      flame.rotation.z = Math.random() * Math.PI * 2;
      flame.userData = { baseY: flame.position.y, speed: 0.02 + Math.random() * 0.03 };
      flames.push(flame);
      fireCenter.add(flame);
    }

    // Point light - flickering campfire
    const fireLight = new THREE.PointLight(0xffa500, 1.5, 20);
    fireLight.position.set(0, 3, 0);
    fireLight.castShadow = true;
    fireLight.shadow.mapSize.width = 256;
    fireLight.shadow.mapSize.height = 256;
    fireLight.shadow.radius = 4;
    scene.add(fireLight);

    // Sparks particle system
    const sparkCount = 50;
    const sparkGeometry = new THREE.BufferGeometry();
    const sparkPositions = new Float32Array(sparkCount * 3);
    const sparkColors = new Float32Array(sparkCount * 3);
    const sparkSizes = new Float32Array(sparkCount);

    for (let i = 0; i < sparkCount * 3; i++) sparkPositions[i] = 0;
    for (let i = 0; i < sparkCount; i++) {
      sparkColors[i * 3 + 0] = 1.0;
      sparkColors[i * 3 + 1] = 0.5;
      sparkColors[i * 3 + 2] = 0.1;
      sparkSizes[i] = 0.1 + Math.random() * 0.3;
    }

    sparkGeometry.setAttribute('position', new THREE.BufferAttribute(sparkPositions, 3));
    sparkGeometry.setAttribute('color', new THREE.BufferAttribute(sparkColors, 3));
    sparkGeometry.setAttribute('size', new THREE.BufferAttribute(sparkSizes, 1));

    const sparkMaterial = new THREE.ShaderMaterial({
      uniforms: {
        time: { value: 0 }
      },
      vertexShader: `
        attribute float size;
        uniform float time;
        varying float vAlpha;
        void main() {
          vAlpha = 1.0 - size * 0.5;
          vec4 mvPosition = modelViewMatrix * vec4(position + normal * sin(time + position.y * 10) * 0.1, 1.0);
          gl_PointSize = size * (300.0 / -mvPosition.z);
          gl_Position = projectionMatrix * mvPosition;
        }
      `,
      fragmentShader: `
        uniform float time;
        varying float vAlpha;
        void main() {
          float dist = distance(gl_PointCoord, vec2(0.5));
          if (dist > 0.5) discard;
          float alpha = smoothstep(0.5, 0.0, dist) * vAlpha;
          gl_FragColor = vec4(1.0, 0.5, 0.1, alpha);
        }
      `,
      transparent: true,
      blending: THREE.AdditiveBlending,
      depthWrite: false
    });

    const sparks = new THREE.Points(sparkGeometry, sparkMaterial);
    sparks.position.set(0, 1, 0);
    fireCenter.add(sparks);

    // Sky with stars and moon
    const skyGeo = new THREE.SphereGeometry(50, 32, 32);
    skyGeo.scale(-1, 1, 1);
    const skyMat = new THREE.MeshBasicMaterial({ color: 0x0a0a20, side: THREE.BackSide });
    const sky = new THREE.Mesh(skyGeo, skyMat);
    scene.add(sky);

    // Stars
    const starCount = 100;
    const starGeom = new THREE.BufferGeometry();
    const starPos = new Float32Array(starCount * 3);
    const starSize = new Float32Array(starCount);

    for (let i = 0; i < starCount; i++) {
      const radius = 20 + Math.random() * 30;
      const theta = Math.random() * Math.PI * 2;
      const phi = Math.acos(2 * Math.random() - 1);
      starPos[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
      starPos[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
      starPos[i * 3 + 2] = radius * Math.cos(phi);
      starSize[i] = 0.5 + Math.random() * 1.5;
    }

    starGeom.setAttribute('position', new THREE.BufferAttribute(starPos, 3));
    starGeom.setAttribute('size', new THREE.BufferAttribute(starSize, 1));

    const starMat = new THREE.ShaderMaterial({
      uniforms: {},
      vertexShader: `
        attribute float size;
        varying float vAlpha;
        void main() {
          vAlpha = 0.8;
          vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
          gl_PointSize = size * (300.0 / -mvPosition.z);
          gl_Position = projectionMatrix * mvPosition;
        }
      `,
      fragmentShader: `
        varying float vAlpha;
        void main() {
          float dist = distance(gl_PointCoord, vec2(0.5));
          if (dist > 0.5) discard;
          gl_FragColor = vec4(1.0, 1.0, 1.0, vAlpha);
        }
      `,
      transparent: true,
      blending: THREE.AdditiveBlending,
      depthWrite: false
    });

    const stars = new THREE.Points(starGeom, starMat);
    scene.add(stars);

    // Moon
    const moonGeo = new THREE.SphereGeometry(2, 16, 16);
    const moonMat = new THREE.MeshStandardMaterial({ color: 0xf0f0f0, emissive: 0x404040 });
    const moon = new THREE.Mesh(moonGeo, moonMat);
    moon.position.set(-8, 8, -8);
    moon.receiveShadow = false;
    scene.add(moon);

    // Moon glow
    const moonLight = new THREE.PointLight(0xffffff, 0.3, 10);
    moonLight.position.copy(moon.position);
    scene.add(moonLight);

    // Ambient light
    const ambientLight = new THREE.AmbientLight(0x202030, 0.5);
    scene.add(ambientLight);

    // Resize handler
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    // Animation loop
    let time = 0;
    function animate() {
      time += 0.016;
      requestAnimationFrame(animate);

      // Animate flames
      flames.forEach((flame, i) => {
        const t = time * flame.userData.speed * (i + 1);
        flame.position.y = flame.userData.baseY + Math.sin(t) * 0.1;
        flame.scale.y = 0.8 + Math.sin(t * 1.3) * 0.1;
      });

      // Flicker light intensity
      fireLight.intensity = 1.5 + Math.sin(time * 3) * 0.3 + Math.random() * 0.2;

      // Sparks animation
      sparkMaterial.uniforms.time.value = time;
      const sparkPosAttr = sparkGeometry.attributes.position;
      for (let i = 0; i < sparkCount; i++) {
        const y = Math.sin(time * 2 + i) * 0.3;
        sparkPosAttr.setY(i, y);
      }
      sparkGeometry.attributes.position.needsUpdate = true;

      // Rotate sky slowly
      sky.rotation.y += 0.001;

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

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