Wireframe options

Recommended Posts

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

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; }
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;
}
``````

Share on other sites

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

Share on other sites
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

Share on other sites

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

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

Share on other sites
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.

Share on other sites

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

Share on other sites

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

Share on other sites

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

u can do in better!

Share on other sites
8 minutes ago, Nabroski said:

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

u can do in better!

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 :/

Share on other sites
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.

Share on other sites

How do you generate this texture?

Share on other sites

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

Share on other sites
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

Share on other sites

@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.

Share on other sites

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

Share on other sites
4 hours ago, adam said:

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

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

Share on other sites
1 hour ago, NasimiAsl said:

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.

Share on other sites
• 2 months later...

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?

Share on other sites

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)

Share on other sites
• 2 years later...

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

Share on other sites
• 1 month later...

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

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

Only 75 emoji are allowed.

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.