Skip to content

Commit b617e9e

Browse files
SekqiesSekqies
committed
Added ellipsoid bounding box for Nodes
1 parent ca18aa8 commit b617e9e

5 files changed

Lines changed: 61 additions & 32 deletions

File tree

‎devlog.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
Our graphics engine is done!
1+
We've got an UI up and running!
22

3-
Or as done as it can be, really. A true graphics engine would have many other things: textures, multicolored meshes, fragment shaders, interpolation and many other things that are a consequence of the literal decades put into developing this area. It is, however, _good enough_, when you take into account the limitations that svg imposes upon us.
3+
This part is the bane of my existence because there's not much technical and fun to do, and its mostly a way to display (and subsequently drag the development of) an already finished project. But, unfortunately, it's necessary. Otherwise, I'd be doing the equivalent of building a computer with no screen, no user input and output - there's no way to know it even works!
44

5-
First things first, a careful eye might have noticed that the last rendering scene missed a certain 'reflection' you get from illuminating most objects. Think of the litte white spot you see in a billiard ball when it's put against a light source - this is something that emerges naturally whenever you have a reflective surface, because it's just a result of light reflecting on it and going directly to your eyes.
6-
To make our rendered meshes have the same effect, we implement something called the Phong reflection model, which is the "algorithm" (or, to better put it, formulas) to calculate the light that'll go to our eyes. This is a relatively expensive operation (involves exponentiating by 64), so I left it as an optinal feature, per object.
5+
I thought of some different ideas (making a physics engine, orbit simulation, animations, etc) but ultimately settled for just making a simple inspector where a user can create primitive shapes, move them around, add lights, etc. This is by all means not at all a complicated task, but it certainly is for a developer like me.
76

8-
Second, and the reason that I'm saying that the engine is "complete", is that we can now just read data from an `.obj` file and it will be rendered to the screen (after I wrote the parser for it, of course).
9-
We can render meshes with a surprisingly high number of triangles with this method. I could, (running at around ~3 fps), render a model of the Eiffel Tower with over 400k triangles!
10-
Attached, renders of some more complex 3D models!
7+
We've got some of this up and running! Not my proudest work and it's due some changes, but it will suffice for now. I expect I will be able to ship this project soon.
8+
9+
Attached, our UI!
1110

