3D Coin Visual Enhancement (THREE.JS)
Budget: $30 – $250 USD
## The job
Improve the visual quality of 5 rotating 3D coins in a working Three.js system: remove the blur / soft "muddy" look and enhance overall sharpness and relief quality — especially on the moose (back) face and at large / zoomed sizes.
Important context: the coin is NOT a 3D model file. It is a Three.js CylinderGeometry whose faces are **painted procedurally onto canvas textures at runtime** by our renderer module. The bronze field, lettering, star band, and motifs are all drawn in code; the **only external image input is the moose artwork**. So "better coins" means improving some combination of:
1. **The moose source asset** — the current moose image is a colour illustration with a blue water splash that has to be masked out at runtime and limits relief depth. The top of the renderer source contains a full spec for the IDEAL replacement asset: a single-colour bronze relief silhouette, transparent background, 1600 by 1600 pixels or larger, no water/splash. A purpose-built asset like that is the single biggest quality win available.
2. **The relief pipeline in the renderer** — the smoothing/blur passes, relief shading, texture-size handling, and device-pixel-ratio handling.
3. **Texture resolution strategy** — grid coins bake at an automatic texture size of at least 1280 pixels; the zoom overlay forces 2560 pixels and swaps in a 2400-pixel double-resolution moose image (which is an AI upscale of the base, not a true hi-res original — part of the blur problem).
You will receive a complete, organized code package after award: the live production renderer (source of truth), all texture inputs and alternates, a standalone viewer page that renders all 5 levels plus a hi-res zoom coin, the thin React wrappers for integration context, the older legacy harness for reference only, and the approved face-layout design sample. A README covers the package layout and how to serve the viewer locally.
## Constraints — please keep these behaviors intact
- **5 levels, distinct titles/motifs, IDENTICAL metal field.** Every level's field texture must stay plain — the bronze backdrop is pixel-identical across levels; only the title legend and motif differ. Do not add per-level field variants.
- **Hover behavior:** hover → coin turns to face the user and pauses; cursor away → slow spin resumes. Hover never speeds the spin up.
- **No decorative frame.** The coin sits clean — no ring, glow halo, or pedestal around it.
- Keep the public API and the ESM module shape unchanged so it drops straight back into the app (exact export names are in the README).
- Target the Three.js version the app uses (a recent 0.16x release, pinned in the viewer; exact version in the README).
## Deliverables
- Updated renderer module (and/or new moose texture assets at the same filenames as the existing base and double-resolution images).
- If you replace the moose art, follow the spec at the top of the renderer source and supply the largest master you produce (1600-pixel-plus square, transparent PNG).
- Full editable source files for any new artwork (sculpt/working files, not just exports).
- Before/after screenshots at grid size (roughly 260 pixels) AND zoom size (560 pixels and up).
## Ownership & IP
- Work-for-hire. On final payment, we own all resulting code, sculpts, textures, and source files outright — all rights, title, and interest transfer to us.
- Full editable source files are required — not just baked/exported maps.
- The finished coin assets may not be resold or reused publicly without our written permission.
## Required Skills & Experience
- Expert Three.js (state years) — materials, textures, lighting, performance
- Strong digital sculpting / relief modeling (ZBrush, Blender, or equivalent) — coin/medal/bas-relief work is a major plus
- PBR texturing and map baking (normal, displacement, roughness, AO)
- Comfortable reading and extending an existing vanilla-JS codebase without breaking its API
- Typography sensitivity — embossed lettering must stay crisp and legible at 200-to-320-pixel display sizes
## What to Include in Your Application
Applications missing any of the following will not be considered:
1. 2 or 3 portfolio pieces most relevant to this job — ideally coins, medals, jewelry, or bas-relief sculpting rendered in real-time WebGL (attach images or use your profile portfolio; per platform rules, please do not paste external links in the proposal)
2. A live WebGL demo we can view, shared through the platform's allowed channels
3. A short (2-to-4 sentence) description of the technique you'd use to remove the blur and hit high relief quality in real time (e.g., baked normal and displacement from a sculpt, texture resolution strategy)
4. Your estimated timeline and price for all 5 coins
5. Written confirmation you can deliver full editable source files and agree to the ownership terms above
6. Availability (hours per week) and earliest start date
## Timeline
- Desired timeline: One week
Improve the visual quality of 5 rotating 3D coins in a working Three.js system: remove the blur / soft "muddy" look and enhance overall sharpness and relief quality — especially on the moose (back) face and at large / zoomed sizes.
Important context: the coin is NOT a 3D model file. It is a Three.js CylinderGeometry whose faces are **painted procedurally onto canvas textures at runtime** by our renderer module. The bronze field, lettering, star band, and motifs are all drawn in code; the **only external image input is the moose artwork**. So "better coins" means improving some combination of:
1. **The moose source asset** — the current moose image is a colour illustration with a blue water splash that has to be masked out at runtime and limits relief depth. The top of the renderer source contains a full spec for the IDEAL replacement asset: a single-colour bronze relief silhouette, transparent background, 1600 by 1600 pixels or larger, no water/splash. A purpose-built asset like that is the single biggest quality win available.
2. **The relief pipeline in the renderer** — the smoothing/blur passes, relief shading, texture-size handling, and device-pixel-ratio handling.
3. **Texture resolution strategy** — grid coins bake at an automatic texture size of at least 1280 pixels; the zoom overlay forces 2560 pixels and swaps in a 2400-pixel double-resolution moose image (which is an AI upscale of the base, not a true hi-res original — part of the blur problem).
You will receive a complete, organized code package after award: the live production renderer (source of truth), all texture inputs and alternates, a standalone viewer page that renders all 5 levels plus a hi-res zoom coin, the thin React wrappers for integration context, the older legacy harness for reference only, and the approved face-layout design sample. A README covers the package layout and how to serve the viewer locally.
## Constraints — please keep these behaviors intact
- **5 levels, distinct titles/motifs, IDENTICAL metal field.** Every level's field texture must stay plain — the bronze backdrop is pixel-identical across levels; only the title legend and motif differ. Do not add per-level field variants.
- **Hover behavior:** hover → coin turns to face the user and pauses; cursor away → slow spin resumes. Hover never speeds the spin up.
- **No decorative frame.** The coin sits clean — no ring, glow halo, or pedestal around it.
- Keep the public API and the ESM module shape unchanged so it drops straight back into the app (exact export names are in the README).
- Target the Three.js version the app uses (a recent 0.16x release, pinned in the viewer; exact version in the README).
## Deliverables
- Updated renderer module (and/or new moose texture assets at the same filenames as the existing base and double-resolution images).
- If you replace the moose art, follow the spec at the top of the renderer source and supply the largest master you produce (1600-pixel-plus square, transparent PNG).
- Full editable source files for any new artwork (sculpt/working files, not just exports).
- Before/after screenshots at grid size (roughly 260 pixels) AND zoom size (560 pixels and up).
## Ownership & IP
- Work-for-hire. On final payment, we own all resulting code, sculpts, textures, and source files outright — all rights, title, and interest transfer to us.
- Full editable source files are required — not just baked/exported maps.
- The finished coin assets may not be resold or reused publicly without our written permission.
## Required Skills & Experience
- Expert Three.js (state years) — materials, textures, lighting, performance
- Strong digital sculpting / relief modeling (ZBrush, Blender, or equivalent) — coin/medal/bas-relief work is a major plus
- PBR texturing and map baking (normal, displacement, roughness, AO)
- Comfortable reading and extending an existing vanilla-JS codebase without breaking its API
- Typography sensitivity — embossed lettering must stay crisp and legible at 200-to-320-pixel display sizes
## What to Include in Your Application
Applications missing any of the following will not be considered:
1. 2 or 3 portfolio pieces most relevant to this job — ideally coins, medals, jewelry, or bas-relief sculpting rendered in real-time WebGL (attach images or use your profile portfolio; per platform rules, please do not paste external links in the proposal)
2. A live WebGL demo we can view, shared through the platform's allowed channels
3. A short (2-to-4 sentence) description of the technique you'd use to remove the blur and hit high relief quality in real time (e.g., baked normal and displacement from a sculpt, texture resolution strategy)
4. Your estimated timeline and price for all 5 coins
5. Written confirmation you can deliver full editable source files and agree to the ownership terms above
6. Availability (hours per week) and earliest start date
## Timeline
- Desired timeline: One week
Related categories:
3D Rendering
3D Modelling
3D Animation
3D Design
Lighting
Web Development
Blender
Three.js
3D Visualization
3D Graphic Design