diamond object

[Emil]

Hello,

Any of you did a procedural diamond creation? Is that possible in Babylon? I found a python script but in blender. So just curious if there is anything like this for Babylon. I am frustrated for so much search with no answers.

Thanks, 

add_mesh_gemstones.py

[georage]

You are trying to create a 3D shape that looks like a diamond? This may help. http://www.babylonjs-playground.com/#21QRSK#1

Tutorial on shapes: https://doc.babylonjs.com/tutorials/mesh_createxxx_methods_with_options_parameter

 

 

 

[Emil]

thanks georage. This script uses polyhedra.js as import, where all the shapes are hard coded parameters. For example:

OctagonalPrism : { "name":"Octagonal Prism", "category":["Prism"], "vertex":[[0,0,1.070722],[0.7148135,0,0.7971752],[-0.104682,0.7071068,0.7971752],[-0.6841528,-0.2071068,0.7971752],[0.6101315,0.7071068,0.5236279],[1.04156,-0.2071068,0.1367736],[-0.7888348,0.5,0.5236279],[-0.9368776,-0.5,0.1367736],[0.9368776,0.5,-0.1367736],[0.7888348,-0.5,-0.5236279],[-1.04156,0.2071068,-0.1367736],[-0.6101315,-0.7071068,-0.5236279],[0.6841528,0.2071068,-0.7971752],[0.104682,-0.7071068,-0.7971752],[-0.7148135,0,-0.7971752],[0,0,-1.070722]], "edge":[[0,1],[1,4],[4,2],[2,0],[2,6],[6,3],[3,0],[1,5],[5,8],[8,4],[6,10],[10,7],[7,3],[5,9],[9,12],[12,8],[10,14],[14,11],[11,7],[9,13],[13,15],[15,12],[14,15],[13,11]], "face":[[0,1,4,2],[0,2,6,3],[1,5,8,4],[3,6,10,7],[5,9,12,8],[7,10,14,11],[9,13,15,12],[11,14,15,13],[0,3,7,11,13,9,5,1],[2,4,8,12,15,14,10,6]]},

etc.

You cannot change the size of that shape by modifying the crown angle or pavilion angle or table size, etc

 

[georage]

you can import vertex data to create or modify a mesh/shape.

I can give you some working code in a bit, but check this thread

 

[georage]

Hey, maybe try this? save your vertex data as a file and load it with this function.

function loadMesh(directory, fileName, scene){
    var rootURL = "json/" + directory + "/";
    BABYLON.SceneLoader.ImportMesh("", rootURL, fileName, scene, function (newMeshes) {
        console.log(newMeshes);
        camera.target = newMeshes[0];
    });
}

here is an example of a loadable mesh file. It will take some time to load so wait for it. 

skull.babylon

[gryff]

On 2017-02-11 at 8:52 PM, Emil said:

I found a python script but in blender.

Hi @Emil. Welcome to the forum  

Can you just not create the diamond in Blender - then export that as a .babylon file with the Blender Babylon Exporter (BBE) ?

You have lots of control over the actual shape you get in Blender in terms of facets, height etc.

cheers, gryff

[Emil]

wow, did not expect so many useful replays. Thanks guys. 

So, let me reiterate what I would like to accomplish. The diamond should load in a browser and you plug in your parameters. Based on those parameters, the object is rendered as you go.

As far as I know, blender is a stand alone software, not providing any web interface. Modifying those parameters in Blender is not what I wanted. (for each modification, you have to export from blender, import in babylon).

I tried to rewrite the code from python in Babylon, but I am stuck at the matrix transformation/rotation step...maybe that should be in another thread? Let me summarize it here:

Python:

PI_2 = pi * 2.0
z_axis = (0.0, 0.0, -1.0)
segments = 32
table_radius = 0.6
crown_height = 0.35
for index in range(segments ):
        #Quaternion(axis, angle)
        quat = Quaternion(z_axis, (index / segments ) * PI_2)
        vec = quat * Vector((table_radius, 0.0, crown_height))

as you can see, in Python you multiply those. But this doesn't work in Babylon.

I read more here how_rotations_and_translations_work, here quaternion and here Applying_Rotations.

I tried this:

var PI_2 = Math.PI * 2.0;
var segments = 32;
var table_radius = 0.6;
var crown_height = 0.35;
for(var index = 0;index < segments ;index++){
            var a = new BABYLON.Vector3(table_radius, 0.0, crown_height);
            var quat = new BABYLON.Quaternion(0.0,0.0,-1.0,(index / segments ) * PI_2);
            //TransformCoordinates(vector3, matrix) 
            var result = BABYLON.Vector3.TransformCoordinates(a, quat);}

but get  Cannot read property '0' of undefined at the TransformCoordinates line.

[GameMonetize]

Hello!

TransformCoordinates expects a matrix as second parameter: http://doc.babylonjs.com/classes/2.5/vector3#static-transformcoordinates-vector-transformation-rarr-vector3-classes-2-5-vector3-

You can use this to transform your quaternion into a matrix: http://doc.babylonjs.com/classes/2.5/quaternion#torotationmatrix-result-rarr-quaternion-classes-2-5-quaternion-

 

[jerome]

