This is where WebGL and Three.js come in. Together, they make it possible to bring interactive 3D graphics to online stores, directly inside the browser, without plugins or external apps.

In this article, we’ll break down how these technologies work, why they’re transforming eCommerce, and what developers need to know to build the next generation of interactive shopping experiences.

Table of Contents

• What is WebGL?

• How Three.js Makes WebGL Developer-Friendly

• How to Build a Simple 3D Configurator Demo

  • Step 1: Setting Up the HTML File

  • Step 2: Adding Styles with CSS

  • Step 3: Creating the Scene in Script.js

  • Step 4: Adding a Product (Cube)

  • Step 5: Making the Cube Interactive

  • Step 6: Making It Responsive

• The Role of 3D in eCommerce

• Real-World Use Cases

• Technical Challenges & Best Practices

• The Future of 3D in Online Stores

• Conclusion

💡 Prerequisites

To get the most out of this article, you should have:

• A basic understanding of JavaScript (variables, functions, imports).

• Familiarity with HTML and the DOM (since we’ll be rendering into a <canvas>).

• Curiosity about graphics programming – no deep math or shader knowledge is required.

• Node.js and npm installed (if you want to try out the Three.js examples locally).

If you’ve never worked with 3D graphics before, don’t worry. We’ll keep the examples simple and focus on concepts

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API that allows you to render interactive 2D and 3D graphics in the browser using the computer’s GPU. Unlike older browser technologies (think Flash), WebGL is built directly into modern browsers, so users don’t need to install anything extra.

At its core, WebGL is based on OpenGL ES (a subset of the OpenGL specification), and it provides developers with a low-level API to work with shaders, vertices, and rendering pipelines.

A minimal WebGL example might look like this:

<canvas id="glcanvas" width="640" height="480"></canvas> 

<script> 
  const canvas = document.getElementById("glcanvas"); 
  const gl = canvas.getContext("webgl"); 

  if (!gl) { 
    alert("WebGL not supported by your browser"); 
  } 

  // Clear the canvas with a background color 
  gl.clearColor(0.0, 0.5, 0.5, 1.0); 
  gl.clear(gl.COLOR_BUFFER_BIT); 
</script>

If you run this snippet, it simply fills a canvas with a teal color. Not too exciting – but it’s happening on the GPU, and from here, you can go all the way to photorealistic 3D.

How Three.js Makes WebGL Developer-Friendly

While WebGL is powerful, it’s also verbose. Developers need to manage shaders, buffer objects, and projection matrices manually, which is a steep learning curve for most front-end engineers.

This is where Three.js shines. It’s a popular JavaScript library that wraps around WebGL and provides a higher-level, developer-friendly API for working with 3D graphics. Instead of hundreds of lines of setup code, you can get a 3D scene up and running in a few lines.

Here’s a simple Three.js example that creates a rotating cube:

import * as THREE from 'three'; 

// Create a scene 
const scene = new THREE.Scene(); 

// Camera setup 
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

// Renderer 
const renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

// Add a cube 
const geometry = new THREE.BoxGeometry(); 
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); 
const cube = new THREE.Mesh(geometry, material); 
scene.add(cube); 

camera.position.z = 5; 

// Animation loop 
function animate() { 
  requestAnimationFrame(animate); 
  cube.rotation.x += 0.01; 
  cube.rotation.y += 0.01; 
  renderer.render(scene, camera); 
} 
animate();

With just a few lines, you have an interactive 3D object rendered inside the browser. This ease of use is why Three.js has become the go-to library for developers building interactive product experiences online.

How to Build a Simple 3D Configurator Demo

To understand how these technologies translate to real-world online shopping, let’s build a tiny demo: a 3D box that rotates and changes color when a button is clicked. Think of it as the most basic version of a product previewer.

Step 1: Setting Up the HTML File

Let’s start with an index.html file. This file will contain a <canvas> function for rendering our 3D scene and a few buttons that act like product “options” (for example, choosing red, blue, or green).

