Texturing Ribbon asset

Hello,

I’m attempting to create a 3D picture frame which has taught me about extrusions and ribbon meshes. I found some existing extrusion code online and adapted it for my needs. I’m now able to generate all the base assets and lighting for my visualization.

I hit a snag when attempting to texture the moulding around my frame. I have an existing texture (that I can’t manipulate unfortunately). I need to find a way to repeat the texture around just the surface of the model. The surface meaning the flat area as you look directly at the picture. The edges of the frame will have a flat colour and the back will be different.

Here’s what I’ve got so far: Babylon.js Playground

What I’m aiming for is to recreate a look similar to this:

So really I had two main questions:

  1. How do I segment surfaces on the ribbon mesh (front, side and back?)
  2. How do I ensure that my stick texture is following the frame surface?

I’m starting to question if a ribbon is best for this use. It however makes defining the profile and extrusion very clean and easy. So I’d like to keep it, but not if it’s going to make targeting the face of the moulding easier.

It seems in my version the texture is being stretched/wrapped along the mesh. It looks blurry as a result. Any suggestions or guidance on the best way to solve this? I’ve tried a few things but there isn’t much information on textures with ribbon mesh.

Thanks!

D

Hey @dbase!

First of all, welcome to the Babylon family! We’re thrilled to have you here!

Second! Cool application! I love it!

I’m not super familiar with how the ribbon mesh works, but it seems like you have a couple options on how the texture is applied to a ribbon mesh:
https://doc.babylonjs.com/how_to/ribbon_tutorial#closed-shapes-normals-or-textures

As applying different materials/textures to different faces, this document should hopefully help a bit:
https://doc.babylonjs.com/how_to/createbox_per_face_textures_and_colors

Thanks for the welcome Pirate. I’ve been using Three for years for basic 3D application work like this but I really wanted to give Babylon a serious go. The community is growing so fast, it’s very exciting!

I already reviewed all the ribbon mesh texturing docs and wasn’t able to devise a solution from it. Pretty stuck here. All the texturing options don’t focus on how to bend/wrap/organize the mesh.

I think we’ll have to call in the big guns to help us on this one. @sebavan can you lend us your brain?

1 Like

Thanks. I appreciate the comment.

I’m not aiming for full photo-realism but if anyone has suggestions on lighting to make it feel similar to the above rendering, I’d appreciate it. I’ve implemented a sort of three-key light but having a heck of a time balancing the intensity. I also have a box with glass layered on top of the “artwork” but it reflects the light-source too strongly. So many things to experiment with, very exciting.

So about the lighting setup let me add @PatrickRyan our in house artist who is awesome at this :slight_smile:

For the ribbon generation I ll summon our best Maths ppl from the community @JohnK and @jerome.

Haha, I love that this board has summoning powers.

For further details, this solution is going to be built into a full fledged frame customiser and visualiser for a big brand. We’re just perfecting the rendering. Might make a great demo of Babylon in action! The really neat part is you get to buy the product after you visualize it!

While I wait I’m trying to tweak the ribbon extrusion to support bezier points so that I can create some really interesting product geometry.

On the rendering side, Using PBR materials might be a good idea to simulate even varnish and so on :slight_smile:

Will give a proper consideration tomorrow morning. In the meantime would consider building each of the four sections of the frame using Create Parametric Shapes - Babylon.js Documentation

This would allow different textures for front, back and sides and use of uScale and vScale if necessary.

1 Like

@dbase, I agree with @sebavan that converting to PBR material from our standard material will give you more power for your materials and a simple way to author a metal frame rail. The problem is that you will need to provide a couple more textures to make it work. The other thing that is a bit off in your frame mesh is your UVs. Unfortunately, if you have a texture like the one on your mesh, you need to be very careful with the UVs to make sure everything aligns correctly.

Since it’s faster for me to illustrate in DCC tools, I’m going to do that so you can see what I mean. The first thing I noticed is that the ribbon you are using is angled in UV space rather than aligning parallel to the texture. You can see this because of the angled highlight which is actually the highlight that runs along the left edge of your image.

Since you only have this one section of image and nothing else for the edge or back, we need to get a little creative with our UV layout. The front and back of the rail needs to mirror each other to keep the highlight on the outside of the rail. The side is a little more tricky. That’s because you will see a seam if you apply the texture to the side where the dark pixels on the right of the image fall next to the bright pixels of the left of the image. This sketch shows what it may look like with some visible seams where the contrast is highest:

