bill
/
Graphics
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added interaction, more descriptions.

Browse Source 
But fixes.
master
bill 4 years ago
parent 603603993a
commit dffef6657c
6 changed files with 389 additions and 38 deletions
Show Stats Download Patch File Download Diff File

2
.gitignore vendored
Unescape View File

@ -1 +1,3 @@
.DS_Store
old/
new/

103
RTXoff.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

105
RTXon.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

168
index.html
Unescape View File

@ -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>

4
lib2.js
Unescape View File

@ -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);

45
shader.frag
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save