rtc-js/scene_chapter7.html at main · tplive/rtc-js · GitHub

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width">
<style>
pre {
  background-color: lightgrey;
}

body {
  font-family: sans-serif;
  margin: 3rem;
}
</style>
<title>The Raytracer Challenge - Chapter 7: Making a Scene</title>
</head>
<body>
<script>
window.onerror = function(errorMsg, url, lineNumber){
    const error = document.getElementById("error")
    error.innerHTML = "Error in " + url + " at " + lineNumber + ":\n" + errorMsg
}
</script>

<h1>&#127750; MAKING A SCENE</h1>
<p id="perf"></p>
<div id="kansas"></div>
<pre id="error"></pre>

<script src="./js/functions.js"></script>

<script>
// *** RUN SCENE

// Putting it together chapter 7. Scene from the book, page 106.

// Performance counter
const start = performance.now()

// *** DEFINE SCENE

const hsize = 10
const vsize = 10

// SCENE TELEMETRY
tuple = profile(tuple)
matrix = profile(matrix)
color = profile(color)

log("error", `Image dimensions: ${hsize} x ${vsize}`)
const floor = sphere()
floor.transform = scaling(10, 0.01, 10)
floor.material.color = color(1, 0.9, 0.9)
floor.material.specular = 0.0
log("error", "Background color: " + floor.material.color.scaled())

const left_wall = sphere()
//left_wall.transform = transformations(scaling(10, 0.01, 10), rotation_x(π/2), rotation_y(-π/4), translation(0, 0, 5))
left_wall.transform = translation(0, 0, 5).times_matrix(rotation_y(-π/4).times_matrix(rotation_x(π/2).times_matrix(scaling(10, 0.01, 10))))
left_wall.material = floor.material

const right_wall = sphere()
//right_wall.transform = transformations(scaling(10, 0.01, 10), rotation_x(π/2),  rotation_y(π/4), translation(0, 0, 5))
right_wall.transform = translation(0, 0, 5).times_matrix(rotation_y(π/4).times_matrix(rotation_x(π/2).times_matrix(scaling(10, 0.01, 10))))
right_wall.material = floor.material

const middle = sphere()
middle.transform = translation(-0.5, 1, 0.5)
middle.material.color = color(Math.random(), Math.random(), Math.random())
log("error", "Middle sphere: " + middle.material.color.scaled())
middle.material.diffuse = 0.7
middle.material.specular = 0.3

const right = sphere()
//right.transform = transformations(translation(2.8, 1, -0.5), scaling(0.5, 0.5, 0.5))
right.transform = scaling(0.5, 0.5, 0.5).times_matrix(translation(2.8, 1, -0.5))
right.material.color = color(Math.random(), Math.random(), Math.random())
log("error", "Right sphere: " + right.material.color.scaled())
right.material.diffuse = 0.7
right.material.specular = 0.3

const left = sphere()
//left.transform = transformations(translation(-5.5, 1, -0.75), scaling(0.33, 0.33, 0.33))
left.transform = scaling(0.33, 0.33, 0.33).times_matrix(translation(-5.5, 1, -0.75))
left.material.color = color(Math.random(), Math.random(), Math.random())
log("error", "Left sphere: " + left.material.color.scaled())
left.material.diffuse = 0.7
left.material.specular = 0.3

const light = point_light(point(-10, 10, -10), color(1, 1, 1))

log("error", "Light color: " + light.intensity.scaled())

const cam = camera(hsize, vsize, π/3)
const from = point(0, 1.5, -5)
const to = point(0, 1, 0)
const up = vector(0, 1, 0)
cam.transform = view_transform(from, to, up)

const myworld = world()

myworld.addLight(light)
myworld.addObject(floor)
myworld.addObject(left_wall)
myworld.addObject(right_wall)
myworld.addObject(middle)
myworld.addObject(right)
myworld.addObject(left)

const can = render(cam, myworld)

// HTML canvas
const html_can = html_canvas("kansas", can.width, can.height)
var context = html_can.getContext("2d")
context.fillStyle = "black"
context.fillRect(0, 0, can.width, can.height)

canvas_to_html_canvas(context, can)


// Performance measurement
const end = performance.now()
const elapsed = end - start
const counter_id = "scene"
const cumulated_id = counter_id + "_running_time"
const numberOfRuns_id = counter_id + "_runs"

const cumulated = localStorage.getItem(cumulated_id)
const runs = localStorage.getItem(numberOfRuns_id)

localStorage.setItem(numberOfRuns_id, Number(runs) + 1)
localStorage.setItem(cumulated_id, Number(cumulated) + elapsed)

log("perf", "Calculation running time: " + Math.round(elapsed) + " ms.")
log("perf", "Running time per pixel: " + Math.round(elapsed)/(cam.vsize * cam.hsize) + " ms.")
log("perf", "Average running time: " + (cumulated / runs).toFixed(4) + " ms.")

Object.keys(_calls).length > 0 ? log("perf", JSON.stringify(_calls,0,3)) : null
</script>

</body>

</html>