So instead, you will want to pull a UV trick like this:

I quickly threw this rail together in Maya to illustrate, but you can see that I added a loop in the middle of the rail thickness. The coordinates in the image show you where each UV lies in UV space. So for the front and back you can see they are pretty standard with the miter moved in from the top and bottom of UV space about 0.07 unit.

The center loop is where it gets a little tricky. You align the front and back UVs of the face to the U0 axis and the center loop to the U1 axis. What this does is flip the texture in the center with the left edge of the face using the left pixels in the image, the center part of the face using pixels at the right edge of the image, then reversing the texture to end with the right edge of the face using the left pixels of the face. This creates a bit of a mirror in the middle which can be obvious if the texture has angles in it, but with primarily parallel detail, this should be minimal.

The final UV layout looks like this:

What this does is to bring the highlights into the edges of the rail and fakes a bit of a bevel on the edge.

Now, there is one more thing to be concerned with to use the PBR material and that is the need to supply a metallic, roughness, and normal texture to go with your base color texture. Ideally all textures are authored together for best results, but if you only have a base color texture, you can somewhat simulate the others, but it’s not going to be exact. You will need something like Materialize to generate the other textures. These solutions tend to work better to generate large deltas in height rather than subtle detail, so you will want to experiment with the settings.

Once you have the other textures, you can assemble your material to apply to your mesh. I would probably go the route of starting with a box and altering the positions of the vertices that represent the miter and then duplicating the mesh to make the frame. This way you can assign one material to a rail and clone it for the others.

The only other thing you will want for your PBR material would be an environment which can be made from any HDR image and we just made a video about how to convert HDR files for your scenes.

So you can see what I created, I saved out a glb of the rail I used to illustrate this with the computed textures. You can drag and drop the linked file into the sandbox to inspect the material and see how it is created. I know this is a lot, so please shoot back any questions you have about the process.

frameRailPBR.zip (6.1 KB)

4 Likes

@JohnK yeah I suspected it would come down to using ExtrudePolygon. The UV maps are actually possible if I did that. In the version I posted ribbons don’t seem flexible enough with UV options. The question though is how can I get the corner cuts? I suppose I could generate the extruded profile, cut the corners into right angles, duplicate the mesh then merge it? Should I even merge them or will that make the UV mapping more difficult to apply as a single mesh?

@PatrickRyan wow, thank you so much for taking the time to write that up! Now I understand why the texture was distorted/wrapping incorrectly. Once I get the new ExtrudedPolygon/geometry working I’ll attempt the PBR material. I’ll need to come up with a glb that will work for a number of other frames (something generic) because the goal of this app is you can design any frame. Once I experiment with it I’ll let you know where I netted out.

=)

2 Likes

@dbase here is the ExtrudedPolygon approach

https://www.babylonjs-playground.com/#2CU0P1#1

then applying the faceUV and faceColours technique used on the frame to the picture as well https://www.babylonjs-playground.com/#2CU0P1#2

with light and rotation https://www.babylonjs-playground.com/#2CU0P1#3

Next step is PBR for frame as suggested by @PatrickRyan, that I will leave you to play with.

4 Likes

Wow, thanks for all the advice guys. I’m pulling all the solutions together. I’m going to use @JohnK’s method for generating the box extrusion. I’ll have to swap out the box with a more complex polygon at some point as not all frames are 4 surfaces. Some are are concave/convex and others have complex repetitive surfaces which luckily I have CAD assets for.

My biggest mistake was trying to perform the extrusion manually. Honestly I thought it was necessary because I assumed the ear cut had to be manual. After you posted the details I went digging and uncovered the fact that ear cut is magically included in Playground (and needs to be imported in app manually). For beginners this was confusing, I’m wondering if ExtrudePolygon should have an option to enable/disable it OR some other solution to make it more obvious?

For lighting and texturing I’m diving into the PBR. I had used it originally but didn’t totally understand how the metallic/roughness attributes effected it. Now that I’ve seen @PatrickRyan solution this makes way more sense.

Thanks so much guys! I wasn’t expecting this much support and I wanted to communicate that new Babylon community members like myself TRULY appreciate the dedication and effort you put in.

I may not be able to include ALL these suggestions as there are other requirements in performance, environment and even the client approving the “look”. So let’s see if I get to include all the toys hehe.

5 Likes