With the release of Marshall’s new party speaker Bromley 750, they hired Animech to produce two types of realtime 3D as well as rendered images. This was the second time we got to make a wide range of marketing materials for one of their product launches (the first being Heston 120). This project provided some new challenges, and allowed us to improve both workflows and the quality of our work.
eTail model
We started the project as we’ve done with previous Marshall products. They needed a realtime 3D model of Bromley 750 that their retailers can use on their online stores. As with other products the file size of the entire model, including textures, must be smaller than 5 MB. This was a major challenge for us with Bromley since it’s such a large product. For these eTail models we can only typically use a single 2K texture. A 2K texture on a small product, say a pair of earbuds, gives it plenty of resolution for every detail. A 2K texture on a large party speaker such as this? Now details have to compete over the limited resolution. It was clear to us early on that we were gonna have to use every trick in the book to make the eTail model work.
On previous models we’ve made use of symmetry to reuse texture details from one side to the other. On this product we really leaned into this process. We also reused texture details on every screw, knob, and button we could. To make the UV packing better, we had to minimize the number of small islands. One example is that we removed the holes on the grills and replaced them with a tiling hole pattern texture. This helped us in another way, namely lowering the file size of the mesh itself. The holes alone were around 100K triangles, so they had to go. Another optimization we did was on the front grill. By flattening it and letting the lines pass through each other we saved an additional 20K triangles. Finally we biased the UVs to give certain pieces more resolution, such as the UI panel, handle, and buttons.
We exported the models as GLB and USDZ, just like previous products. Sidenote: if you ever need to export glTF models and care about its size – use Draco compression. It typically lowers the mesh filesize by like 80%, it’s amazing.
Showroom
Marshall wanted a realtime model on their own website too. While their retailers get a portable GLB, Marshall themselves get a whole application. The usecase for this Showroom is to highlight different features of the product and show its functions. Previous Showroom applications we’ve done for Marshall have had a static model. With Bromley 750 we added animations to open lids, and show the front lights blinking.
On previous products we’ve been able to reuse the eTail model for Showroom, just with higher resolution textures. But Bromley 750 needed a specific Showroom model for a few reasons. First and foremost, the eTail model had been stripped of many details which we wanted to have in the Showroom model. The model also needed to support various animations which the eTail model didn’t do. We also wanted higher quality materials, and even using a 4K texture for the model wasn’t enough, which meant we had to break out parts into their own texture sets.
To get higher quality materials we opted to use tiling textures for some of the larger areas such as the leather, back plastic, and the powdercoated parts. We combine these tiling materials with baked AO and normals, added using Detail maps. With those parts taken care of, the rest of the model could share a 4K texture. Since we textured the eTail model using Substance Painter’s Physical size feature along with 3D projections such as Triplanar, we could mostly reuse the Painter file from the eTail model and automatically get high resolution textures for the Showroom model.
Marshall wanted to show Bromley’s input and outputs, as well as the replaceable battery. These are covered up by lids, so when clicking on their hotspots we had to animate them opening. This was done using regular skeletal animations. It was a bit challenging to get correct tough, since the lids are made of a bendable rubber material which squishes and stretches. After a bit of weight painting we got it to look pretty close to the real thing. Another feature of Bromley 750 is its lights on the front. When clicking on the Front Lights hotspot, the lights start to blink in a specific, but slightly randomized sequence. While it doesn’t exactly match the real thing, it’s pretty darn close. We didn’t receive the algorithm from the customer, so we had to reverse engineer it ourselves.
The first thing we did was to break down the problem. We filmed the real light sequence using a static camera, which revealed the length of a loop is always 60 seconds, and that each loop is actually randomized. Using the video file, we sampled a few lights and plotted their luminosity over time. This revealed an interesting pattern: every light turns on and off a few times at half intensity, before turning fully on around 45 seconds into the sequence. Of course, each light is randomized, with varying number of times it turns on and off, when it does so, and for how long it stays on. With this understanding, we could start implementing the light sequence in code.
Each light is a texture plane, which uses an emissive material set to Screen blending mode. On Initialize() the code generates a linear Curve for each light, with both the start and end value at 0. Then it generates keys for the full-intensity peak around 3/4 into the sequence. Next it generates 1-4 half intensity peaks along the entire curve. When adding a peak though, it needs to check that it doesn’t overlap with a previous peak. If it does, it pushes the keys to the nearest free time, or simply removes the peak if that’s not possible. We also added some other randomized peaks and dips, which the plotted sequence showed. It was very helpful to have it as a reference. Finally during Update(), each light simply samples its curve based on how far along the 60 second sequence we are, and multiplies the value with the material’s emissive intensity. Below is an example of the light sequence.
Exploded View
A new-ish type of deliverable from us to Marshall is the Exploded View. It started with Heston 120, and now Bromley 750 is the next product to get this treatment. It’s a short image sequence which the user scrolls through to open up and reveal the insides of the speaker. We render these images using a traditional offline render workflow.
When we made the Exploding View for Heston 120, we created a library of reusable materials. For Bromley 750, we expanded upon this library by improving the structure, realism, detail quality, as well as adding a bunch of new materials. The library lets us reuse materials on Marshall’s products, ensuring a consistent look as well as making our work more efficient.
Another improvement to the materials was the edge-rounding we apply. Instead of having duplicate materials for each edge-rounding radius, the materials now support a variable edge radius set per object. The way it works is, each material has a VRayEdgesTex in the bump slot. We set its radius to 1.0cm, and in the Multiplier slot, we plug in the OSL map Named Attribute. If we write an attribute name, say corner_radius, the map will look for this property on each object. So if we enter a User Defined Property on an object that says corner_radius=0.05, the map will find this value, and multiply it with the edge-rounding radius of 1.0cm, giving it a 0.05cm edge radius.
The only issue with User Defined Properties is that they can’t be multi-edited, or linked between objects. In order to solve this, we created a custom modifier where users can enter User Defined Properties. This modifier can be copied, pasted, toggled, removed, and instanced between objects, allowing users to easily control the edge radius of an entire scene.
Here are some crisp close-up renders from the Exploded Views model:
Closing thoughts
I was responsible for all the 3D work on the different Bromley 750 applications. I also got to reverse engineer and program the front light animation in Showroom. For the Exploded View, I created the variable edge-rounding function, and developed the custom 3ds Max modifier to help us work with User Defined Properties. I was also responsible for post processing the Exploded View image sequence.
This was one of the most challenging, but rewarding, Marshall products to date. The hard 5 MB limit for the eTail model challenged me to think outside the box on how to make the most efficient model as possible. The Showroom application didn’t have the same size limit, however it needed high quality materials to look good in every camera angle, which required the model to be set up in a specific way. The front light animation was satisfying to reverse engineer, and interesting to implement. Finally, the Exploded View allowed me to create even more realistic materials and lighting effects. It’s also rewarding to come up with better workflows, such as the User Defined Properties modifier.
You can view the Showroom application on Bromley 750’s product page, by pressing the 3D button in the gallery. If you scroll down a bit on the product page, you’ll also see the Exploded View animation. As for the eTail model, Marshall’s retailers should be starting to implementing it on their side in the near future.