Product presentation
Explore shape and proportions from multiple viewpoints.
← All technologies
WebGL · BIG FISH
WebGL development and interactive 3D
Interactive 3D for websites and configurators: shape, material and movement support the product story. We design the experience together with performance and accessibility.
BIG FISH / WEBGL
01Model and materials
02Buffers and shaders
03Camera and input
04Rendered frame
Design × technology × your workflow
PRODUCT CAPABILITIES
Technology becomes
a working product.
Configuration choices
Materials and variations appear in a controllable scene.
Visual explanation
Graphics help explain the structure and behaviour of a complex product.
INTERACTIVE EXAMPLE
Try the workflow.
See the outcome.
Rotate an illustrative 3D enclosure and change its finish. The scene uses WebGL; when unavailable, a description and fallback illustration remain accessible.
Educational example with fictional data. Actions stay in your browser. This models the workflow; it is not a connected CMS, server or database.
WebGL
Schematic enclosure view
The example is ready to explore.
WORKFLOW ARCHITECTURE
Every step has
a responsibility.
01
Model and materials
02
Buffers and shaders
03
Camera and input
04
Rendered frame
| Layer | Outcome |
|---|---|
| Interface | Input, limits, loading and errors are clear. Keyboard operation is available. |
| Data | Values have an owner, format and freshness rules. |
| Release | Critical journeys, backups and recovery have been checked. |
BIG FISH · WebGL
Explore the product from every angle.
WebGL 3D configurator development starts with the selection journey. View angle, material and configuration should help people assess the product: controls show available actions, the selected option and its relation to the model.
For interactive WebGL presentations, we plan touch controls, scene loading and a static alternative. Three-dimensional graphics support the website’s content, while key specifications remain readable outside the 3D scene.
PRACTICAL GUIDE
Building a product
with WebGL.
Architecture, constraints and testable workflows. The exact configuration follows the project requirements.
WebGL / 01
Purpose before effects
Define what the user needs to understand: product shape, finish options or a mechanism. 3D must not hide specifications or the enquiry action. An opening screen may need only one controlled interaction; a complex configurator deserves its own structure. Keep essential information available as text when the scene cannot run.
Acceptance check
Specifications remain available without 3D.
WebGL / 02
Models and assets
Engineering models are often too detailed for browser use. Prepare geometry, textures and detail levels for the intended screen and devices. Remove invisible detail and inspect file sizes and material loading. Optimisation must preserve meaningful product features; marketing illustrations and technically precise models have different acceptance criteria.
Acceptance check
Simplification preserves important proportions.
WebGL / 03
Camera and controls
Design rotation, zoom and viewing limits around the product’s form. Controls should not capture ordinary page scrolling without a clear reason. Provide accessible buttons or sliders alongside gestures. Allow resetting the view. The demo uses manual camera control rather than compulsory continuous rotation.
Acceptance check
Rotation is keyboard-accessible.
const gl = canvas.getContext('webgl');
if (!gl) showFallback();
// Compile shaders, create buffers and draw the scene.WebGL / 04
Materials and lighting
Colour depends on lighting, surroundings and the user’s display. Compare finishes under consistent scene conditions. Metal, plastic and glass need different rendering models. Where exact matching matters for purchase, explain screen-visualisation limits and provide another way to confirm the material.
Acceptance check
The chosen material has a text label.
WebGL / 05
Shaders and GPU resources
WebGL uses graphics resources and shader programs. Check compilation, available capabilities and context-creation failures. Avoid recreating buffers and programs every frame unnecessarily. Release resources when a scene is removed, and provide a fallback or recovery path after context loss.
Acceptance check
Context loss shows a fallback.
WebGL / 06
Device performance
Measure load on real phones and laptops. Resolution, object count, textures and effects influence memory and frame time. Cap pixel density and suspend optional animation outside the visible area. Set project-specific targets rather than promising identical frame rates on every device.
Acceptance check
Resolution does not overload mobile devices.
WebGL / 07
Accessibility and fallback
Canvas does not replace a semantic product description. Keep the name, specifications, chosen finish and price in ordinary HTML. Respect reduced-motion settings and keyboard control. When JavaScript or WebGL is unavailable, show a useful image and retain the enquiry path. Graphics failure must not break the entire page.
Acceptance check
Meaningful content remains without JavaScript.
WebGL / 08
Configurator integration
Connect material and configuration selections to a parameter model, not merely a screen colour. The server validates combinations and pricing before an order. Keep 3D-asset versions aligned with the product catalogue. Acceptance includes theme changes, context loss, screen rotation and extended use without increasing memory consumption.
Acceptance check
The server rejects an invalid combination.
FAQ
Before we start
Is this a ready-made product?
No. The example illustrates a proposed workflow for WebGL. We design the production system around your requirements, data and integrations.
Can we retain our current systems?
We first review their interfaces, data ownership and constraints. The result may be an integration, a phased migration or a focused replacement of one component.
What do we receive at handover?
The agreed deliverables include design assets, source code, environment requirements and operational instructions. Scope, ownership and support are recorded in the contract.
Let’s design your product
Tell us about your workflow, audience and existing systems. We will define the interface, technical boundaries and delivery stages.