Browsers are becoming more capable. The web is more powerful than ever. And serverless is the fastest-growing cloud service model. There must be a way

Serverless 3D WebGL rendering with ThreeJS

submited by

Style Pass

2021-07-25 19:30:07

Browsers are becoming more capable. The web is more powerful than ever. And serverless is the fastest-growing cloud service model. There must be a way to take advantage of these technologies for rendering 3D content for cheap at scale.

To keep things simple we'll be using React Three Fiber and Drei, a collection of helpers and abstractions around React Three Fiber.

Now, we'll need to load a 3D model. We'll be loading a glTF asset, a transmission format that's evolving into the "JPG of 3D assets". More on that in future posts!

Let's add the GLB (binary version of glTF) to the /public directory. You could also pass a GLB hosted elsewhere to the useGLTF hook.

⚠️ Note that we're creating a new api directory and not using the existing pages/api. This is to avoid functions sharing resources and exceeding the serverless function size limit on Vercel (where we'll be deploying the app to). More info here and here.

⚠️ Also, in order for serverless functions to be picked up from the root directory you'll need to run vercel dev locally to test the API route (as opposed to npm run dev).