Wireframe options

[NasimiAsl]

hi again  ( i don't know but i feel someone hate me when i reply )

http://www.babylonjs-playground.com/#D6IPT#3

that take a 2 min time for calculate (i can fix that 'maybe')

and i find something new in babylon JS  about create line you can make split Path in MeshLine when you set { x:NaN , y:0,z:0 } that is wonderful for make Optimized Wireframe 

@ozRocker  i think that can make 90% solution

 

static GetQuadPoints(geo: Geometry) : any {
            var quad = [];
            for (var i = 0; i < geo.faces.length; i += 3) {

                quad.push({ a: geo.vertices[geo.faces[i]], b: geo.vertices[geo.faces[i + 1]], c: geo.vertices[geo.faces[i+2]]  });
            }
            function len(p1, p2) {
                return Math.sqrt(Math.pow(p1.x - p2.x, 2.) + Math.pow(p1.y - p2.y, 2.) + Math.pow(p1.z - p2.z, 2.));
            }
            function eq(p1, p2) {
                return  len(p1,p2) < 0.00001;
            }
            function getQuad(r, ind) {
                var res = [];
                for (var qa in quad) {
   
                    var q = quad[qa];
                    var p1, p2, p3, p4;
                    var findMatch = true;
                    if (qa == ind) { findMatch = false; continue; }
                    if (eq(q.a, r.a) && eq(q.b, r.b)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.c; }
                    else if (eq(q.a, r.a) && eq(q.b, r.c)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.b; }

                    else if (eq(q.a, r.b) && eq(q.b, r.a)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.c; }
                    else if (eq(q.a, r.b) && eq(q.b, r.c)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.a; }

                    else if (eq(q.a, r.c) && eq(q.b, r.a)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.b; }
                    else if (eq(q.a, r.c) && eq(q.b, r.b)) { p1 = q.a; p2 = q.b; p3 = q.c; p4 = r.a; } 

                    else if (eq(q.b, r.a) && eq(q.c, r.b)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.c; }
                    else if (eq(q.b, r.a) && eq(q.c, r.c)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.b; }

                    else if (eq(q.b, r.b) && eq(q.c, r.a)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.c; }
                    else if (eq(q.b, r.b) && eq(q.c, r.c)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.a; }

                    else if (eq(q.b, r.c) && eq(q.c, r.a)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.b; }
                    else if (eq(q.b, r.c) && eq(q.c, r.b)) { p1 = q.b; p2 = q.c; p3 = q.a; p4 = r.a; }

                    else if (eq(q.c, r.a) && eq(q.a, r.b)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.c; }
                    else if (eq(q.c, r.a) && eq(q.a, r.c)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.b; }

                    else if (eq(q.c, r.b) && eq(q.a, r.a)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.c; }
                    else if (eq(q.c, r.b) && eq(q.a, r.c)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.a; }

                    else if (eq(q.c, r.c) && eq(q.a, r.a)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.b; }
                    else if (eq(q.c, r.c) && eq(q.a, r.b)) { p1 = q.c; p2 = q.a; p3 = q.b; p4 = r.a; }

                    else { findMatch = false; continue; }
                    // quad Condition
                    if (findMatch) {
                        
                        if (len(p1, p2) >= Math.max(len(p1, p2), Math.max(len(p1, p3), Math.max(len(p2, p3), Math.max(len(p1, p4), len(p2, p4)))))) {
                            res.push([p1, p3, p2, p4, p1]);
                        } 
                    }
                }
                return res;
            } 
            var result = [];
            for (var g1 in quad) {
                var q = quad[g1];
               var rs = getQuad(q, g1);
               if (rs != null)
                   result.push(rs);
            } 
            return result;
        }
        

 

 

[ozRocker]

That looks pretty good @NasimiAsl  I think some polygons might be missing.

This shader sometimes crashes the browser though.  I'm using Chrome on a Windows desktop

[NasimiAsl]

Just now, ozRocker said:

That looks pretty good @NasimiAsl  I think some polygons might be missing.

This shader sometimes crashes the browser though.  I'm using Chrome on a Windows desktop

that is not shaderBuilder  i just find quad from geometry data with condition you can see the source 

[NasimiAsl]

 

just find p1 and p2 ( 2 points in coordinate of the 2 face) and check this condition

l1 > = max(l1,l2,l3,l4,l5)

[ozRocker]

8 minutes ago, NasimiAsl said:

that is not shaderBuilder  i just find quad from geometry data with condition you can see the source 

ah ok, I see what you're doing.  That's pretty neat.  Its not completely accurate result though.

I wonder how Sketchfab makes such an accurate wireframe, and so quick to load.

https://sketchfab.com/models/818277492a3346728958d7de33b9f9b1

[NasimiAsl]

i know how can i make that but for this time i just load triangulate  Polygon but you can get   accurate   result when you have Quadrangulate Polygon 

i need time to attach that for my .Obj Loader

[GameMonetize]

But I'm wondering if the quads are the same in Sketchfab and in Blender

[Nabroski]

@ozRocker

i crushed the texture to much (72kB).  as long NasimiAsl writing a shader

u can do in better!

http://babylonjs-playground.com/#1LMACK#1

[ozRocker]

8 minutes ago, Nabroski said:

@ozRocker

i crushed the texture to much (72kB).  as long NasimiAsl writing a shader

u can do in better!

http://babylonjs-playground.com/#1LMACK#1

That's pretty cool!  (I got rid of the seams here http://babylonjs-playground.com/#1LMACK#2 )

I thought about doing this technique if its not possible to render a wireframe using babylon.js in realtime.  I like how the wireframe is on top of the diffuse texture so you can see exactly what's happening.  So much better than having a wireframe which shows front and back at the same time.  I'm testing it out on iPhone but so far nothing is showing up :/

 

[Nabroski]

27 minutes ago, ozRocker said:

I'm testing it out on iPhone but so far nothing is showing up :/

 

If i hang longer around here i will never be able to test it with an iphone.

[GameMonetize]

How do you generate this texture?

[Nabroski]

he unwrap it manually. I think he also imported uv information to Scetchfab. (texture1D to fragment and then some lines, maybe)

[ozRocker]

46 minutes ago, Deltakosh said:

How do you generate this texture?

Blender has an option where you can save the UV outline as an image

[Nabroski]

@ozRocker

saidly that the uv layout exporter from blender has only 1px line thickness. A possible workaround would be to apply a blur filter to smooth the lines out a bit. as i said their are some optimizations are possible from side of the texturing. I exported from Photoshop save for Web with 2 Colors Alpha and Blue. so 1024x1024*1bits per pixel. but if you export as PNG8 1024x1024X8bits (256Colors) its at least 1MB big that are allocated by your GPU not 72kB download time. So iphone has a strong limitation to texture size. IDK just saying. 

 

 

[adam]

@ozRocker

Did you by any chance use the Sketchfab exporter that is built into Blender when uploading the model to Sketchfab?

https://sketchfab.com/exporters/blender

[ozRocker]

4 hours ago, adam said:

@ozRocker

Did you by any chance use the Sketchfab exporter that is built into Blender when uploading the model to Sketchfab?

https://sketchfab.com/exporters/blender

I just uploaded the .OBJ.  I didn't know there was a Sketchfab exporter until you mentioned it.  I checked and I can see its there, just needs to be enabled in User Preferences

[NasimiAsl]

http://babylonjs-playground.com/#1LMACK#4

shader for  @Nabroski  Reply 

 

[ozRocker]

1 hour ago, NasimiAsl said:

http://babylonjs-playground.com/#1LMACK#4

Not bad mate.  I'm trying to find a way to do this without textures so it can scale properly when zooming in and out.  Also cos iOS doesn't like dealing with too many textures.

[bentwonk]

Silly question from a newb, but is it possible to blend materials, for example overlay the grid material on a textured heightmap to show topology?

Even better could it be applied only to a limited area of the ground, such as that the user is inspecting?

[GameMonetize]

Hello, there is no newb questions. All questions are welcome!

To do what you want you will need to clone your ground and affect a gridmaterial to the clone (and probably slide it a bit to have it on top of the main ground)

[Jok]

http://www.hightopo.com/demo/Wireframe/

I'm trying to show the wireframe on the model, like this scene, but the effect hasn't come out yet. I've tried several ways, texture sampling, new BBS, a friend helped me to draw with lines, but the effect is not very obvious

https://www.babylonjs-playground.com/#4AJ16M#103

[Guest]

Please post your question on the new forum:
https://forum.babylonjs.com/