<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>3D Product Demo</title> 
  <style> 
    body { 
      margin: 0; 
      overflow: hidden; 
      font-family: sans-serif; 
      background: #f5f5f5; 
    } 
    canvas { display: block; } 
    .controls { 
      position: absolute; 
      top: 20px; 
      left: 20px; 
      display: flex; 
      gap: 10px; 
    } 
    button { 
      padding: 10px 16px; 
      font-size: 14px; 
      border: none; 
      border-radius: 4px; 
      cursor: pointer; 
      color: white; 
    } 
    .red { background: #e63946; } 
    .blue { background: #0077ff; } 
    .green { background: #2a9d8f; } 
    button:hover { opacity: 0.8; } 
  </style> 
</head> 
<body> 
  <!-- Controls to change product colors --> 
  <div class="controls"> 
    <button class="red" onclick="setColor(0xe63946)">Red</button> 
    <button class="blue" onclick="setColor(0x0077ff)">Blue</button> 
    <button class="green" onclick="setColor(0x2a9d8f)">Green</button> 
  </div> 

  <!-- Import Three.js library --> 
  <script src="https://cdn.jsdelivr.net/npm/three@0.154/build/three.min.js"></script> 
  <script src="script.js"></script> 
</body> 
</html>

Here’s what we’ve done:

• Added a few styled buttons for color options.

• Set up some basic CSS for layout and design.

• Included the Three.js library from a CDN.

• Linked to a script.js file where we’ll write our 3D logic.

Step 2: Creating the Scene in Script.js

Now create a file called script.js. This is where we’ll build the 3D world.

The first step is to create a scene, a camera, and a renderer. Think of it like this: the scene is the stage, the camera is the viewpoint, and the renderer is what draws everything to the screen.

// Create the scene 
const scene = new THREE.Scene(); 

// Set up a camera 
const camera = new THREE.PerspectiveCamera( 
  75, window.innerWidth / window.innerHeight, 0.1, 1000 
); 
camera.position.z = 3; 

// Create a WebGL renderer 
const renderer = new THREE.WebGLRenderer({ antialias: true }); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement);

Step 3: Adding a Product (Cube)

For simplicity, we’ll use a cube to represent our product. Later, this could be any 3D model (like a shoe, sofa, or banner stand).

// Create a cube geometry 
const geometry = new THREE.BoxGeometry(1, 1, 1); 

// Apply a material (blue color by default) 
let material = new THREE.MeshStandardMaterial({ color: 0x0077ff }); 

// Combine geometry and material into a mesh 
const cube = new THREE.Mesh(geometry, material); 

// Add the cube to the scene 
scene.add(cube); 

// Add lighting so we can see the cube properly 
const light = new THREE.DirectionalLight(0xffffff, 1); 
light.position.set(2, 2, 5).normalize(); 
scene.add(light);

Step 4: Animating the Cube

We want the cube to spin. This creates the feeling of an interactive product preview. Here’s how we can make that happen:

function animate() { 
  requestAnimationFrame(animate); 

  cube.rotation.x += 0.01; 
  cube.rotation.y += 0.01; 

  renderer.render(scene, camera); 
} 
animate();

Now, when you load the page, the cube will rotate continuously.

Step 5: Adding Interactivity

Let’s connect the color buttons to the cube. Each button calls the setColor() function with a hex code.

function setColor(hex) { 
  cube.material.color.setHex(hex); 
}

Now, when you click “Red,” “Blue,” or “Green,” the cube changes color instantly, like switching between product variations.

Step 6: Making It Responsive

Finally, let’s ensure the canvas resizes properly on different devices.

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

We now have a mini product/Object previewer:

• A 3D object (cube) that rotates like a real product.

• Buttons that change its color, simulating product options.

• Responsive rendering across screen sizes.

This is, of course, a simplified demo, but the same principles are used in real-world ecommerce experiences.

Example of 3D Configurator

The Role of 3D in eCommerce

Why should online stores invest in 3D at all? The answer lies in user engagement. Studies show that customers are far more likely to convert when they can interact with products in detail. Instead of scrolling through flat images, they rotate, zoom, and even customize products in real-time.

From a developer’s perspective, integrating 3D isn’t just about “making it pretty.” It’s about:

• Reducing return rates (customers know exactly what they’re buying).

• Increasing time-on-site (3D models encourage exploration).

• Supporting customization workflows (colors, materials, engravings).

Real-World Use Cases

There are a few areas where WebGL + Three.js are already changing eCommerce. 3D product configurators utilize Three.js to enable customers to customize products interactively, changing colors and textures.

For example, 3D product reviews where online stores let customers rotate couches, cars, or appliances to see every angle. Virtual try-ons are also becoming popular among eyewear and fashion brands. They use AR + WebGL to let customers virtually try items online. Online printers and manufacturers also let customers configure their products in 3D before purchasing them.

Technical Challenges & Best Practices

Building interactive 3D experiences isn’t without hurdles. Developers need to think about:

• Performance optimization – Compressing models, using Level of Detail (LOD), and reducing texture sizes.

• Cross-device compatibility – Ensuring 3D experiences work smoothly on both high-end desktops and mobile devices.

• Loading times – Using lazy loading for textures and assets.

• User experience – Smooth navigation controls, fallback images for unsupported devices, and accessible interactions.

The Future of 3D in Online Stores

We’re only scratching the surface of what’s possible. Some trends shaping the future include:

• WebGPU: a next-generation graphics API that promises even better performance than WebGL.

• Augmented Reality (AR): blending real and digital worlds with WebXR.

• AI-powered customization: automatically generating product variations or suggestions.

Conclusion

WebGL and Three.js are powering a new wave of interactive online shopping. What used to require native apps or heavy plugins is now achievable directly in the browser, giving customers richer experiences and businesses higher conversion rates.

For developers, experimenting with WebGL and Three.js opens the door to a whole range of applications, from simple product previews to full-fledged 3D configurators. And as browser technology evolves, the line between online shopping and real-world interaction will only continue to blur.

WebAssembly is blazing fast for number crunching, game engines, and many other things, but nothing can quite compare to the extreme parallelization of shaders, running on the GPU.

This is especially so if you’re looking to do some image processing. Usually, on the web, this is done through WebGL, but how would you access its APIs when using WebAssembly?

Setting up

We’ll very briefly go through setting up an example project, then we’ll look at how an image can be loaded as a texture. Then, in a separate context, we’ll apply an edge detection GLSL shader to the image.

All the code is in a repo here, if you’d prefer to jump straight to that. Note that you have to serve your files via a server for WebAssembly to work.

As a prerequisite, I’m going to assume you already have your WebAssembly project set up. If not, you can check out the article here on how to do it, or just fork the repo linked above.

For demoing the below code, I’m using a basic html file which serves only to load an image, get its imageData, and pass it to the WebAssembly code using the ccallArrays function.

The HTML file with the preview input image

As for the C++ code, there is an emscripten.cpp file which manages and routes method calls to context instances created in the Context.cpp file. The Context.cpp file is structured as follows:

Compilation

WebGL is based on and follows the OpenGL ES (Embedded Systems) spec, which is a subset of OpenGL. When compiling, emscripten will map our code to the WebGL API.

There are a couple of different versions we can target. OpenGL ES 2 maps to WebGL 1, whereas OpenGL ES 3 maps to WebGL 2. By default you should target WebGL 2, as it comes with some free optimizations and improvements.

To do this, we must add the USE_WEBGL2=1 flag to the compilation.

If you are planning to use some OpenGL ES features not present in the WebGL spec, you can use the FULL_ES2=1 and/or FULL_ES3=1 flags.

To be able to handle large textures/images, we can also add the ALLLOW_MEMORY_GROWTH=1 flag. This removes the memory limit of the WebAssembly program, at the cost of some optimizations.

If you know ahead of time how much memory you’ll need, you can instead use the TOTAL_MEMORY=X flag, where X is the memory size.

So we’re going to end up with something like this:

emcc -o ./dist/appWASM.js ./dev/cpp/emscripten.cpp -O3 -s ALLOW_MEMORY_GROWTH=1 -s USE_WEBGL2=1 -s FULL_ES3=1 -s WASM=1 -s NO_EXIT_RUNTIME=1 -std=c++1z

Finally, we need the following imports, in our code:

#include <emscripten.h>#include <string>#include <GLES2/gl2.h>#include <EGL/egl.h>extern "C" {       #include "html5.h" // emscripten module}

Implementation

If you have previous experience with WebGL or OpenGL, then this bit may seem familiar.

When writing OpenGL, the API will not work until you create a context. This is normally done using platform specific APIs. However, the web is not platform bound, and we can instead use an API integrated into OpenGL ES.

The majority of the legwork, however, can be more easily implemented using emscripten’s APIs in the html5.h file. The functions we’re interested in are:

• _emscripten_webgl_createcontext — This will instantiate a context for the given canvas and attributes
• _emscripten_webgl_destroycontext — This is needed for cleaning up memory when destructing context instances
• _emscripten_webgl_make_contextcurrent — This will assign and switch which context WebGL will render to

Create the context

To start implementing, you have to first create the canvas elements in your JavaScript code. Then, when using the emscripten_webgl_create_context function, you pass the id of the canvas as the first parameter, with any configurations as the second. The emscripten_webgl_make_context_current function is used to set the new context as the one currently in use.

Next, the vertex shader (to specify coordinates) and the fragment shader (to calculate the colour at each pixel) are both compiled, and the program is built.

Finally, the shaders are attached to the program, which is then linked, and validated.

Though that sounds like a lot, the code for this is as follows:

The shader compilation is done within the CompileShader helper function which performs the compilation, printing out any errors:

Create the shader

The shader code for this example is minimal, and it just maps each pixel to itself, to display the image as a texture:

You can access the canvas’ context in JavaScript in addition to the context in the C++ code, but it must be of the same type, ‘webgl2’. While defining multiple context types does nothing when just using JavaScript, if you do it before creating the webgl2 context in WebAssembly, it will throw an error when the code execution gets there.

Loading the texture

The first thing to do when applying the shader is to call the emscripten_webgl_make_context_currentfunction to make sure that we are still using the correct context, and glUseProgramto make sure we are using the correct program.

Next, we get the indices of the GLSL variables (similar to getting a pointer) via theglGetAttribLocationand glGetUniformLocation functions, so we can assign our own values to those locations. The function used to do that depends on the value type.

For example, an integer, such as the texture location needs glUniform1i, whereas a float would need glUniform1f. This is a good resource for seeing which function you need to use.

Next, we get the texture object via glGenTextures, assign it as the active texture, and load the imageData buffer. The vertex and indices buffers are then bound, to set the boundaries of the texture to fill the canvas.

Finally, we clear the existing content, define our remaining variables with data, and draw to the canvas.

The texture being loaded

Detect edges using a shader

To add another context, where the edge detection is done, we load a different fragment shader (which applies the Sobel filter), and we bind the width and height as extra variables, in the code.

To pick between different fragment shaders, for the different contexts, we just add an if-else statement in the constructor, like so:

And to load the width and height variables, we add the following to the run function:

If you run into an error similar toERROR: GL_INVALID_OPERATION : glUniform1i: wrong uniform function for type, then there’s a mismatched assignment function for the given variable.

One thing to look out for when sending the imageData, is to use the correct heap, unsigned integer (the Uint8Array typed array). You can learn more about those here, but if you’re using the ccallArray function, set the ‘heapIn’ config to “HEAPU8”, as seen above.

If the type is not correct, the texture will still load, but you’re going to be seeing strange renderings, like these:

Conclusion

We’ve gone through a mini “Hello World!”-style project to show how to load textures and apply GLSL shaders to them in WebAssembly. The complete code is hosted on GitHub here, for further reference.

For a real project, you may want to add some additional error handling. I omitted it here, for clarity.

It may also be more efficient (in the above example) to share data such as the imageData texture between contexts. You can read more about this and more here.

For some further reading, you can check out this link for common mistakes, or you can look through some demo projects in emscripten’s glbook folder, on GitHub.

To see WebGL being used in a WebAssembly project, you can check out the dev branch on jsNet, a web based deep learning framework, where I’ll be working on moving heavier computations onto shaders, over the next few weeks (support for WebGL compute shaders via OpenGL ES 3.1 can’t come soon enough ? ).

Update

To see what GPU compute using shaders would look like in WebAssembly, you can check out the repo for GPGPU, a small library I’m working on, with both JavaScript and WebAssembly versions.