1211
**Commits**
13-
[Commit 9b2fdb3](https://github.com/Sekqies/native-html-images/commit/9b2fdb380168e8b45290ce3911ab5e9e0c30f234): Added specular lighting
14-
[Commit e91435b](https://github.com/Sekqies/native-html-images/commit/e91435b7ee373333b1a42de204adcc528b3571d7): Adedd obj parsing
12+
[Commit 626dfa9](https://url.jam06452.uk/132w37n): Added geometry normalization for imported vertices
13+
[Commit e5b2ad7](https://url.jam06452.uk/vmcjuu): Added new primitives
14+
[Commit 85b98f5](https://url.jam06452.uk/1h03mo4): Generalized 3d ngon creation
15+
[Commit ca18aa8](https://url.jam06452.uk/1t7tg3s): Finished basic inspector

‎index.html‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Down with canvas!</title>
77
<script type="module" src="/src/main.ts"></script>
88
</head>
9-
<body bgcolor="black" text="white">
9+
<body bgcolor="grey" text="white">
1010
<center>
1111
<h1><font face="Arial">Down with canvas</font></h1>
1212

@@ -63,24 +63,6 @@ <h3><font face="Arial">Inspector</font></h3>
6363
</table>
6464

6565
<br><br>
66-
67-
<table border="1" cellpadding="10" cellspacing="0" bgcolor="#111111">
68-
<tr>
69-
<td align="center">
70-
<h3><font face="Arial">Model Preview</font></h3>
71-
<svg
72-
width="400px"
73-
height="300px"
74-
viewBox="-1 -1 2 2"
75-
preserveAspectRatio="none"
76-
stroke-width ="0.01"
77-
id="model-preview-container"
78-
shape-rendering ="optimizeSpeed"
79-
bgcolor="black"
80-
></svg>
81-
</td>
82-
</tr>
83-
</table>
8466

8567
</center>
8668
</body>

‎src/math/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@ export const IndexingType = Uint32Array;
33
export type ArrayType = InstanceType<typeof ArrayType>
44
export type IndexingType = InstanceType<typeof IndexingType>
55

6+
export type Line = {
7+
directional_vector:vec3,
8+
point:vec3
9+
}
10+
611
export type vec2 = ArrayType;
712
export type vec3 = ArrayType;
813
export type vec4 = ArrayType;

‎src/rendering/types/node.ts‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { mat4, vec3 } from "../../math/types";
1+
import { mat4, vec3, type Line } from "../../math/types";
22
import { identity, translate, rotate, scale } from "../../math/transformations";
33
import type { Mesh } from "./mesh";
44

@@ -7,14 +7,55 @@ export class Node {
77
position: vec3 = vec3(0,0,0);
88
rotation: vec3 = vec3(0, 0, 0);
99
scale_vec: vec3 = vec3(1, 1, 1);
10+
radius:vec3 = vec3(1,1,1);
11+
radius_reciprocal:vec3 = vec3(1,1,1);
1012

1113
model: mat4 = identity();
1214

1315
constructor(mesh: Mesh) {
1416
this.mesh = mesh;
1517
this.update_matrix();
18+
this.determine_radius;
1619
}
1720

21+
private determine_radius(){
22+
const EPSILON = 0.0001;
23+
const biggest:vec3 = vec3(EPSILON,EPSILON,EPSILON);
24+
const vertices = this.mesh.vertices;
25+
for(let i = 0 ; i < vertices.length; i+=3){
26+
for(let j = 0; j < 3; j++){
27+
biggest[j] = Math.max(biggest[j],Math.abs(vertices[i+j]));
28+
}
29+
}
30+
this.radius = biggest;
31+
for(let j = 0; j < 3; ++j){
32+
this.radius_reciprocal[j] = 1/(this.radius[j] ** 2);
33+
}
34+
}
35+
36+
37+
intersects_with(line:Line){
38+
const [ux,uy,uz] = line.directional_vector;
39+
const px = line.point[0] - this.position[0];
40+
const py = line.point[1] - this.position[1];
41+
const pz = line.point[2] - this.position[2];
42+
43+
const [recip_a,recip_b,recip_c] = this.radius_reciprocal;
44+
const A = ux * ux * recip_a + uy * uy * recip_b + uz * uz * recip_c;
45+
const B = 2 * (px * ux * recip_a + py * uy * recip_b + pz * uz * recip_c);
46+
const C = px * px * recip_a + py * py * recip_b + pz * pz * recip_c - 1;
47+
48+
if(C<=0) return true;
49+
50+
if(B>0) return false;
51+
52+
const delta = B*B - 4 * A * C;
53+
return delta >= 0;
54+
}
55+
56+
57+
58+
1859
update_matrix() {
1960
let m = identity();
2061

‎src/ui/scene_manager.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export class SceneManager {
6565

6666
private setup_lights() {
6767
const sun_light = new Light(vec3(10, 10, 10), vec3(1.0, 0.95, 0.9), 3.0, 200.0);
68-
const point_light = new Light(vec3(0, 5, 0), vec3(1.0, 1.0, 0.8), 5.0, 15.0);
68+
const leskow_light = new Light(vec3(5,0,0),vec3(0.8,0.2,0.0), 2.0, 100.0);
6969
this.scene.add_light(sun_light);
70-
this.scene.add_light(point_light);
70+
this.scene.add_light(leskow_light);
7171
}
7272

7373
public add_node(geo: Geometry) {
@@ -150,7 +150,7 @@ export class SceneManager {
150150
process_world_coordinates(this.scene, models, camera_pos);
151151

152152
const do_wireframe = this.wireframe_checkbox?.checked || false;
153-
render_scene(this.scene, mvps, do_wireframe);
153+
render_scene(this.scene, mvps, true);
154154

155155
this.target_element.innerHTML = build_scene(this.scene, do_wireframe, this.string_buffer);
156156

0 commit comments

Comments
 (0)