I'm trying to find a way to slice a 3D polyhedral that has defined positions in the polyhedra JSON, the idea is to give a point A and point B that are going to work as cutting points.
Is there any way to do that with JavaScript like an algorithm? Is there any library that can help doing that?
I'm using Babylon.js as the 3D library, tried with CSG calculations with results that doesn't work as expected so I'm trying to find a solution that works on JavaScript and not in Babylon.js.
Related
I am working on a system to procedurally build meshes for "mines", right now I don't want to achieve visual perfection I am more focused on the basic.
I got the point in which I am able to generate the shape of the mines and from that generating the 2 meshes, one for the ground and one for the "walls" of the mine.
Now I am working on getting the UV mapping right but my problem is that the ground is really hard to map to UV coordinates properly and I am currently not able to get it right.
For the tessellation I am using a constrained version of the delaunay triangulation to which I added a sub-tessellation what simply splits the triangles at least once and keeps splitting them if the area of the triangle is greater than X.
Here a 2D rendering of the tessellation that highlight the contours, the triangles and the edges
Here the result of the 3D rendering (using three.js and webgl) with my current UV mapping applied (a displacement map as well, please ignore it for now).
I am taking a naive approach to the UV mapping, each vertex of a triangle in the grid is translated to values between 0 and 1 and that's it.
I think that, in theory should be right, but the issue is with the order of the vertexes that is creating a problem but if that would be the case the texture should be shown rotated or oddly not just oddly AND stretched like that.
Once I will get the UV mapping right, the next step would be to correctly implement the
I am currently writing this in javascript but any hint or solution in any language would be alright, I don't mind converting and/or re-engineering it to make it work.
My goal is to be able to procedurally build the mesh, send it to multiple clients and achieve the same visual rendering. I need to add quite a few bits and pieces after this other step is implemented so I can't rely on shaders on the client side because otherwise being able to place tracks, carts or something else on the ground would just be impossible for the server.
Once I will get these things sorted out, I will switch to Unity 3D for the rendering on the client side, webgl and three.js are currently being used just to have a quick and easy way to view what's being produced without the need of a client/server whole infrastructure.
Any suggestion?
Thanks!
I sorted out the issue in my code, it was pretty stupid though: by mistake I was adding 3 UV mappings per triangle and not 1 per point causing an huge visual mess. Sorted out that, I was able to achieve what I needed!
https://www.youtube.com/watch?v=DHF4YWYG7FM
Still a lot of work to do but starts to look decent!
I would like to know if there is a good JS framework to convert an area map into a plottable one.
For example, if I have a map like this which identifies parkinglots with numbers, I want to identify the occupied lots with red color and vacant lots with other color.
What would be the best framework to achieve this. I saw D3.js but it has too much learning curve and we need to hard-code fixed points on an svg area. I'm looking for a quick alternative which could be a wrapper library of D3.js similar to what nvd3 is for charts
You might want to take a look at http://processingjs.org/ -- it is NOT a wrapper around D3, but it's designed to be easy to use.
(FWIW, I stopped using processing.js once I discovered D3 -- I like D3's flexibility despite the steeper learning curve.)
This post might be useful: https://forum.processing.org/one/topic/interactive-svg-map-with-processing-js.html
Right now, I am working with bezier curves in fabric.js. Assuming, for instance, 3 of them, with intersections between them. I need to find the exactly crossing point and, even more difficult, draw the selection in other canvas. For fabric.path, I'm using
perPixelTargetFind: true,
Image to clarify the situation:
Finally, after a long time, I can't find any solution in fabric library, a workaround pass for convert to svg, use a another library or program your own proccess (pretty hard) and convert back to fabric.
The final solution is use paper.js, it has some functions to detect intersections and colissions, and, also, is very powerful for some other task.
So I have an object that I created by drawing vertexes on a 3D canvas using Three.JS. Now I am trying to add faces to to it but I can not seem to get the correct method for this.
You can find the project here: https://github.com/thebillkidy/WebGL-SuperFormula (Basically it is applying the Superformula in WebGL)
I already tried point clouds, lines and ConvexGeometries but none seem to work. Anyone knows how to do this?
P.S. You can find my current render method here: https://github.com/thebillkidy/WebGL-SuperFormula/blob/master/app/scripts/main.js I also added the other methods that I tried.
I've an application that based on some values from different inputs (temperature, humidity...), show different charts.So far I've done that with JpGraph, and I found it pretty easy to do. You can add a legend easily, and plot as many functions as you want. You can also fix the scale easily. Regardless of that, I would like to have some interactivity with the user (I just want that one the user clicks on a point of the graph, the X and Y value are shown). That is not easy to do with JpGraph because it is just a PNG image.
I was recommended to use Raphael JS library, and I've been reading to the documentation (Raphael JS Reference), but I don't see that what I want to do (line charts) is that simple.
So, I am asking, to both Jpgraph users and Raphael JS users if they had had experience with this, and if there is any good tutorial online (I have not able to find one that works with line charts). The kind of graphs I'm drawing now are like this: JpGraph Example
Some other options:
D3.js (SVG)
JSXGraph (SVG and VML for IE)
Protovis (SVG)
There is a chart plugin for Raphael. It supports line charts. The documentation is certainly lacking - but there is always the source.
Answering myself. After doing some research, I found this one pretty interesting for doing line charts:Grafico