http://doc.babylonjs.com/tutorials/mesh_createxxx_methods_with_options_parameter#polyhedron

[Emil]

thanks all. @jerome that is not parametric in the truly sense. You can scale it or change some colors of the faces. But you are not altering in any way the actual shape.

@Deltakosh it worked but not sure how well. This is what I did:

var PI_2 = Math.PI * 2.0;
var segments = 32;
var table_radius = 0.6;
var crown_height = 0.35;
for(var index = 0;index < segments;index++){
            var quat = new BABYLON.Quaternion(0.0,0.0,-1.0,(index / segments) * PI_2);
            var a = new BABYLON.Vector3(table_radius, 0.0, height_flat);
            var m = new BABYLON.Matrix();
            quat.toRotationMatrix(m);	
            var result = BABYLON.Vector3.TransformCoordinates(a, m);
}

so after doing all the conversion from python to Babylon, I get some verts and faces. Not sure how correctly. More exactly:

for vertices, I get an array 66 X 3; for faces, I get an array 3 X 32 X 3; see attached image.

At this point I am not sure how to link them all in one mesh...CreatePlane? CreateLines?

[JohnK]

Do these help?

   http://babylonjsguide.github.io/advanced/Custom

    http://babylonjsguide.github.io/advanced/Normals

      http://babylonjsguide.github.io/advanced/Updating_Vertices

http://www.babylonjs-playground.com/#1H7L5C#5

[Emil]

thanks all. I finally just got the diamond's parameters and plug them manually in babylon.js

http://www.babylonjs-playground.com/#1H7L5C#39

But the glass shader it is not behaving like a glass, but more like a mirror. While this looks ok on a sphere and create the feeling of a glass sphere, is does not look ok here. There is no transparency so you can see inside. Alpha is not the answer here. Also there is no way as far as I know to let the light in and bounce inside. Is this possible with babylon.js? I know in blender I can do it and the diamond will look very realistic. It is called glass bsdf shader. Is there any similar work done in babylon.js?

[JohnK]

1 hour ago, Emil said:

But the glass shader it is not behaving like a glass, but more like a mirror. While this looks ok on a sphere and create the feeling of a glass sphere, is does not look ok here. There is no transparency so you can see inside. Alpha is not the answer here. Also there is no way as far as I know to let the light in and bounce inside. Is this possible with babylon.js? I know in blender I can do it and the diamond will look very realistic. It is called glass bsdf shader. Is there any similar work done in babylon.js?

The diamond shape is terrific and I wish I could help with the shader but this is well beyond me. If the very busy and shader expert has time then maybe, just maybe he will be available for the challenge calling  @NasimiAsl

[inteja]

I tried something similar to this over a decade ago in VRML/X3D and ran into similar challenges. I never fully resolved the whole "total internal reflection" characteristic of diamond with the technology available at the time. I just faked it as best I could with HDR, environment maps, transparency, blending effects and a bunch of dynamic lens flares on the facets of the diamond. See attached screenshots. I wouldn't mind updating this project to Babylon.js and the latest techniques, so let me know how you get on with the diamond shader.

[Emil]

now I just have to implement this: http://www.babylonjs-playground.com/#FT2RY#104

made by @NasimiAsl

[NasimiAsl]

challenge accepted

[NasimiAsl]

http://www.babylonjs-playground.com/#1F17BQ#2

http://www.babylonjs-playground.com/#1F17BQ#3

http://www.babylonjs-playground.com/#1F17BQ#1

for make real diamond reflection i have idea ( make different cube map and reflect that wait for me )

[NasimiAsl]

make deep fake  reflect http://www.babylonjs-playground.com/#1F17BQ#5

http://www.babylonjs-playground.com/#1F17BQ#6

[Emil]

@NasimiAsl thank you, this looks the best so far. 

how do we add the index of refraction? In the attached pic I used the real IOR, but in some tutorials, some people go like R:2.4, G:2.5, B:2.6 just to accentuate the effect of scintillation. I know you cannot simulate 100% realistic diamond due to the RGB monitors limitation. 

For light bouncing effect inside the diamond(that will give the fire/scintillation), will it be needed a loop for all the facets and compute light as it refracts? 

thanks a lot for your work

 

 

[NasimiAsl]

i think we can work a lot for this but result is same with very low different

but i can try more but need look your excepted final result  any pic?

[Emil]

just look at this real beauty: https://www.jamesallen.com/loose-diamonds/round-cut/1.02-carat-g-color-vs2-clarity-ideal-cut-sku-2359303

just give it a spin

[Emil]

I see that you are using these masks(http://i.imgur.com/QxxS3VP.jpg) to create some effect. That is fake and I think it it not looking realistic. The best approach will be to figure out how to bounce light from one face to another.

 

[NasimiAsl]

i don't understand this is good or bad to use fake?

because if we r not use that one maybe we can calculate a real inner reflection and ray Refraction but never can do it in live render

so this is only way to make same effect in live render

i try to make other version with refract and reflect version

[NasimiAsl]

and new version

http://www.babylonjs-playground.com/#1F17BQ#37

http://www.babylonjs-playground.com/#1F17BQ#43

[jerome]

beautiful !