Draw With Metal - Coca-Cola Bottle 3D Renderer

A 3D rendering project featuring an iconic Coca-Cola contour bottle, implemented with both native Metal (macOS) and WebGPU (browser) support.

Features

• 🍾 Detailed 3D Coca-Cola Bottle - Classic contour shape with authentic label design
• 🎨 High-Quality Label - Sharp, detailed label with ribbon patterns, borders, and color gradients
• 💻 Native Metal Rendering - C++ Metal implementation for macOS
• 🌐 WebGPU Browser Rendering - Modern web graphics API support
• 📦 3D Model Export - Export to OBJ, glTF/GLB formats (convertible to FBX)

Project Structure

cube-project/
├── main.cpp              # Native Metal C++ renderer
├── definitions.metal     # Metal shader code
├── Makefile             # Build configuration
├── web/                  # WebGPU browser version
│   ├── index.html       # Main web page
│   ├── cube.js          # WebGPU rendering logic
│   └── test-webgpu.html  # WebGPU compatibility test
├── web-server/          # HTTP streaming server
└── README.md            # This file

Native Metal Version (macOS)

Requirements

• macOS with Metal support
• Xcode Command Line Tools
• C++ compiler

Build & Run

make
./cube

WebGPU Version (Browser)

Requirements

• Modern browser with WebGPU support:
  • Chrome 113+ / Edge 113+
  • Safari 16.4+
  • Firefox (experimental)

Run

1. Open web/index.html in a WebGPU-compatible browser
2. Or serve via a local web server:

   cd web
   python3 -m http.server 8000
   # Then visit http://localhost:8000

Features

• Real-time 3D rotation
• Detailed Coca-Cola label with:
  • White border stripes
  • Dynamic ribbon wave pattern
  • Gold accent lines
  • Text area zone
• Export to OBJ, glTF/GLB formats

Export 3D Models

The web version includes export buttons:

• Export OBJ - Universal 3D format
• Export glTF - Modern web standard (preserves vertex colors)
• Export FBX - Instructions for converting via Blender/Maya

Converting to FBX

1. Export glTF from the web interface
2. Import .glb file into Blender
3. Export as FBX from Blender

Technical Details

• Metal Shaders: MSL (Metal Shading Language)
• WebGPU Shaders: WGSL (WebGPU Shading Language)
• Matrix Math: Column-major matrices
• Geometry: Procedurally generated bottle with 64 segments
• Label Detail: 20+ rings in label area for sharp definition

License

This project is for educational purposes.