Sign in to follow this  

Rounded Box

Recommended Posts

Hi everyone. First of all I would like to apologize in case this topic was already discussed here but I just couldn't find an answer anywhere. I am new to BABYLON, WEBGL and also 3D Programming in general so please excuse me if my queries seem not to complicated.


My question is: Can a rounded box be created in BABYLON (without the use of other 3d tools and export to BABYLON) ?


What I am trying to achieve is creating a dice that has rounded corners. I have created a box using BABYLON.Mesh.CreateBox and used subMeshes to add 6 images with the dice numbers as diffuseTextures for each face of the Dice. This looks ok, it's just that I need the dice to have rounded corners and edges. Can anybody please help me with this ? Thanks a lot in advance.


This is the code I used to create my dice:


  this.dice = new BABYLON.Mesh.CreateBox('dice', 3, BjsApp.scene);
  this.dice.showBoundingBox = false;
  var f = new BABYLON.StandardMaterial("material0", BjsApp.scene);
  f.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace1.png', BjsApp.scene);
  var ba = new BABYLON.StandardMaterial("material1", BjsApp.scene);
  ba.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace2.png', BjsApp.scene);
  var l = new BABYLON.StandardMaterial("material2", BjsApp.scene);
  l.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace3.png', BjsApp.scene);
  var r = new BABYLON.StandardMaterial("material3", BjsApp.scene);
  r.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace4.png', BjsApp.scene);
  var t = new BABYLON.StandardMaterial("material4", BjsApp.scene);
  t.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace5.png', BjsApp.scene);
  var bo = new BABYLON.StandardMaterial("material5", BjsApp.scene);
  bo.diffuseTexture = new BABYLON.Texture('assets/images/DiceFace6.png', BjsApp.scene);
  var multi = new BABYLON.MultiMaterial("nuggetman", BjsApp.scene);
  this.dice.subMeshes = [];
  var verticesCount = this.dice.getTotalVertices();
  this.dice.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, 6, this.dice));
  this.dice.subMeshes.push(new BABYLON.SubMesh(1, 1, verticesCount, 6, 6, this.dice));
  this.dice.subMeshes.push(new BABYLON.SubMesh(2, 2, verticesCount, 12, 6, this.dice));
  this.dice.subMeshes.push(new BABYLON.SubMesh(3, 3, verticesCount, 18, 6, this.dice));
  this.dice.subMeshes.push(new BABYLON.SubMesh(4, 4, verticesCount, 24, 6, this.dice));
  this.dice.subMeshes.push(new BABYLON.SubMesh(5, 5, verticesCount, 30, 6, this.dice));
  this.dice.material = multi;

Share this post

Link to post
Share on other sites

Hello and welcome, 


Don't worry, there is no stupid questions :) Only answers!


You should use CSG : (look at the source code)


CSG stands for Constructive Volume Solid Geometry, and can be used to "add" or "subtract" meshes.

In your case, you should use a sphere and a box:



Share this post

Link to post
Share on other sites

Hi Temechon,


Thank you for your reply. I did manage to use CSG to create the rounded box I was looking for, however, now I have a problem with designing the faces of the dice. As I mentioned in my first post, I have 6 png images that I used as texture for each side of the cube. With the CSG method, is there any way that I could still use images for the sides of the dice? Or the only method is to 'manually' design each face of the cube using small spheres to resemble the numbers on the dice's faces?

Share this post

Link to post
Share on other sites

I'm coming back to this topic with another problem: loading time. I have created the dice using CSG and small spheres subtracted from the faces of the dice as numbers but the loading time is quite long. The problem is that there are 21 meshes just for the numbers on the dice. I tried using instances of just 1 sphere mesh but I can't seem to use CSG if the meshes I want to subtract aren't actual meshes but instances of a mesh. Could anybody, please advice me in how I can reduce the loading time on my dice?


here is the playground link for the dice (I could't load an asset on the playground so apparently a random texture was used on the dice, please ignore that):

Share this post

Link to post
Share on other sites

Using meshBuilder and setting faceUVs you could combine your 6 pngs into a spritemap to get to use them as textures for each face. Since parts of the map get transferred to the corners as well the final result will depend on how much space borders the dots.



Share this post

Link to post
Share on other sites

Nice dice you have there!

My advice is to serialize it and export it in a babylon file.

In your game, just load this babylon file (with ImportMesh): you won't have to recreate the dice at each run, and loading time will be reduced :)

Share this post

Link to post
Share on other sites

Just wanted to jump in and add to the great answers you got so far. I'm always for creating your own objects. But sometimes external resources can be helpful as well :-)
For example this -
Is a free dice model in obj format, for which Babylon has a loader.
I haven't tested it, but might be an option as well! And, John and Julian have you a wonderful kickstart to your dice. Would be great to see how you dived it eventually

Share this post

Link to post
Share on other sites

Hi guys,


Thanks a lot for all your replies. However it seems that I'm stuck with some problems with both the approaches:


 - When I constructed the dice using CSG and subtracted 21 spheres from the sides of the dice to create the dots, I have a problem with the loading time as I mentioned. Temechon, unfortunately your advice to serialize the scene and export it in a babylon file doesn't work for me either because the babylon file has a size of 10MB which is to big to have in my game.

 - John, using meshBuilder and a spritemap for textures on each face has indeed a great loading time, the dots are fitted perfectly on each face, but the problem is that some parts of dots appear on the edges as well and I can't seem to get rid of them no matter how much I adjust the space that borders the dots.


I'm not really sure how I should proceed here.

Share this post

Link to post
Share on other sites

@allecs  sorry, thinking that the size of the borders would affect the rounded corner texture was lazy and wishful rather than logical thinking. (Sometimes intuition does work!!!). The actual texture applied to the sphere is a mapping of the whole image. The texture at any point is determined by the uv values of the vertices. Setting the uv values for the sphere to 0 means they take the pixel value of the image at (0,0). So provided this is the colour of the background material of the dots then this will shade the corners appropriately.


For example

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.