-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·105 lines (98 loc) · 5.73 KB
/
index.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
<html>
<head>
<style>
p{
width: 80%;
}
</style>
</head>
<body>
<h1> MyCar: class project corso di Computer Grafica AA 2021/22</h1>
<a href="renderer_00/index.html"> <b> Renderer_00 </b> </a>
<p>
<ol>
<li>
use <code> Renderer.car.frame </code> to replace the white triangle with the car you modeled in code1_transformations
</li>
<li>
<p>implement the chase camera>
The chase camera is camera that follows the car from behind and slightly above, as shown in the figure. You need to define this camera in the object frame of the car and then transform it into world space. Then you only need to setup the view matrix with the resulting camera.
The numbers shown in the illustration below are justs example, place you chase camera where you like</p>
<img src="images/chaseCamera.jpg" width="500px">
<img src="images/chaseCameraR.jpg" width="200px">
</li>
</ol>
</p>
<a href="renderer_01/index.html"> <b> Renderer_01 </b> </a>
<p>
<ul>
<li>
use <code> Renderer.car.wheelsAngle</code> to rotate the front wheels so to how then the car is turning </li>
<li>
use <code> Renderer.car.speed</code> to rotate all wheels according to the speed of the car (and the diameter of your wheels). It does not need to be phyiscally accurate</li>
<li>
Add some form of lighting computation (Phong lighting is fine) using any shading mode you like. <ul>
<li>Use <code> Game.scene.weather.sunLightDirection</code> for the direction of the sun to use a directional light. </li>
<li>
<code> Game.scene.lamps</code> is an array of streetlamps, each lamp has a position and an height value. Place one spothlight for each lamp pointing down
</li>
</ul>
</ul>
</p>
<a href="renderer_02/index.html"> <b> Renderer_02 </b> </a>
<p>
<ol>
<li>
<b>Add textures to the scene elements</b>: the ground, the track and the buildings.<br>
<h3>track and ground</h3>
The elements <code>Game.scene.trackObj</code> and <code>Game.scene.groundObj</code> already have texture coordinates in the buffer <code> texCoords</code>
The <code> u </code> texture coordinate for the vertices of the track is set as the length of the track up to that point. The <code> v </code> is 0 for the vertices on one side of the track and 1 for the vertices in the other side.)
<br><img src="images/trackTex.png" width = "50%"><br><br>
The only thing to do is load the image, create the new vertex atribute for the texture coordinates, create the texture and access it from the program shader. It is all contained in the code
<a href="https://replit.com/@727AA2122CG/code-6-class-Texture-mapping-bump-normal-parallax-mapping#index.html">code-6-class-Texture-mapping-bump-normal-parallax-mapping</a><br>
<h3>buildings</h3>
Each building is now split in <i> facades</i> and <i>roof</i>: <br>
<code> Game.scene.buildingsObjTex[i] </code>: facades of the i-th building<br>
<code> Game.scene.buildingsObjTex[i].roof </code>: roof of the i-th building<br>
<img src="images/buildingTex.png" width = "50%" ><br>
All buildings have 4 facades and their texture coordinates are found by unrolling them in texture space. (see figure above)<br>
The roof are just made of a quadrilateral.<br>
A sample of images for the ground, the track, the facades and the roofs can be found in <code> common/textures </code> or you can find textures of your liking on the internet, for example<br>
<a href="https://archivetextures.net/">https://archivetextures.net</a><br>
<a href="http://texturer.com/">http://texturer.com/</a><br>
or just google for it, or make your own..
</li>
<li>
Use <b>Projective Texture Mapping</b> (slide 26 of "Lez_14-15 Texture mapping II 07_04-2022_11_04_2022.pdf") to add car's headlights.<br>
Steps for the front right headlight:<br>
<ol>
<li> place a view frame just like for the chase camera in the "Renderer 00" but this time in the front-right part of the car.
</li>
<li> pass the corresponding view matrix to the vertex shader
</li>
<li> In the vertex shader, transform the coordinates using this view matrix and store the result in a texture coordinates varying variable.
</li>
<li> In the fragment shader, access the headlight texture with the input texture coordinates.
</li>
</ol>
You can use the texture in <code>common/textures/headlights.png</code>.<br>
<img src="common/textures/headlight.png" width="300px" border="1"> <br>
<b> note </b>: the image is a RGBA image, where the A component is the transparency. At the center is is 255 (fully opaque) and then it decreases to 0 at the circle border.<br>
Use the A channel to blend the texture color of the headlight in the final result.
</li>
</ol>
</p>
<a href="renderer_03/index.html"> <b> Renderer_03 </b> </a>
<p>
<ol>
<li> The headlight of the car added in Renderer_02 do not just project on the first surface in front of the car but in the whole frustum of the headlight. Use Shadow Mapping to fix this behaviour.
A basic shadow mapping with a small bias will be sufficient.
</li>
<li>
Add a camera like the chasing camera of Renderer_00 that can be controlled by the user.
The user control consists of changing the position of the point of view with the keyboard and the view direction with the mouse.
</li>
</ol>
</p>
</body>
</html>