allecs Posted December 4, 2015 Share Posted December 4, 2015 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); multi.subMaterials.push(f); multi.subMaterials.push(ba); multi.subMaterials.push(l); multi.subMaterials.push®; multi.subMaterials.push(t); multi.subMaterials.push(bo); 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; Quote Link to comment Share on other sites More sharing options...
Temechon Posted December 4, 2015 Share Posted December 4, 2015 Hello and welcome, Don't worry, there is no stupid questions Only answers! You should use CSG : http://babylonjs.com/Demos/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: iiceman, jerome, WolfKodi and 2 others 5 Quote Link to comment Share on other sites More sharing options...
allecs Posted December 4, 2015 Author Share Posted December 4, 2015 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? Quote Link to comment Share on other sites More sharing options...
Temechon Posted December 4, 2015 Share Posted December 4, 2015 I actually don't know. Indeed, using CSG will break your submaterials.Without using a 3D modeler, I think the only solution is to use small spheres for numbers. Quote Link to comment Share on other sites More sharing options...
allecs Posted December 6, 2015 Author Share Posted December 6, 2015 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): http://www.babylonjs-playground.com/#1MDLE#3 Quote Link to comment Share on other sites More sharing options...
JohnK Posted December 6, 2015 Share Posted December 6, 2015 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. Example http://www.babylonjs-playground.com/#2D4YCM jerome 1 Quote Link to comment Share on other sites More sharing options...
Temechon Posted December 6, 2015 Share Posted December 6, 2015 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 Quote Link to comment Share on other sites More sharing options...
RaananW Posted December 6, 2015 Share Posted December 6, 2015 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 -http://tf3dm.com/3d-model/dice-50306.htmlIs 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 jerome 1 Quote Link to comment Share on other sites More sharing options...
allecs Posted December 7, 2015 Author Share Posted December 7, 2015 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. Quote Link to comment Share on other sites More sharing options...
JohnK Posted December 8, 2015 Share Posted December 8, 2015 @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 http://www.babylonjs-playground.com/#2D4YCM#1 iiceman and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
allecs Posted December 8, 2015 Author Share Posted December 8, 2015 @John, that worked great. I got the result I wanted, thanks a lot for your support and thanks everybody for the advises, I learned a few things that will most certainly be useful on the future. JackFalcon 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.