I have been playing around with voxeljs, I'm new to 3D programming, and it says in the doc that this code generates the "sphere world":
generate: function(x,y,z) {
return x*x+y*y+z*z <= 20*20 ? 1 : 0 // sphere world
},
How is this actually generating a sphere? From my simple understanding, I think that it's basically "looping" through each "chunk" in the 3D world? Any further explanation or a point to a good tutorial on this would be a huge help!
Your function says:
If the voxel at (x, y, z) is part of the sphere, return 1, else 0.
The author applies the sphere equation. Your sphere is formed by the following set of voxels:
That basically means a voxel is part of the sphere, if the distance to the center (0, 0, 0) is less than the radius. The distance is calculated using the Pythagorean Theorem. By squaring the radius (in your case 20) you can compare it to the squared distance without calculating a square root.
This is based on the distance formula in three-dimensional space, since you can define a sphere as every point within a certain distance of the center point.
The distance between any two objects is equal to the square root of (x1-x2)^2 + (y1-y2)^2 + (z1-z2)^2.
The above function is flagging each voxel if they are within 20 units of the origin. Since the origin is (0, 0, 0), the distance function simplifies down to square root of x1^2 + y1^2 + z1^2. This also throws in another optimization by getting rid of the square root, and comparing the result to 20^2.
Related
TLDR; Given a set of triangle vertices and a normal vector (all in unit space), how do I calculate X, Y, Z Euler rotation angles of the triangle in world space?
I am attemping to display a 3D model in HTML - with actual HTML tags and CSS transforms. I've already loaded an OBJ file into a Javascript class instance.
The model is triangulated. My first aim is just to display the triangles as planes (HTML elements are rectangular) - I'll be 'cutting out' the triangle shapes with CSS clip-path later on.
I am really struggling to understand and get the triangles of the model rotated correctly.
I thought a rotation matrix could help me out, but my only experience with those is where I already have the rotation vector and I need to convert and send that to WebGL. This time there is no WebGL (or tutorials) to make things easier.
The following excerpt shows the face creation/'rendering' of faces. I'm using the face normal as the rotation but I know this is wrong.
for (const face of _obj.faces) {
const vertices = face.vertices.map(_index => _obj.vertices[_index]);
const center = [
(vertices[0][0] + vertices[1][0] + vertices[2][0]) / 3,
(vertices[0][1] + vertices[1][1] + vertices[2][1]) / 3,
(vertices[0][2] + vertices[1][2] + vertices[2][2]) / 3
];
// Each vertex has a normal but I am just picking the first vertex' normal
// to use as the 'face normal'.
const normals = face.normals.map(_index => _obj.normals[_index]);
const normal = normals[0];
// HTML element creation code goes here; reference is 'element'.
// Set face position (unit space)
element.style.setProperty('--posX', center[0]);
element.style.setProperty('--posY', center[1]);
element.style.setProperty('--posZ', center[2]);
// Set face rotation, converting to degrees also.
const rotation = [
normal[0] * toDeg,
normal[1] * toDeg,
normal[2] * toDeg,
];
element.style.setProperty('--rotX', rotation[0]);
element.style.setProperty('--rotY', rotation[1]);
element.style.setProperty('--rotZ', rotation[2]);
}
The CSS first translates the face on X,Y,Z, then rotates it on X,Y,Z in that order.
I think I need to 'decompose' my triangles' rotation into separate axis rotations - i.e rotate on X, then on Y, then on Z to get the correct rotation as per the model face.
I realise that the normal vector gives me an orientation but not a rotation around itself - I need to calculate that. I think I have to determine a vector along one triangle side and cross it with the normal, but this is something I am not clear on.
I have spent hours looking at similar questions on SO but I'm not smart enough to understand or make them work for me.
Is it possible to describe what steps to take without Latex equations? I'm good with pseudo code but my Math skills are severely lacking.
The full code is here: https://whoshotdk.co.uk/cssfps/ (view HTML source)
The mesh building function is at line 422.
The OBJ file is here: https://whoshotdk.co.uk/cssfps/data/model/test.obj
The Blender file is here: https://whoshotdk.co.uk/cssfps/data/model/test.blend
The mesh is just a single plane at an angle, displayed in my example (wrongly) in pink.
The world is setup so that -X is left, -Y is up, -Z is into the screen.
Thank You!
If you have a plane and want to rotate it to be in the same direction as some normal, you need to figure out the angles between that plane's normal vector and the normal vector you want. The Euler angles between two 3D vectors can be complicated, but in this case the initial plane normal should always be the same, so I'll assume the plane normal starts pointing towards positive X to make the maths simpler.
You also probably want to rotate before you translate, so that everything is easier since you'll be rotating around the origin of the coordinate system.
By taking the general 3D rotation matrix (all three 3D rotation matrices multiplied together, you can find it on the Wikipedia page) and applying it to the vector (1,0,0) you can then get the equations for the three angles a, b, and c needed to rotate that initial vector to the vector (x,y,z). This results in:
x = cos(a)*cos(b)
y = sin(a)*cos(b)
z = -sin(b)
Then rearranging these equations to find a, b and c, which will be the three angles you need (the three values of the rotation array, respectively):
a = atan(y/x)
b = asin(-z)
c = 0
So in your code this would look like:
const rotation = [
Math.atan2(normal[1], normal[0]) * toDeg,
Math.asin(-normal[2]) * toDeg,
0
];
It may be that you need to use a different rotation matrix (if the order of the rotations is not what you expected) or a different starting vector (although you can just use this method and then do an extra 90 degree rotation if each plane actually starts in the positive Y direction, for example).
I am recreating conic sections in P5.js and need to find the equation of a square plane.
I know the size of the square plane, and the rotation in each axis in degrees from its center point (as dictated by the P5 sliders).
I want to calculate the coordinates (x, y, z) of the four vertices of this square plane, given known values for rotation.
This is my P5 sketch.
https://editor.p5js.org/inglog/sketches/HsMUb8UPA
I want to use these coordinates to create an equation for the plane, in the form ax+by+cz+d=0
Once I have the vertices of the square, I will use this calculator to get the equation of the plane: https://keisan.casio.com/exec/system/1223596129)
Any advice on how to calculate the coordinates of the vertices of the plane, given a known rotation about its center point?
Is this related to conversion between Cylindrical and Cartesian Coordinates? I also wonder if this answer is connected to the solution (Rotating vertices about point)
Thank you in advance for reading through.
Since there is a unique plane that goes through a given set of 3 (noncollinear) points, you don't need the vertices of the square in order to find an equation for the plane. You just need 3 random points on the plane.
Answer:
A = (0, slider.value(), 0)
B = (1, slider.value(), 0)
C = (0, slider.value() - sin(slider2.value()), cos(slider2.value()))
From here, you can get the plane equation as they describe on the site you gave:
AB = (1, 0, 0)
AC = (0, -sin, cos)
AB x AC = (0, -cos, -sin)
Equation:
0x - cos(slider2.value())*y - sin(slider2.value())*z + cos(slider2.value())*slider.value() = 0
simplifies to
cos(slider2.value())*(y - slider.value()) + sin(slider2.value())*z = 0
or
z = (slider.value() - y)/tan(slider2.value())
I'm about 99.9% sure this is the right equation. I used it to overlay points on the plane in your program, and it looked right.
How I got the three points:
We know that there will be one point at the center, which is on the y-axis. At this point, x=z=0 and y=slider.value(). So that is point A: (0, slider.value(), 0).
We also know that the plane intersects the xy-plane in the line defined by y=slider.value(). So point B can be any point on this line, let's arbitrarily pick (1, slider.value(), 0).
The third point is the hardest, since we can't have z=0, and we have to consider the angle. Starting at the center, let's walk one unit along the plane, keeping x=0 and moving in the positive z direction.
It's hard to convey that point over text, but this is a classic unit circle problem: x=0, and y, z are on a unit circle centered at point A: C = (0, slider.value() - sin(slider2.value()), cos(slider2.value())).
I am trying to find the closest distance from a point to large, complex Mesh along a plane in a direction range:
for (var zDown in verticalDistances) {
var myIntersect = {};
for (var theta = Math.PI / 2 - 0.5; theta < Math.PI / 2 + 0.5; theta += 0.3) {
var rayDirection = new THREE.Vector3(
Math.cos(theta),
Math.sin(theta),
0
).transformDirection(object.matrixWorld);
// console.log(rayDirection);
_raycaster.set(verticalDistances[zDown].minFacePoint, rayDirection, 0, 50);
// console.time('raycast: ');
var intersect = _raycaster.intersectObject(planeBufferMesh);
// console.timeEnd('raycast: '); // this is huge!!! ~ 2,300 ms
// console.log(_raycaster);
// console.log(intersect);
if (intersect.length == 0) continue;
if ((!('distance' in myIntersect)) || myIntersect.distance > intersect[0].distance) {
myIntersect.distance = intersect[0].distance;
myIntersect.point = intersect[0].point.clone();
}
}
// do stuff
}
I get great results with mouse hover on the same surface but when performing this loop the raycasting is taking over 2 seconds per cast. The only thing i can think of is that the BackSide of the DoubleSide Material is a ton slower?
Also i notice as I space out my verticalDistances[zDown].minFacePoint to be farther apart raycast starts to speed up up (500ms /cast). So as the distance between verticalDistances[i].minFacePoint and verticalDistances[i+1].minFacePoint increases, the raycaster performs faster.
I would go the route of using octree but the mouse hover event works extremely well on the exact same planeBuffer. Is this a side of Material issue,. that could be solved by loading 2 FrontSide meshes pointing in opposite directions?
Thank You!!!!
EDIT: it is not a front back issue. I ran my raycast down the front and back side of the plane buffer geometry with the same spot result. Live example coming.
EDIT 2: working example here. Performance is little better than Original case but still too slow. I need to move the cylinder in real time. I can optimize a bit by finding certain things, but mouse hover is instant. When you look at the console time the first two(500ms) are the results i am getting for all results.
EDIT 3: added a mouse hover event, that performs the same as the other raycasters. I am not getting results in my working code that i get in this sample though. The results I get for all raycast are the same as i get for the first 1 or 2 in the sample around 500ms. If i could get it down to 200ms i can target the items i am looking for and do way less raycasting. I am completely open to suggestions on better methods. Is octree the way to go?
raycast: : 467.27001953125ms
raycast: : 443.830810546875ms
EDIT 4: #pailhead Here is my plan.
1. find closest grid vertex to point on the plane. I can do a scan of vertex in x/y direction then calculate the min distance.
2. once i have that closest vertex i know that my closest point has to be on a face containing that vertex. So i will find all faces with that vertex using the object.mesh.index.array and calculate the plane to point of each face. Seems like a ray cast should be a little bit smarter than a full scan when intersecting a mesh and at least cull points based on max distance? #WestLangley any suggestions?
EDIT 5:
#pailhead thank you for the help. Its appreciated. I have really simplified my example(<200 lines with tons more comments); Is raycaster checking every face? Much quicker to pick out the faces within the set raycasting range specified in the constructor and do a face to point calc. There is no way this should be looping over every face to raycast. I'm going to write my own PlaneBufferGeometry raycast function tonight, after taking a peak at the source code and checking octree. I would think if we have a range in the raycaster constructor, pull out plane buffer vertices within that range ignoring z. Then just raycast those or do a point to plane calculation. I guess i could just create a "mini" surface from that bounding circle and then raycast against it. But the fact that the max distance(manual uses "far") doesn't effect the speed of the raycaster makes me wonder how much it is optimized for planeBuffer geometries. FYI your 300k loop is ~3ms on jsfiddle.
EDIT 6: Looks like all meshes are treated the same in the raycast function. That means it wont smart hunt out the area for a plane Buffer Geometry. Looking at mesh.js lines 266 we loop over the entire index array. I guess for a regular mesh you dont know what faces are where because its a TIN, but a planeBuffer could really use a bounding box/sphere rule, because your x/y are known order positions and only the Z are unknown. Last edit, Answer will be next
FYI: for max speed, you could use math. There is no need to use ray casting. https://brilliant.org/wiki/3d-coordinate-geometry-equation-of-a-plane/
The biggest issue resolved is filtering out faces of planeBufferGeometry based on vertex index. With a planeBufferGeometry you can find a bounding sphere or rectangle that will give you the faces you need to check. they are ordered in x/y in the index array so that filters out many of the faces. I did an indexOf the bottom left position and lastIndexOf the top right corner position in the index array. RAYCASTING CHECKS EVERY FACE
I also gave up on finding the distance from each face of the object and instead used vertical path down the center of the object. This decreased the ray castings needed.
Lastly I did my own face walk through and used the traingle.closestPointToPoint() function on each face.
Ended up getting around 10ms per point to surface calculation(single raycast) and around 100 ms per object (10 vertical slices) to surface. I was seeing 2.5 seconds per raycast and 25+ seconds per object prior to optimization.
I'm am searching for how WebGL / Three.js in general sets their heights and widths.
As in what numbers systems do they use to set x,y,z.
For the Example below, the arrow it pointing straight up with the Y being set to 1 but in pixels it looks like 15- - 200 pixels.
Is there a helper function that i can write that I could pass in 100 for the pixels and it would return me the correct number to float number to use with THREE.js.
Excuse me if I am not talking in correct terms when it comes to number system but this is he only way i know how to reference it at this point.
The only thing i am missing below is creating the scene. but the rest is there, the image shows what it looks lik.
Once again is there a helper function that i can pass pixels to and in return get back the correct number in float for use with THREE.js?
Here is my arrow:
//scene.remove(cube);
scene.remove(group);
// create a new one
var sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));
var cube = createMesh(new THREE.BoxGeometry(6, 6, 6));
sphere.position.set(controls.spherePosX, controls.spherePosY, controls.spherePosZ);
cube.position.set(controls.cubePosX, controls.cubePosY, controls.cubePosZ);
// add it to the scene.
// also create a group, only used for rotating
var group = new THREE.Group();
group.add(sphere);
group.add(cube);
scene.add(group);
controls.positionBoundingBox();
var arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), 0, 10, 0x0000ff);
scene.add(arrow);
I receive these JS objects with the Pixels then write to screen, but how do i convert the pixels down to usable units in 3D?
The lengths in 3D do not translate to lengths in 2D uniformly. Especially when perspective projection is employed.
Let's consider your example: Two arrows of the same 3D length and the same orientation would render to different 2D lengths depending on their distance from the camera. The arrow that is closer to camera will be rendered longer than the arrow farther from camera.
In order to maintain a certain pixel length for a certain arrow, you'd have to adjust the 3D length of the arrow every time some parameters of the camera change (e.g. position, orientation, FOV). And also every time the position or orientation of the arrow changes. This is possible (see comment by #WacławJasper ) but rather complicated.
If you could explain the bigger picture of what you wish to achieve there might be a simpler solution to your problem.
So I am trying to create my own shape with PolyhedronGeometry
rough sketch:
I'm running into problems. Specifically I'm trying to attach this shape onto a sphere, so using some formulas I came up with the following vertices:
[ -0.6495190528383289, -0.09943689110435831, 0.36157613954394185,
0, -0.09943689110435831, 0.7433789778353299,
0.6495190528383289, -0.09943689110435831, 0.36157613954394185,
0.3897114317029973, -0.39774756441743325, 0.7231522790878837,
0, -0.5966213466261499, 0.5947031822682639,
-0.3897114317029973, -0.39774756441743325, 0.7231522790878837 ]
then for the face indices I have:
[ 5,4,1, 5,1,0, 2,1,3, 4,3,1, 0,1,2, 0,4,5, 2,3,4 ]
When I add spheres as debugging points, they appear at the right place, but no matter how I adjust the vertices/faces, some of the positions are incorrect:
Is order important for the faces?
Why does my polyhedron not draw correctly?
The problem is that the lengths of the original vectors are not equal to each other, so that the construction of their projections on the figure are not the same scope. And maybe, you specify the radius of the sphere wrong.
For example, the length of the first vector in the set:
(new THREE.Vector3(
-0.6495190528383289,
-0.09943689110435831,
0.36157613954394185 )
).length() === 0.75
A length of the last vector in the set:
(new THREE.Vector3(
-0.3897114317029973,
-0.39774756441743325,
0.7231522790878837 )
).length() === 0.9127033163903814
If you set a radius equal to the PolyhedronGeometry of the length of the first vector, the latter vector is outside the sphere of this radius. If you set a radius equal to the PolyhedronGeometry of the length of the last vector is the first vector is inside the sphere.