The problem of model texture sampling

http://www.html5gamedevs.com/topic/21605-wireframe-options/?do=findComment&comment=123045

https://www.babylonjs-playground.com/#D6IPT#11
that take some time :))

just find p1 and p2 ( 2 points in coordinate of the 2 face) and check this condition
l1 > = max(l1,l2,l3,l4,l5)

find quad wireframe from geometry

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

i can find other way too but drawing quad wireframe base on UV but i dont have sample for yet it is just idea and dont have time for now

  • We can do this together,What can I offer?

the solution is find quad faces
and draw them on Dynamic Texture like rectangle with border

  • I’m looking at your code. It seems a little complicated

yes :slight_smile:

That’s great, but I still need your help. * Your algorithm, I don’t understand,

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

  • The model goes straight back to the beginning

let be clear
1 : that find the 4 pointed faces
2: then find the a line path ( vertex path )
3: so we have a array of quad wireframes

the requirement need geometry
but what we don’t have is code for making a texture

  • Texture is shader code

https://www.babylonjs-playground.com/#4AJ16M#75
this is?

The model is semi-transparent, the edges are drawn and uv animation is made. Can it be done
https://www.babylonjs-playground.com/#4AJ16M#71

Sorry, for the way you said, is there any other way to solve it? I want to realize it

I did this in threejs.

  • Calculate the correct EdgeGeometry
  • Set polygonOffset to the material of the Mehs entity to avoid EdgeGeometry being occluded by Mesh.

You mean BBL can’t be done:困:

No, I am just not familiar with bjs

ok it is not race game between 2 framework for do 90% webgl stuff both work in same solution
so people win can use the code we are share here for find good solution you most ask so clearly.
i guess request of this topic changed some time and that not clear yet

can you make a simple box and explain what you need for render on that ?

I agree with nasimi, try to make a more controllable study case instead of the whole big scene at once. Get that within scope then go from there. It will be a lot easier to understand what needs to be done.

Also I’d like to point out that they are not putting any textures on the models in your example scene I do not believe. I might be wrong but I think the textures are for post passes for just screen space effects. and then one is used as a light/fog map I think… don’t quote me on that, but that what it seeps to be.

1 Like

@ nasimiasl绝地大师@ Pryme8
Sorry!I just don’t know how to realize it, so I choose to directly give a website and open the scene model described in the website, which is more intuitive. I just want to achieve the effect described by the model through the shader Wireframe
personally think it USES texture to paste out the lines
similar to the effect shown in this image, line sense, then translucent, edge light


add the highlight lines texture to the emissive channel and that should do it.
@ranwei-001

:slight_smile: 7 Lines of code is way easier to understand <3

by the way:

1 Like