You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
4.9 KiB
112 lines
4.9 KiB
4 years ago
|
<!--<video src="pjsk.mp4" id="pjsk" muted="muted" loop="true" style="position:fixed; left:0; top:0;max-width:100%;min-width:100%;min-height: 100%;z-index: -100;"></video>!-->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" crossorigin="anonymous"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.js" crossorigin="anonymous"></script>
|
||
|
|
<script src=lib4.header.js></script>
|
||
|
|
<script src=lib4.js></script>
|
||
|
|
<style>
|
||
|
|
.ace_gutter-layer {
|
||
|
|
/* original width is 48px */
|
||
|
|
width: 25px !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ace_gutter-layer > * {
|
||
|
|
/* 48 - 32 = 16 */
|
||
|
|
margin-left: 0;
|
||
|
|
}
|
||
|
|
.ace_gutter-cell {
|
||
|
|
padding-left: 0 !important;
|
||
|
|
padding-right: 3px !important;
|
||
|
|
}
|
||
|
|
.code{
|
||
|
|
font-family: "monaco, menlo, ubuntu mono, consolas, source-code-pro" ;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!!-------- VERTEX SHADER: YOU PROBABLY DON'T WANT TO CHANGE THIS RIGHT NOW -------->
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<!!-------- FRAGMENT SHADER: THIS IS WHERE YOU WILL DO YOUR WORK -------->
|
||
|
|
<!!-------- FRAGMENT SHADER: MOVED TO ./shader.frag!! LOADED IN lib2.js -------->
|
||
|
|
|
||
|
|
<font size=7 color=#909090>
|
||
|
|
|
||
|
|
Space Walk
|
||
|
|
|
||
|
|
<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>
|
||
|
|
<table cellspacing=0>
|
||
|
|
<tr>
|
||
|
|
<td valign=top>
|
||
|
|
<div id="ace" style="opacity:90%;width:800px;height:2200px;"></div>
|
||
|
|
</td><td valign=top style="background-color:azure;opacity: 95%;">
|
||
|
|
<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=" overflow: hidden !important; width: 600px !important; height:600px !important;" width=599 height=599></canvas>
|
||
|
|
</center>
|
||
|
|
</body>
|
||
|
|
<div id="controls">
|
||
|
|
<input type="number" id="ins" style="margin-left:0px;font-size:24px;width:35px;height:45px" value="5" max="5" min = "1">
|
||
|
|
<button id="bns" style="margin-left:0px;font-size:24px;width:105px;height:45px">Spheres</button>
|
||
|
|
<input type="number" id="insamp" style="margin-left:2px;font-size:24px;width:60px;height:45px" value="1" max="4" min = "0.25" step="0.2">
|
||
|
|
<button id="bnsamp" style="margin-left:0px;font-size:24px;width:190px;height:45px">Super Sampling</button>
|
||
|
|
<button id="bnfs" style="margin-left:2px;font-size:24px;width:180px;height:45px">Fullscreen</button>
|
||
|
|
<button id="clrsel" style="margin-left:0px;font-size:24px;width:180px;height:45px">Clear Selection</button>
|
||
|
|
<button id="reset" style="margin-left:0px;font-size:24px;width:100px;height:45px">Reset</button>
|
||
|
|
<button id="mov" style="margin-left:0px;font-size:24px;width:280px;height:45px">Move Lighting & Texture</button>
|
||
|
|
<div style='font-size:25px;'>
|
||
|
|
|
||
|
|
<font color=#909090>
|
||
|
|
|
||
|
|
<i style="font-size:25px;">What's new: </i>
|
||
|
|
<p style="font-size:20px;">
|
||
|
|
I created a little figure that can walk. First, press "Fullscreen" button. In fullscreen mode, <a style="font-size:25px;color:red;"><strong>the figure is able to walk
|
||
|
|
in four directions when pressing corresponding arrow keys.</strong></a><br>
|
||
|
|
I added normal calculation to every shape I created and then I added phong shading to the scene. <br>
|
||
|
|
As before, you can rotate the scene by dragging on the canvas.<br>
|
||
|
|
I added new shapes such as torus and cubes.</strong><br>
|
||
|
|
<strong>If you found the scene somehow clipped, it seems to be a bug of chromium, please simply click on 'Super Sampling' button
|
||
|
|
or refresh the page. .</strong>
|
||
|
|
</p>
|
||
|
|
<div id="howitworks">
|
||
|
|
<br>
|
||
|
|
|
||
|
|
<i style="font-size:25px;">How it works:</i><br>
|
||
|
|
<p style="font-size:20px;">
|
||
|
|
I used the matrix stack to push and pop transformations to create the figure and move it around. The entire scene is then transformed to apply movements and global rotations.<br>
|
||
|
|
The mesh creation functions and transformation methods are implemented in <a href="./lib4.header.js">lib4.header.js</a><br>
|
||
|
|
Animating function and are in <a href="./lib4.ext.js">lib4.ext.js</a><br>
|
||
|
|
<a href="./shader.vert">shader.vert</a> is the vertex shader.<br>
|
||
|
|
<a href="./lib4.js">lib4.js</a> most contains initialization methods for the renderer. You can also see how I passes more attributes like surface normal and
|
||
|
|
object id to the shaders.<br>
|
||
|
|
<a href="./index.html">index.html</a> is almost pure html.<br>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div></td>
|
||
|
|
</tr></table>
|
||
|
|
</TR></TABLE>
|
||
|
|
|
||
|
|
|
||
|
|
<!!-------- YOU PROBABLY WANT TO CHANGE ANYTHING BELOW RIGHT NOW -------->
|
||
|
|
|
||
|
|
<script src="lib4.ext.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
setInterval(() => {
|
||
|
|
if(window.vs != null && window.fs != null&& canvas1.setShaders === undefined)
|
||
|
|
gl_start(canvas1, vs, fs);
|
||
|
|
}, 200);
|
||
|
|
</script>
|