I have a project using jsc3d to render a 3d object.
the project needs to put new accessories into the current figure. I need to check if the accessory collision with the main part so the output 3D models can print though 3d printer.
is there any way to detect collision in jsc3d ??
There isn't any easy method to check for 3D mesh collision.
To get an exact result for complex and/or concave 3d shapes, You will need to check every triangle of both shapes for intersection. This may be somewhat slow, depending from the amount of vertices, but there is also some optimization possible.
There are some approximation techniques which are faster than the N*M check of all triangles intersection:
intersection of axis-aligned bounding boxes
intersection of the bounding spheres
intersection of the rotated bounding boxes
intersection of the bounding cylinders
...or any combination of the shapes
JSC3D has already built-in the AABB structure.
For simple 3D meshes, maybe You can use that. The check for 3D AABB intersection is really easy, see also this answer here: Intersection between two boxes in 3D space
Related
I have a code that generates cylinders based on an array of 3d vectors.
The problem is that they have those ugly spaces between them:
Does any one know how I can fill them in the newest version of three.js?
Thanks in advance!!
To fill the gaps, I'd suggest you just use a sphere with the same radius as the cylinders, centered at the point the two cylinders meet.
Set height & width segment counts to match the cylinders so it all looks consistent.
The parts that aren't filling the gap will just get hidden inside the cylinders, and won't be visible.
If you want to keep the vertex count down, you could use the theta parameters on the Sphere Geometry to only generate the parts that you actually need to fill the gap.
https://threejs.org/docs/?q=sphere#api/en/geometries/SphereGeometry
Alternatively, if what you are really trying to achieve is a curved object with a circular cross-section, you could drop the cylinders altogether, and extrude a circle along a curve to achieve the shape that you want.
https://threejs.org/docs/?q=extrude#api/en/geometries/ExtrudeGeometry
https://threejs.org/examples/webgl_geometry_extrude_shapes.html
I am playing with phaser along with its isometric plugin. I am a still a newbie on the matter however.
I have 2 sprites and I want to check for intersection / overlap between them. They are 2d simple sprites. I want to check for intersection ONLY if they are side by side and that would be for some kind of melee attack.
I created an hitbox for the player (a rect) and created a function that detects if two rects intersect each other. I can actually detect collision that way but if the player is in a little bit lower position to the target (in the screen coordinate y) it also detects the collision.
I need a way to make sure the sprites are "aligned". How could I do this in isometric in order to make sprites interact with each other? I can give more informations if needed or provide code.
"Isometric" is just how you render the scene and shouldn't have anything to do with the collision logic. All the game objects live in the same 3D space so colliding sprites need 3d hitboxes.
I´m searching for a (or more) best practice(s) for the following problem. I´ll try to describe it as abstract as possible, so the solution can be applied to scenarios i have not yet thought of.
Data available: Voxels (Volumetric Pixels), forming a cube, with coordinates x,y,z and a color attached.
Goal: Use OpenGL to display this data, as you move through it from different sides.
Question: Whats the best practice to render those voxels, depending on the viewpoint? How (which type of Object) can store the data?
Consider the following:
The cube of data can be considered as z layers of x y data. It should
be possible to view, in-between-layers, then the displayed color
should be interpolated from the closest matching voxels.
For my application, i have data sets of (x,y,z)=(512,512,128) and
more, containing medical data (scans of hearts, brains, ...).
What i´ve tried so far:
Evaluated different frameworks (PIXI.js, three.js) and worked through a few WebGL tutorials.
If something is not yet clear enough, please ask.
There are 2 major ways to represent / render 3D datasets. Rasterization and Ray-tracing.
One fair rasterization approach is a surface reconstruction technique by the use of algorithms such as Marching Cubes, Dual Contouring or Dual Marching Cubes.
Three.js have a Marching Cubes implementation in the examples section. You basically create polygons from your voxels for classical rasterization. It may be faster than it seems. Depending the level of detail you want to reach, the process can be fast enough to be done more than 60 times per second, for thousands of vertices.
Although, unless you want to simply represent cubes (I doubt) instead of a surface, you will also need more info associated to each of your voxels rather than only voxel positions and colors.
The other way is raycasting. Unless you find a really efficient raycasting algorithm, you will have serious performance hit with a naive implementation.
You can try to cast rays from your camera position through your data structure, find / stop marching through when you reach a surface and project your intersection point back to screen space with the desired color.
You may draw the resulting pixel in a texture buffer to map it on a full-screen quad with a simple shader.
In both cases, you need more information than just colors and cubes. For example, you need at least density values at each corners of your voxels for Marching cubes or intersection normals along voxels edges (hermite data) for Dual Contouring.
The same for ray-casting, you need at least some density information to figure out where the surface lies or not.
One of the keys is also in how you organize the data in your structure specially for out-of-core accesses.
Let's say I have a simple 2d x-y graph. I want to draw a really complicate shape centered at (5,5), (3,4) ,(-1,9), etc.
I know where the vertices of the shape will be relative to a center (n,m). Is it possible to calculate all the vertices on the GPU instead of in javascript? I would just need to upload the relationship of the vertices to the center once and then after that just the individual points.
For example if the shape was a square, the relationship would be:
At the point (n,m), there are vertices (n-1, m-1), (n+1, m-1), (n+1,m-1), (n+1, m+1).
That way I could just upload (5,5), (3,4) ,(-1,9) to the GPU instead of calculating 12 vertices and uploading.
Questions:
Is this possible?
Would this be faster than calculating the vertices in javascript?
These are some solutions for OPENGL, WebGL does not support apparently.
http://www.opengl.org/wiki/Vertex_Rendering
http://www.opengl.org/wiki/GLAPI/glDrawArraysInstanced
edit: Apparently WebGL doesn't have drawArraysInstanced
I am still working on my "javascript 3d engine" (link inside stackoverflow).
at First, all my polygons were faces of cubes, so sorting them by average Z was working fine.
but now I've "evolved" and I want to draw my polygons (which may contain more than 4 vertices)
in the right order, namely, those who are close to the camera will be drawn last.
basically,
I know how to rotate them and "perspective"-ize them into 2D,
but don't know how to draw them in the right order.
just to clarify:
//my 3d shape = array of polygons
//polygon = array of vertices
//vertex = point with x,y,z
//rotation is around (0,0,0) and my view point is (0,0,something) I guess.
can anyone help?
p.s: some "catch phrases" I came up with, looking for the solution: z-buffering, ray casting (?!), plane equations, view vector, and so on - guess I need a simple to understand answer so that's why I asked this one. thanks.
p.s2: i don't mind too much about overlapping or intersecting polygons... so maybe the painter's algorthm indeed might be good. but: what is it exactly? how do I decide the distance of a polygon?? a polygon has many points.
The approach of sorting polygons and then drawing them bottom-to-top is called the "Painter's algorithm". Unfortunately the sorting step is in general an unsolvable problem, because it's possible for 3 polygons to overlap each other:
Thus there is not necessarily any polygon that is "on top". Alternate approaches such as using a Z buffer or BSP tree (which involves splitting polygons) don't suffer from this problem.
how do I decide the distance of a polygon?? a polygon has many points.
Painter's algorithm is the simplest to implement, but it works only in very simple cases because it assumes that there is only a single "distance" or z-value for each polygon (which you could approximate to be the average of z-values of all points in the polygon). Of course, this will produce wrong results if two polygons intersect each other.
In reality, there isn't a single distance value for a polygon -- each point on the surface of a polygon can be at a different distance from the viewer, so each point has its own "distance" or depth.
You already mentioned Z-buffering, and that is one way of doing this. I don't think you can implement this efficiently on a HTML canvas, but here's the general idea:
You need to maintain an additional canvas, the "z-buffer", where each pixel's colour represents the z-depth of the corresponding pixel on the main canvas.
To draw a polygon, you go through each point on its surface and draw only those points which are closer to the viewer than any previous objects, as indicated by the z-buffer.
I think you will have some ideas by investigating BSP tree ( binary spaces partition tree ), even if the algo will require to split some of your polygon in two.
Some example could be find here http://www.devmaster.net/articles/bsp-trees/ or by google for BSP tree. Posting some code as a reply is, in my opinion, not serious since is a complex topic.