Project 17: Custom Shader Sphere

3D Engineer

Builds on these lessons

Step 1 of 2

Project

A Custom Shader

shaderMaterial takes raw GLSL — the vertex shader positions vertices, the fragment shader decides each pixel's color.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

const vertexShader = `
  void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;
const fragmentShader = `
  void main() {
    gl_FragColor = vec4(0.4, 0.7, 1.0, 1.0);
  }
`;

export default function Scene() {
  return (
    <Canvas>
      <mesh>
        <sphereGeometry args={[1, 32, 32]} />
        <shaderMaterial vertexShader={vertexShader} fragmentShader={fragmentShader} />
      </mesh>
    </Canvas>
  );
}

← Previous Next →