From dffef6657c64de2f9985e0a8f8cf52174fda4ac9 Mon Sep 17 00:00:00 2001
From: bill <b@i.ll>
Date: Wed, 24 Feb 2021 22:43:53 +0800
Subject: [PATCH] Added interaction, more descriptions. But fixes.

---
 .gitignore  |   2 +
 RTXoff.svg  | 103 ++++++++++++++++++++++++++++++++
 RTXon.svg   | 105 ++++++++++++++++++++++++++++++++
 index.html  | 168 +++++++++++++++++++++++++++++++++++++++++++++-------
 lib2.js     |   4 +-
 shader.frag |  45 ++++++++++----
 6 files changed, 389 insertions(+), 38 deletions(-)
 create mode 100644 RTXoff.svg
 create mode 100644 RTXon.svg

diff --git a/.gitignore b/.gitignore
index e43b0f9..96f05f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,3 @@
 .DS_Store
+old/
+new/
diff --git a/RTXoff.svg b/RTXoff.svg
new file mode 100644
index 0000000..80488f7
--- /dev/null
+++ b/RTXoff.svg
@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 906 215" style="enable-background:new 0 0 906 215;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#666666;}
+	.st1{fill:#606060;}
+	.st2{fill:#1D1E1D;}
+	.st3{fill:#FFFFFF;}
+	.st4{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
+</style>
+<rect x="601.61" y="-0.13" class="st0" width="306" height="215"/>
+<path class="st1" d="M604.9,214.84H-2.43V0.18h662L604.9,214.84z"/>
+<path class="st2" d="M307.9,0.18l-57.16,214.67h341.99L646.9,0.18H307.9z"/>
+<path class="st3" d="M323.71,65.38V39.35c0-1.81,0.64-3.35,1.9-4.62c1.27-1.27,2.8-1.91,4.61-1.91h24.72v6.93h-21.79
+	c-0.54,0-1,0.2-1.38,0.59s-0.57,0.85-0.57,1.37v21.29c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.38,0.55h13.51
+	c0.54,0,1-0.18,1.39-0.55c0.38-0.38,0.57-0.83,0.57-1.37v-7.29h-9.33v-6.93h16.93v16.61c0,1.77-0.64,3.29-1.91,4.56
+	c-1.28,1.27-2.82,1.9-4.62,1.9h-19.48c-1.8,0-3.34-0.63-4.61-1.9C324.35,68.67,323.71,67.15,323.71,65.38"/>
+<path class="st3" d="M363.69,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v9.08h19.75v6.93"/>
+<path class="st3" d="M396.45,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v16.01"/>
+<path class="st3" d="M436.14,62.98c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.38,0.55h13.52c0.54,0,1-0.18,1.39-0.55
+	c0.38-0.38,0.57-0.83,0.57-1.37V41.75c0-0.54-0.19-1.01-0.57-1.41c-0.38-0.4-0.84-0.6-1.39-0.6H438.1c-0.54,0-1,0.2-1.38,0.6
+	c-0.38,0.4-0.57,0.87-0.57,1.41V62.98z M428.65,65.38V39.35c0-1.81,0.63-3.35,1.89-4.62c1.27-1.27,2.78-1.91,4.54-1.91h19.5
+	c1.76,0,3.29,0.64,4.55,1.91c1.27,1.28,1.91,2.82,1.91,4.62v26.03c0,1.79-0.63,3.31-1.89,4.57c-1.27,1.26-2.79,1.89-4.57,1.89h-19.5
+	c-1.79,0-3.3-0.63-4.55-1.89C429.28,68.69,428.65,67.17,428.65,65.38"/>
+<path class="st3" d="M475.47,49.02h12.73c0.54,0,1-0.19,1.38-0.57c0.39-0.38,0.57-0.84,0.57-1.38v-5.3c0-0.54-0.19-1.01-0.57-1.41
+	c-0.38-0.4-0.84-0.6-1.38-0.6h-12.73V49.02z M467.98,71.84V32.82h23.39c1.8,0,3.34,0.64,4.6,1.91c1.27,1.28,1.9,2.82,1.9,4.62v10.05
+	c0,1.8-0.63,3.35-1.9,4.62c-1.27,1.28-2.8,1.91-4.61,1.91h-0.48l9.55,15.89h-8.16l-9.65-15.89h-7.16v15.89"/>
+<path class="st3" d="M504.77,65.38V39.35c0-1.81,0.63-3.35,1.9-4.62c1.27-1.27,2.8-1.91,4.61-1.91h19.5v6.93h-16.56
+	c-0.54,0-1.01,0.2-1.39,0.59c-0.38,0.39-0.57,0.85-0.57,1.37v21.29c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.39,0.55h16.56
+	v6.93h-19.5c-1.8,0-3.34-0.63-4.61-1.9C505.4,68.67,504.77,67.15,504.77,65.38"/>
+<path class="st3" d="M537.34,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v9.08h19.75v6.93"/>
+<path class="st3" d="M573.1,36.84h-0.82V35.3h0.82c1,0,1,0.57,1,0.76C574.1,36.25,574.1,36.84,573.1,36.84 M575.19,36.06
+	c0-1.14-0.8-1.86-2.09-1.86h-1.91v5.18h1.09v-1.44h0.82c0.05,0,0.1,0,0.15,0l1.05,1.45h1.36l-1.29-1.76
+	C574.9,37.29,575.19,36.74,575.19,36.06 M573.21,40.68c-2,0-3.63-1.63-3.63-3.64s1.63-3.63,3.63-3.63s3.63,1.63,3.63,3.63
+	S575.21,40.68,573.21,40.68 M573.21,32.82c-2.33,0-4.23,1.89-4.23,4.23s1.9,4.23,4.23,4.23s4.23-1.9,4.23-4.23
+	S575.54,32.82,573.21,32.82"/>
+<path class="st3" d="M341.65,118.07h30.51c1.3,0,2.41-0.46,3.32-1.37c0.92-0.91,1.38-2.02,1.38-3.31v-12.72
+	c0-1.29-0.46-2.42-1.38-3.38c-0.91-0.96-2.03-1.44-3.32-1.44h-30.51V118.07z M323.72,172.75v-93.5h56.03
+	c4.33,0,8.01,1.53,11.04,4.59c3.03,3.05,4.55,6.75,4.55,11.08v24.09c0,4.33-1.52,8.02-4.55,11.08c-3.04,3.05-6.72,4.59-11.05,4.59
+	h-1.14l22.89,38.08h-19.54l-23.12-38.08h-17.17v38.08"/>
+<path class="st3" d="M408.39,95.58V79.25h71.75v16.33h-26.77v77.17h-18.21V95.58"/>
+<path class="st3" d="M484.82,172.75l30.99-47.19l-29.18-46.45h21.95l18.47,29.52l18.81-29.52h20.15l-29.52,44.44l31.12,49.2h-21.89
+	l-20.35-31.93l-20.55,31.93"/>
+<path class="st3" d="M221.13,167.89v-1.14h0.73c0.4,0,0.95,0.03,0.95,0.52c0,0.53-0.28,0.62-0.75,0.62H221.13 M221.13,168.7h0.49
+	l1.14,2h1.25l-1.26-2.09c0.65-0.05,1.19-0.36,1.19-1.23c0-1.09-0.75-1.45-2.03-1.45h-1.84v4.77h1.06V168.7 M226.49,168.33
+	c0-2.8-2.17-4.42-4.59-4.42c-2.44,0-4.61,1.62-4.61,4.42c0,2.8,2.18,4.43,4.61,4.43C224.32,172.75,226.49,171.12,226.49,168.33
+	 M225.16,168.33c0,2.04-1.5,3.41-3.27,3.41v-0.01c-1.82,0.01-3.29-1.36-3.29-3.39c0-2.04,1.47-3.4,3.29-3.4
+	C223.67,164.93,225.16,166.29,225.16,168.33"/>
+<path class="st3" d="M110.83,137.83l0,33.49h9.46v-33.49H110.83z M36.43,137.78v33.54h9.54v-25.46l7.39,0c2.45,0,4.2,0.61,5.37,1.87
+	c1.5,1.59,2.11,4.17,2.11,8.87v14.73h9.25v-18.53c0-13.22-8.43-15.01-16.68-15.01H36.43z M126.06,137.83v33.49h15.34
+	c8.17,0,10.84-1.36,13.73-4.41c2.04-2.14,3.36-6.84,3.36-11.97c0-4.71-1.11-8.91-3.06-11.52c-3.5-4.68-8.55-5.59-16.09-5.59H126.06z
+	 M135.44,145.12h4.06c5.9,0,9.71,2.65,9.71,9.52c0,6.88-3.81,9.53-9.71,9.53h-4.06V145.12z M97.2,137.83l-7.89,26.54l-7.56-26.54
+	l-10.21,0l10.8,33.49h13.63l10.89-33.49H97.2z M162.88,171.32h9.46v-33.48l-9.46,0V171.32z M189.4,137.84l-13.21,33.46h9.33
+	l2.09-5.91h15.63l1.97,5.91h10.12l-13.3-33.47L189.4,137.84z M195.54,143.95l5.73,15.68h-11.64"/>
+<path class="st3" d="M61.86,71.16c0,0,12.17-17.96,36.47-19.81v-6.52c-26.91,2.16-50.22,24.96-50.22,24.96s13.2,38.16,50.22,41.65
+	v-6.93C71.16,101.09,61.86,71.16,61.86,71.16"/>
+<path class="st3" d="M98.33,90.74v6.34c-20.53-3.66-26.23-25-26.23-25s9.86-10.92,26.23-12.69v6.96c-0.01,0-0.02,0-0.03,0
+	c-8.59-1.03-15.3,7-15.3,7S86.75,86.86,98.33,90.74"/>
+<path class="st3" d="M98.33,32.81v12.02c0.79-0.06,1.58-0.11,2.38-0.14c30.6-1.03,50.54,25.1,50.54,25.1s-22.9,27.84-46.75,27.84
+	c-2.19,0-4.23-0.21-6.16-0.54v7.43c1.64,0.21,3.35,0.33,5.13,0.33c22.2,0,38.25-11.34,53.8-24.75c2.58,2.07,13.13,7.09,15.3,9.28
+	c-14.78,12.38-49.23,22.35-68.75,22.35c-1.88,0-3.69-0.11-5.47-0.29v10.44h84.38V32.81"/>
+<path class="st3" d="M98.33,59.39v-8.05c0.78-0.05,1.57-0.1,2.38-0.12c22-0.69,36.44,18.91,36.44,18.91s-15.59,21.65-32.31,21.65
+	c-2.41,0-4.56-0.38-6.5-1.04V66.35c8.57,1.04,10.29,4.82,15.44,13.4l11.46-9.66c0,0-8.36-10.96-22.46-10.96
+	C101.23,59.12,99.76,59.23,98.33,59.39"/>
+<g>
+	<path class="st4" d="M748.65,113.4c0,32.02-19.46,48.99-43.19,48.99c-24.56,0-41.81-19.04-41.81-47.2
+		c0-29.53,18.35-48.85,43.19-48.85C732.22,66.34,748.65,85.8,748.65,113.4z M676.47,114.92c0,19.87,10.76,37.67,29.67,37.67
+		c19.04,0,29.81-17.53,29.81-38.64c0-18.49-9.66-37.81-29.67-37.81C686.41,76.14,676.47,94.49,676.47,114.92z"/>
+	<path class="st4" d="M764.24,67.86h50.09v10.07h-38.09v30.91h35.19v9.94h-35.19v42.09h-12.01V67.86z"/>
+	<path class="st4" d="M831.45,67.86h50.09v10.07h-38.09v30.91h35.19v9.94h-35.19v42.09h-12.01V67.86z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/RTXon.svg b/RTXon.svg
new file mode 100644
index 0000000..d3124d7
--- /dev/null
+++ b/RTXon.svg
@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 906 215" style="enable-background:new 0 0 906 215;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#75B943;}
+	.st1{fill:#1D1E1D;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#FFFFFF;stroke:#FFFFFF;stroke-miterlimit:10;}
+</style>
+<rect x="601.61" y="-0.13" class="st0" width="306" height="215"/>
+<g id="surface1">
+	<path class="st0" d="M604.9,214.84H-2.43V0.18h662L604.9,214.84z"/>
+	<path class="st1" d="M307.9,0.18l-57.16,214.67h341.99L646.9,0.18H307.9z"/>
+	<path class="st2" d="M323.71,65.38V39.35c0-1.81,0.64-3.35,1.9-4.62c1.27-1.27,2.8-1.91,4.61-1.91h24.72v6.93h-21.79
+		c-0.54,0-1,0.2-1.38,0.59s-0.57,0.85-0.57,1.37v21.29c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.38,0.55h13.51
+		c0.54,0,1-0.18,1.39-0.55c0.38-0.38,0.57-0.83,0.57-1.37v-7.29h-9.33v-6.93h16.93v16.61c0,1.77-0.64,3.29-1.91,4.56
+		c-1.28,1.27-2.82,1.9-4.62,1.9h-19.48c-1.8,0-3.34-0.63-4.61-1.9C324.35,68.67,323.71,67.15,323.71,65.38"/>
+	<path class="st2" d="M363.69,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v9.08h19.75v6.93"/>
+	<path class="st2" d="M396.45,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v16.01"/>
+	<path class="st2" d="M436.14,62.98c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.38,0.55h13.52c0.54,0,1-0.18,1.39-0.55
+		c0.38-0.38,0.57-0.83,0.57-1.37V41.75c0-0.54-0.19-1.01-0.57-1.41c-0.38-0.4-0.84-0.6-1.39-0.6H438.1c-0.54,0-1,0.2-1.38,0.6
+		c-0.38,0.4-0.57,0.87-0.57,1.41V62.98z M428.65,65.38V39.35c0-1.81,0.63-3.35,1.89-4.62c1.27-1.27,2.78-1.91,4.54-1.91h19.5
+		c1.76,0,3.29,0.64,4.55,1.91c1.27,1.28,1.91,2.82,1.91,4.62v26.03c0,1.79-0.63,3.31-1.89,4.57c-1.27,1.26-2.79,1.89-4.57,1.89
+		h-19.5c-1.79,0-3.3-0.63-4.55-1.89C429.28,68.69,428.65,67.17,428.65,65.38"/>
+	<path class="st2" d="M475.47,49.02h12.73c0.54,0,1-0.19,1.38-0.57c0.39-0.38,0.57-0.84,0.57-1.38v-5.3c0-0.54-0.19-1.01-0.57-1.41
+		c-0.38-0.4-0.84-0.6-1.38-0.6h-12.73V49.02z M467.98,71.84V32.82h23.39c1.8,0,3.34,0.64,4.6,1.91c1.27,1.28,1.9,2.82,1.9,4.62
+		v10.05c0,1.8-0.63,3.35-1.9,4.62c-1.27,1.28-2.8,1.91-4.61,1.91h-0.48l9.55,15.89h-8.16l-9.65-15.89h-7.16v15.89"/>
+	<path class="st2" d="M504.77,65.38V39.35c0-1.81,0.63-3.35,1.9-4.62c1.27-1.27,2.8-1.91,4.61-1.91h19.5v6.93h-16.56
+		c-0.54,0-1.01,0.2-1.39,0.59c-0.38,0.39-0.57,0.85-0.57,1.37v21.29c0,0.54,0.19,1,0.57,1.37c0.38,0.37,0.84,0.55,1.39,0.55h16.56
+		v6.93h-19.5c-1.8,0-3.34-0.63-4.61-1.9C505.4,68.67,504.77,67.15,504.77,65.38"/>
+	<path class="st2" d="M537.34,71.84V32.81h27.34v6.93h-19.75v9.16h15.86v6.93h-15.86v9.08h19.75v6.93"/>
+	<path class="st2" d="M573.1,36.84h-0.82V35.3h0.82c1,0,1,0.57,1,0.76C574.1,36.25,574.1,36.84,573.1,36.84 M575.19,36.06
+		c0-1.14-0.8-1.86-2.09-1.86h-1.91v5.18h1.09v-1.44h0.82c0.05,0,0.1,0,0.15,0l1.05,1.45h1.36l-1.29-1.76
+		C574.9,37.29,575.19,36.74,575.19,36.06 M573.21,40.68c-2,0-3.63-1.63-3.63-3.64s1.63-3.63,3.63-3.63s3.63,1.63,3.63,3.63
+		S575.21,40.68,573.21,40.68 M573.21,32.82c-2.33,0-4.23,1.89-4.23,4.23s1.9,4.23,4.23,4.23s4.23-1.9,4.23-4.23
+		S575.54,32.82,573.21,32.82"/>
+	<path class="st2" d="M341.65,118.07h30.51c1.3,0,2.41-0.46,3.32-1.37c0.92-0.91,1.38-2.02,1.38-3.31v-12.72
+		c0-1.29-0.46-2.42-1.38-3.38c-0.91-0.96-2.03-1.44-3.32-1.44h-30.51V118.07z M323.72,172.75v-93.5h56.03
+		c4.33,0,8.01,1.53,11.04,4.59c3.03,3.05,4.55,6.75,4.55,11.08v24.09c0,4.33-1.52,8.02-4.55,11.08c-3.04,3.05-6.72,4.59-11.05,4.59
+		h-1.14l22.89,38.08h-19.54l-23.12-38.08h-17.17v38.08"/>
+	<path class="st2" d="M408.39,95.58V79.25h71.75v16.33h-26.77v77.17h-18.21V95.58"/>
+	<path class="st2" d="M484.82,172.75l30.99-47.19l-29.18-46.45h21.95l18.47,29.52l18.81-29.52h20.15l-29.52,44.44l31.12,49.2h-21.89
+		l-20.35-31.93l-20.55,31.93"/>
+	<path class="st2" d="M221.13,167.89v-1.14h0.73c0.4,0,0.95,0.03,0.95,0.52c0,0.53-0.28,0.62-0.75,0.62H221.13 M221.13,168.7h0.49
+		l1.14,2h1.25l-1.26-2.09c0.65-0.05,1.19-0.36,1.19-1.23c0-1.09-0.75-1.45-2.03-1.45h-1.84v4.77h1.06V168.7 M226.49,168.33
+		c0-2.8-2.17-4.42-4.59-4.42c-2.44,0-4.61,1.62-4.61,4.42c0,2.8,2.18,4.43,4.61,4.43C224.32,172.75,226.49,171.12,226.49,168.33
+		 M225.16,168.33c0,2.04-1.5,3.41-3.27,3.41v-0.01c-1.82,0.01-3.29-1.36-3.29-3.39c0-2.04,1.47-3.4,3.29-3.4
+		C223.67,164.93,225.16,166.29,225.16,168.33"/>
+	<path class="st2" d="M110.83,137.83l0,33.49h9.46v-33.49H110.83z M36.43,137.78v33.54h9.54v-25.46l7.39,0
+		c2.45,0,4.2,0.61,5.37,1.87c1.5,1.59,2.11,4.17,2.11,8.87v14.73h9.25v-18.53c0-13.22-8.43-15.01-16.68-15.01H36.43z M126.06,137.83
+		v33.49h15.34c8.17,0,10.84-1.36,13.73-4.41c2.04-2.14,3.36-6.84,3.36-11.97c0-4.71-1.11-8.91-3.06-11.52
+		c-3.5-4.68-8.55-5.59-16.09-5.59H126.06z M135.44,145.12h4.06c5.9,0,9.71,2.65,9.71,9.52c0,6.88-3.81,9.53-9.71,9.53h-4.06V145.12z
+		 M97.2,137.83l-7.89,26.54l-7.56-26.54l-10.21,0l10.8,33.49h13.63l10.89-33.49H97.2z M162.88,171.32h9.46v-33.48l-9.46,0V171.32z
+		 M189.4,137.84l-13.21,33.46h9.33l2.09-5.91h15.63l1.97,5.91h10.12l-13.3-33.47L189.4,137.84z M195.54,143.95l5.73,15.68h-11.64"/>
+	<path class="st2" d="M61.86,71.16c0,0,12.17-17.96,36.47-19.81v-6.52c-26.91,2.16-50.22,24.96-50.22,24.96s13.2,38.16,50.22,41.65
+		v-6.93C71.16,101.09,61.86,71.16,61.86,71.16"/>
+	<path class="st2" d="M98.33,90.74v6.34c-20.53-3.66-26.23-25-26.23-25s9.86-10.92,26.23-12.69v6.96c-0.01,0-0.02,0-0.03,0
+		c-8.59-1.03-15.3,7-15.3,7S86.75,86.86,98.33,90.74"/>
+	<path class="st2" d="M98.33,32.81v12.02c0.79-0.06,1.58-0.11,2.38-0.14c30.6-1.03,50.54,25.1,50.54,25.1s-22.9,27.84-46.75,27.84
+		c-2.19,0-4.23-0.21-6.16-0.54v7.43c1.64,0.21,3.35,0.33,5.13,0.33c22.2,0,38.25-11.34,53.8-24.75c2.58,2.07,13.13,7.09,15.3,9.28
+		c-14.78,12.38-49.23,22.35-68.75,22.35c-1.88,0-3.69-0.11-5.47-0.29v10.44h84.38V32.81"/>
+	<path class="st2" d="M98.33,59.39v-8.05c0.78-0.05,1.57-0.1,2.38-0.12c22-0.69,36.44,18.91,36.44,18.91s-15.59,21.65-32.31,21.65
+		c-2.41,0-4.56-0.38-6.5-1.04V66.35c8.57,1.04,10.29,4.82,15.44,13.4l11.46-9.66c0,0-8.36-10.96-22.46-10.96
+		C101.23,59.12,99.76,59.23,98.33,59.39"/>
+</g>
+<g>
+	<path class="st3" d="M768.65,113.4c0,32.02-19.46,48.99-43.19,48.99c-24.56,0-41.81-19.04-41.81-47.2
+		c0-29.53,18.35-48.85,43.19-48.85C752.22,66.34,768.65,85.8,768.65,113.4z M696.47,114.92c0,19.87,10.76,37.67,29.67,37.67
+		c19.04,0,29.81-17.53,29.81-38.64c0-18.49-9.66-37.81-29.67-37.81C706.41,76.14,696.47,94.49,696.47,114.92z"/>
+	<path class="st3" d="M784.24,160.87V67.86h13.11l29.81,47.06c6.9,10.9,12.28,20.7,16.7,30.22l0.28-0.14
+		c-1.1-12.42-1.38-23.74-1.38-38.23V67.86h11.32v93.01h-12.14l-29.53-47.2c-6.49-10.35-12.7-20.98-17.39-31.05l-0.41,0.14
+		c0.69,11.73,0.97,22.91,0.97,38.36v39.74H784.24z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/index.html b/index.html
index 03424f2..6cde78c 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,7 @@
  </style>
 <body bgcolor=white text=black link=black alink=blue vlink=blue>
 <center>
+   <!!--- SUPER SAMPLING THE W/H PARAMS FOR CANVAS ARE RENDER SIZE, IN THE CSS IS ACTUAL(DISPLAY) SIZE.--->
 <canvas id='canvas1' style="width: 600px; height:600px;" width=1200 height=1200></canvas>
 </center>
 </body>
@@ -56,7 +57,19 @@ Solar RTX
 <p style="font-size:30px; ">In this homework, I implemented Global illumination w/ 
    Realtime Recursive Ray Tracing! 
 <p>
-<i style="font-size:25px;">Here is how it works:</i>
+<i style="font-size:25px;">Usage: </i>
+<ul>
+   <li>Ctrl+Alt/Option+T: Toggle Texture.</li>
+   <li>Ctrl+S: Download fragment shader.</li>
+   <li>Ctrl+Alt/Option+R: Toggle Recursive Ray Tracing.</li>
+   <li>Ctrl+Alt/Option+N: Reset ViewPoint.</li>
+   <li>Ctrl+Alt/Option+P: Toggle Pause/Resume.</li>
+   <li style="color:red;">Please unfocus the Editing area (click somewhere else on the page) to use hotkeys.</li>
+   <li>Click on canvas (WITHOUT key modifiers): Toggle Pause/Resume.</li>
+   <li>SHIFT+Alt/Option+MOUSE DRAG/WHEEL ZOOM: Changing Viewing point.</li>
+
+</ul>
+<i style="font-size:25px;">How it works:</i>
 <ul>
    <li>First, I started with what I've already done in homework 1. Which already included complete Phong shading with 
       Specular light and much more (spherical texture mapping, simple interactions, improved UI/shader editor).
@@ -65,10 +78,19 @@ Solar RTX
    <li> I modified the ray tracing algorithm so that when hitting an object, instead of returning color calculated from 
       Phong model:<br>
       <ul>
-         <li>I recursively traced the light reflected and refract from the object.</li>
-         <li></li>
+         <li>It recursively bounces and/or refract(NOT IMPLEMENTED YET) itself spawning new rays.</li>
+         <li>The color of this pixel equals to Ambient + Diffuse + ks*color[Reflected] + kt*color[Refracted]. 
+            (<a href="https://www.cs.drexel.edu/~david/Classes/Papers/p343-whitted.pdf">Turner Whitted Model</a>)</li>
+         <li>The tracing will stop when a ray was reflected/refracted n_ref times. </li> 
+         <li>The color of the final light is computed via specular component from the Phong model.</li>
+         <li>You may increase n_ref for more iterations, but please proceed with caution, because it may halt the computer.  
+         </li>
       </ul>
-   <li></li>   
+   <li>I added more interactions, you can now change the viewpoint by 
+      holding shift and alt key while dragging on canvas to rotate,
+      or holding shift and alt while scrolling on canvas to change focal length.
+      This is implemented by applying a transformation matrix to the viewpoint and projection surface.
+   </li>   
    <li>Finally, I used super sampling via doubling the render dimensions of the canvas to reduce aliasing.</li>
    <li>Repo on <a href="https://github.com/sunyinqi0508/graphics_hw1">Github</a>.</li>
    </li>
@@ -104,6 +126,9 @@ let vs = my_vertex_shader.innerHTML;
    client.send();
 document.body.innerHTML = [''
    ,'<font size=7 color=#909090>' + my_title.innerHTML
+   ,'<img id="rtx" style="float:right;" src="./RTXon.svg" type="image/svg+xml"'
+   ,' alt="Turn Ray Tracing On/OFF" title="Turn Ray Tracing On/OFF" height=60px /img>' 
+   ,'<div id="fps" style="font-size:25;float:right;margin-right:18px;"></div>' 
    ,'<TABLE cellspacing=0 cellpadding=0><TR>'
    ,'<td><font color=red size=5><div id=errorMessage></div></font></td>'
    ,'</TR><TR>'
@@ -111,7 +136,8 @@ document.body.innerHTML = [''
    ,'<tr>'
    ,'<td valign=top>'
    ,'<div id="ace" style="width:800px;height:1780px;"></div>'
-   ,'</td><td valign=top>' + document.body.innerHTML  + '<div style=\'font-size:25px\'>' + my_instructions.innerHTML + '</div>' + '</td>'
+   ,'</td><td valign=top>' + document.body.innerHTML
+   ,'<div style=\'font-size:25px\'>' + my_instructions.innerHTML + '</div>' + '</td>'
    ,'</tr></table>'
    ,'</TR></TABLE>'
    ].join('');
@@ -137,52 +163,148 @@ editor.setAutoScrollEditorIntoView(true);
 delete editor.KeyBinding;
 let lastTime = Date.now();
 let animating = true;
-let ctrl = false;
-canvas1.addEventListener('click',function(ev){
+let ctrl = false, alt = false, shift = false, fpson = true, moving = false;
+let mousedx = 0, mousedy = 0, mousedz = 0;
+let mouselastX, mouselastY;
+let pause_resume = function(){
    if(animating)
-      lastTime = Date.now();
+         lastTime = Date.now();
+      else
+         startTime += Date.now() - lastTime;   
+      animating = !animating;
+};
+canvas1.addEventListener('click',function(ev){
+   if(!(shift && alt))
+      pause_resume();
+   //moving = false;
+});
+canvas1.addEventListener('mousedown', function(e){
+   if(shift && alt){
+      moving = true
+      mouselastX = mouselastY =  undefined;
+   }
    else
-      startTime += Date.now() - lastTime;   
-   animating = !animating;
+      moving = false;
 });
+canvas1.addEventListener('mousemove', function(e){
+   if(shift && alt && moving){
+      if(!(mouselastX==undefined || mouselastY == undefined)){
+         mousedx += (mouselastX - e.offsetX)/60;
+         mousedy += (mouselastY - e.offsetY)/60;
+         setUniform('4f', 'rot', Math.cos(mousedx), Math.sin(mousedx), Math.cos(mousedy), Math.sin(mousedy));
+      }
+      mouselastX = e.offsetX;
+      mouselastY = e.offsetY;
+   }
+   else
+      moving = false;
+});
+canvas1.addEventListener('mouseup', function(e){
+   // if(ctrl && alt && moving){
+   // }
+   moving = false;
+});
+canvas1.addEventListener('mouseout', function(e){
+   // if(ctrl && alt && moving){
+   // }
+   moving = false;
+});
+canvas1.addEventListener('wheel', function(e){
+   if(shift && alt){
+      mousedz += e.wheelDelta/600;
+      setUniform('1f', 'dFL', mousedz);
+   }
+});
+rtx.style.cursor="pointer";
+let rtswitch = function(){
+   const mask = 0x2;
+   let rtstatus = !(flags&mask);
+   if (rtstatus)
+      rtx.src='./RTXoff.svg';
+   else
+      rtx.src='./RTXon.svg';
+   flags = flags&!mask | (rtstatus?mask:0);
+   setUniform('1i', 'flags', flags);
+}
+rtx.addEventListener('click', rtswitch);
+var requestAnimationFrame = window.requestAnimationFrame ||
+ window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+let fpscounter = function(time){
+      if (start === undefined)
+         start = time;
+      else
+         fps.innerHTML = Math.round(10000/(time-start))/10 + ' fps';
+      start = time;
+      if(fpson)
+         requestAnimationFrame(fpscounter);
+      else{
+         start = undefined;
+         fps.innerHTML = '';
+      }
+   };
 document.addEventListener('keydown',(e)=>{
+   if(e.code.startsWith('Shift'))
+      shift = true;
    if(e.code.startsWith('Control'))
-   {
       ctrl = true;
-   }
-   else if(ctrl && e.code == 'KeyT')
-   {
-      mask = 0x1;
+   if(e.code.startsWith('Alt'))
+      alt = true;
+   else if(ctrl && alt && e.code == 'KeyT'){
+      const mask = 0x1;
       flags = flags&!mask | (!(flags&mask)?mask:0);
       setUniform('1i', 'flags', flags);
    }
-   else if (ctrl && e.code == 'KeyS')
-   {
+   else if (ctrl &&e.code == 'KeyS'){
       let a = document.createElement('a');
       a.href = "data:text/plain,"+encodeURIComponent(editor.getSession().getValue());
       a.download = 'shader.frag';
       a.click();
    }
+   else if(ctrl && alt&&e.code == 'KeyR')
+      rtswitch();
+   else if(ctrl && alt&&e.code == 'KeyN')
+   {
+      flags = 0;
+      moving = false;
+      mousedx = mousedy = mousedz = 0;
+      setUniform('4f', 'rot', Math.cos(mousedx), Math.sin(mousedx), Math.cos(mousedy), Math.sin(mousedy));
+      setUniform('1f', 'dFL', mousedz);
+      setUniform('1i', 'flags', flags);
+   }
+   else if(ctrl && alt&&e.code == 'KeyP')
+      pause_resume();
+   else if(ctrl && alt&&e.code == 'KeyF')
+      if(!fpson)
+      {
+         fpson = true;
+         requestAnimationFrame(fpscounter);
+      }
+      else
+         fpson = false;
+   // else if(e.code =='KeyV')
+   //    alert(' '+ mousedx+ ' ' + mousedy + ' '+mousedz)
+
 });
 
 document.addEventListener('keyup',(e)=>{
    if(e.code.startsWith('Control'))
-   {
       ctrl = false;
-   }
+   if(e.code.startsWith('Alt'))
+      alt = false;
+   if(e.code.startsWith('Shift'))
+      shift = false;
 });
 // SET THE CURRENT TIME IN SECONDS BEFORE RENDERING EACH FRAME.
 
 let startTime = Date.now();
-
+let lastFrameTime = 0;
 function animate(gl) {
    if(animating)
       setUniform('1f', 'uTime', (Date.now() - startTime) / 1000);
    else
       setUniform('1f', 'uTime', (lastTime - startTime) / 1000);
-
 }
-
-
+let start;
+requestAnimationFrame(fpscounter);
 </script>
 
diff --git a/lib2.js b/lib2.js
index 3247002..196053f 100644
--- a/lib2.js
+++ b/lib2.js
@@ -90,7 +90,7 @@ function gl_start(canvas, vertexShader, fragmentShader) {           // START WEB
 
    setTimeout(function () {
       try {
-         canvas.gl = canvas.getContext('webgl2');              // Make sure WebGl is supported. IT WOULD BE GREAT TO USE WEBGL2 INSTEAD.
+         canvas.gl = canvas.getContext('experimental-webgl');              // Make sure WebGl is supported. IT WOULD BE GREAT TO USE WEBGL2 INSTEAD.
       } catch (e) { throw 'Sorry, your browser does not support WebGL.'; }
 
       canvas.setShaders = function (vertexShader, fragmentShader) {         // Add the vertex and fragment shaders:
@@ -151,7 +151,7 @@ function gl_start(canvas, vertexShader, fragmentShader) {           // START WEB
             textures[i] = i;
          }
          gl.uniform1iv(gl.getUniformLocation(program, 'uSampler'), textures);
-
+         setUniform('4f', 'rot', Math.cos(mousedx), Math.sin(mousedx), Math.cos(mousedy), Math.sin(mousedz));
          gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());                     // Create a square as a triangle strip
          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(                       //    consisting of two triangles.
             [-1, 1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0]), gl.STATIC_DRAW);
diff --git a/shader.frag b/shader.frag
index ee12c36..04fa609 100644
--- a/shader.frag
+++ b/shader.frag
@@ -4,23 +4,35 @@ vec3 groundColor = vec3(.2, .3, .5);
 vec4 groundSpecular = vec4(.71, .71, .71, 10.);
 uniform float uTime;// TIME, IN SECONDS
 uniform int flags;
-//FLAGS 0-RT, 1-TEX, 2-
+uniform vec4 rot;
+uniform float dFL;
+//FLAGS 0-TEX, 1-RT, 2-CLOUD, 3-TEX_ROT
 varying vec3 vPos;// -1 < vPos.x < +1
 // -1 < vPos.y < +1
 //      vPos.z == 0
 
 float fl=3.;
 const float pi=3.14159265359;
-const int n_ref=2;
+const int n_ref=6;
 const int ns=2;
 vec4 Sph[ns];
 uniform sampler2D uSampler[ns];
 vec3 Ambient[ns];
 vec3 Diffuse[ns];
 vec4 Specular[ns];
+struct Sphere{
+   vec4 Pos;
+   vec3 Ambient;
+   vec3 Diffuse;
+   vec4 Specular;
+   int textureid;
+   float ks, kt;
+};
 struct RT{
    vec3 color;
    float ks;
+   // vec3 colorr;
+   // float kt;
    // vec3 ptr;
    // vec3 normal;
 } stack[n_ref];
@@ -62,13 +74,20 @@ void main(){
    // INITIALIZE TO A BACKGROUND COLOR
    
    vec3 color=vec3(.2, .3, .5);
-   
+   float ca=rot.x, sa = rot.y, cb=rot.z, sb=rot.w;
    // COMPUTE THE RAY ORIGIN AND DIRECTION
-   float x=vPos.x;
-   float y=vPos.y;
-   
-   vec3 V=vec3(0.,0.,fl);
-   vec3 W=normalize(vec3(x,y,-fl));
+   mat3 transformation, invTr;
+   transformation[0] = vec3(ca, sb*sa, sa*cb);
+   transformation[1] = vec3(0, cb, -sb);
+   transformation[2] = vec3(-sa,ca*sb,ca*cb);
+   invTr[0] = vec3(ca, 0, -sa);
+   invTr[1] = vec3(sa*sb, cb, ca*sb);
+   invTr[2] = vec3(cb*sa, -sb, ca*cb);
+
+   vec3 trPos = transformation*vec3(vPos.xy, -2);
+
+   vec3 V=transformation*vec3(0.,0.,fl+dFL);
+   vec3 W=normalize(trPos-V);
    // RAY TRACE TO ALL OBJECTS IN THE SCENE
    bool rtxoff = getflag(flags, 1);
    int cnt_ref = n_ref;
@@ -99,7 +118,7 @@ void main(){
             if(i == iMin)
             {
                //*TEXTURE MAPPING
-               vec3 tex_sph=S-Sph[i].xyz;
+               vec3 tex_sph=invTr*(S-Sph[i].xyz);
                float R=Sph[i].w;
                float tex_x=acos(abs(tex_sph.x)/sqrt(R*R-tex_sph.y*tex_sph.y));
                if(tex_sph.x>0.)
@@ -124,7 +143,7 @@ void main(){
                ;
                // + SPECULAR COMPONENT GOES HERE
                if(rtxoff || j == n_ref - 1)
-                  color += float(j) * Specular[i].xyz*pow(max(0.,dot(2.*dot(N,realLDir)*N-realLDir,-W)),Specular[i].w);
+                  color += sqrt(float(j+1)) * Specular[i].xyz*pow(max(0.,dot(2.*dot(N,realLDir)*N-realLDir,-W)),Specular[i].w);
                stack[j] = RT(color, 0.15);
                V = S;
                W = -normalize(2. * dot(N, W) * N - W);
@@ -134,7 +153,7 @@ void main(){
       else {
       // TO SIMIPIFY THINGS UP, I'LL ASSUME THAT EVERYTHING 
       // IS INSIDE THE BOUNDING BOX [(-1,-1,-1), (1,1,1)]
-      // AND THERE'S A INFINITE FLOOR [y = -1]
+      // AND THERE'S A FLOOR at [y = -1]
 
          float t = -(.2+V.y)/W.y;
          float sx = V.x + t* W.x, sz = V.z + t * W.z;
@@ -150,7 +169,7 @@ void main(){
             ;
             // + SPECULAR COMPONENT GOES HERE
             if(rtxoff || j == n_ref - 1)
-               color += float(j)*groundSpecular.xyz*
+               color += sqrt(float(j+1))*groundSpecular.xyz*
                   pow(max(0., dot(vec3(-realLDir.x, realLDir.y,-realLDir.z),-W)),groundSpecular.w);
             stack[j] = RT(color, 0.1);
             V = S;
@@ -159,7 +178,7 @@ void main(){
          else{
             if(j > 0)
             {
-               stack[j] = RT(vec3(12.,12.,12.)*pow(max(0.,dot(W, normalize(LDir - V))), 10.), 0.);
+               stack[j] = RT(sqrt(float(j+1))*vec3(4.,4.,4)*pow(max(0.,dot(W, normalize(LDir - V))), 10.), 0.);
                cnt_ref = j + 1;
             }
             else