-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3d_help.html
105 lines (101 loc) · 6.7 KB
/
3d_help.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Web Dev Project</title>
<meta name="title" content="3D Engine documentation">
<meta name="description" content="Documentation for the 3D Rendering Engine">
<meta name="keywords" content="Dawid Kawka, Web Dev, Web Dev Project, Assessment, 3d, 3D, 3d engine, 3D Engine, simple, simple 3D Engine, WebGL 2">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="index, follow">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="English">
<meta name="author" content="Dawid Kawka">
<link rel="stylesheet" href="./styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/site.webmanifest">
</head>
<body>
<header>
<a href="index.html">
<h1>
Web Dev Project - 3D Engine
</h1>
</a>
<h2>by Dawid Kawka</h2>
</header>
<main>
<aside>
<a href="index.html" style="text-decoration: underline;"><h1>Main Page</h1></a>
<h2>Project Links</h2>
<div>
<a href="hex-viewer/index.html" class="applink">
<div>
<img src="hexview.webp" alt="Image of the hex editor">
<h3>Hex Editor</h3>
</div>
</a>
</div>
<div>
<a href="3d-engine/index.html#full-showcase" class="applink">
<div>
<img src="3ddd.webp" alt="Image of the 3D Engine">
<h3>3D Engine</h3>
</div>
</a>
</div>
<h2>Documentation Links</h2>
<div>
<a href="hex_help.html" class="applink">
<h3>Hex Editor documentation</h3>
</a>
</div>
<div>
<a href="3d_help.html" class="applink">
<h3>3D Engine documentation</h3>
</a>
</div>
</aside>
<article>
<h2>3D Rendering engine - What does it do?</h2>
<p>
A rendering engine's job is to draw graphics to the screen for the user to see.
There are many different types of rendering engines, but a 3D Rendering engine is responsible for drawing 3D graphics.
These 3D engines are used for anything from games and movies, to drawing graphs.<br/>
My 3D engine was originally designed for drawing graphics for games, however it was repurposed as a model viewing program.
It can load 3D models in the GLTF format and render them to the screen.
It also gives the user extra tools for playing around with the rendered models like lights and animations.
</p>
<h2>How to use it</h2>
<p>
First of all, although it can render its graphics correctly, my 3D engine does not work correctly on mobile devices. It doesn't provide any controls or on-screen joysticks for mobiles, meaning that moving the camera is not possible. <br/>
My 3D engine draws things in the following order: 3D graphics, overlay with basic informations, and windows for managing the 3D environment.
Windows are on top of everything, meaning that to be able to access the 3D graphics you might have to minimize and move some of them out of the way.<br/>
To start controlling the camera in the 3D environment you have to click on the 3D scene. My engine will automatically hide the mouse pointer and give you control over the camera.<br/>
Pressing the WSAD keys will move the camera forward, backward, left and right respectively. Use Left Shift to move down and space to move up. You can slow down your movements by pressing the left Alt key. When CapsLock is enabled the camera will move twice as fast as it normally would. To exit the camera press the ESC key.
</p>
<p>
You can also control the 3D environment through the windows my engine provides. Through these windows you can scale, rotate and move all loaded 3D objects and control all lights. Windows also give you the ability to delete objects, play animations, and change the engine's settings.<br/>
This means that there could be a lot of windows on screen at any given time, which is why I added the ability to move them and minimize them.<br/>
Windows which control objects can also be closed and later reopened through the Object Manager window.
You can change which example scene is loaded as well as exit the engine through the Navigator window.
The last important window is the Light manager. It gives you the ability to create new point lights, as well as control the directional light.<br/>
You can also upload your own 3D models and display them in the 3D engine. First make sure the model is exported as a .gltf file, and that it has all the needed textures and models embedded in it. To upload the file, simply drag and drop it over the webpage. When you drag the file over the website it will display an overlay show you that it is recognising the file as a file. Do make sure you are dragging the file from your file manager and not a different program, othrewise your web browser might not see it properly.
Alternatively you can use the Browse button at the bottom of the Object Manager window to upload files. Once uploaded, the model will be displayed at position 0, 0, 0.
</p>
<h2>Available Examples</h2>
<p>
My 3D engine only provides you with only two example projects.<br/>
The first one is simply blank. At startup it will only contain a plane with a grid on it, and one point light. Its intended to be used mostly for viewing your 3D models.<br/>
The second project is more interesting. It contains several test 3D models I added to showcase the engine's capabilities. It contains several animated and textured cubes (yes, the teleporting one works as intended), sets of boxes which play a bending animation (each of these has a different structure inside of the .gltf file), Suzanne (the monkey head) which is animated through javascript only, the ground, and 25 point lights with random colours.<br/>
</p>
<h2>Where to get 3D models from</h2>
<p>
There are many places online where you can find .gltf models. One example of such a place would be <a href="https://sketchfab.com/3d-models/">SketchFab</a> which has many 3D models you can download. Some of the models on SketchFab might not be free or available for download though.<br/>
Alternatively, you can try to make your own 3D models. Good examples of 3D modeling programs are <a href="https://www.blockbench.net/">BlockBench</a> and <a href="https://www.blender.org/">Blender</a> which are both free (BlockBench is also available as a web app). Most models exported through BlockBench should work great, but Blender might use some features which are not supported in my 3D engine.
</p>
</article>
</main>
</body>
</html>