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.
196 lines
6.4 KiB
196 lines
6.4 KiB
<script src=lib2.js></script>
|
|
<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>
|
|
<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>
|
|
<body bgcolor=white text=black link=black alink=blue vlink=blue>
|
|
<center>
|
|
<canvas id='canvas1' width=600 height=600></canvas>
|
|
</center>
|
|
</body>
|
|
|
|
|
|
<!!-------- VERTEX SHADER: YOU PROBABLY DON'T WANT TO CHANGE THIS RIGHT NOW -------->
|
|
|
|
<script id='my_vertex_shader' type='x-shader/x-vertex'>
|
|
attribute vec3 aPos;
|
|
varying vec3 vPos;
|
|
void main() {
|
|
gl_Position = vec4(aPos, 1.);
|
|
vPos = aPos;
|
|
}
|
|
</script>
|
|
|
|
|
|
<!!-------- FRAGMENT SHADER: THIS IS WHERE YOU WILL DO YOUR WORK -------->
|
|
|
|
<script src="shader.frag" id='my_fragment_shader' type='x-shader/x-fragment'> </script>
|
|
|
|
|
|
<!!-------- CREATE A PROPERLY DESCRIPTIVE TITLE BELOW -------->
|
|
|
|
<script id='my_title' type='text/html'>
|
|
The Bouncing Earth
|
|
</script>
|
|
|
|
|
|
<!!-------- HERE IS WHERE YOU CAN PROVIDE A LONGER TEXT DESCRIPTION -------->
|
|
|
|
<script id='my_instructions' type='text/html'><font color=#909090>
|
|
<p style="font-size:30px; ">This is a description
|
|
of my cool homework
|
|
that you are seeing now.</p>
|
|
<p>
|
|
<i style="font-size:25px;">Here is how it works:</i>
|
|
<ul>
|
|
<li>First, I added <a href="http://planetpixelemporium.com/download/download.php?earthmap1k.jpg">texture</a> to the sphere. The code to load the texture is from
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">here</a>. Please wait a sec for the texture to download.</li>
|
|
<li>Then, I mapped the 3D sphere surface to the rectangular 2D texture picture. </li>
|
|
<li>I also make it look like it's rotating by adding uTime to the offset of the texture and reset the offset to 0 whenever it exceeds
|
|
the width of the texture.</li>
|
|
<li>I used Perlin Noise to generate fake clouds.</li>
|
|
<li> I modified the lighting so that the light source won't move with the sphere and
|
|
the lighting will change when the sphere moves. I also added specular lights to make it shinier.</li>
|
|
<li> I tried to add some 'soft shadow' to it. I used a mix of methods inspired by Ambient Occlusion and Ray Tracing.<br>
|
|
<ul>
|
|
<li>The Ambient lights and diffusion lights are reduced with respect to the distance between the background point and the sphere.</li>
|
|
<li>The specular light of the background wall is eliminated and the diffusion factor is reduced when the ray shooting from the background point
|
|
towards the light source or from the background point towards the camera position intersect with the sphere.</li>
|
|
</ul>
|
|
<li>I added basic interactions such as press ctrl + 't' key to hide/show texture, click on the above canvas to pause/unpause animations.
|
|
Just a proof of concept.</li>
|
|
<li>Finally, I made some small changes like changing R over time and refined the UI a little bit. I used
|
|
<a href="https://ace.c9.io">Ace</a> for code highlighting and autocompletion on the edit panel.</li>
|
|
<li>Comments begin with '//*' are added by me.</li>
|
|
<li>Repo on <a href="https://github.com/sunyinqi0508/graphics_hw1">Github</a>.</li>
|
|
</li>
|
|
</ul>
|
|
<p>
|
|
|
|
</script>
|
|
|
|
|
|
<!!-------- YOU PROBABLY DON'T WANT TO CHANGE ANYTHING BELOW FOR NOW -------->
|
|
|
|
<script>
|
|
|
|
// CREATE THE HTML DOCUMENT
|
|
let flags = 0x0;
|
|
let vs = my_vertex_shader.innerHTML;
|
|
var client = new XMLHttpRequest();
|
|
client.open('GET', './shader.frag');
|
|
client.onloadend = function() {
|
|
fs = (client.responseText);
|
|
// START EVERYTHING.
|
|
gl_start(canvas1, vs, fs);
|
|
editor.getSession().setValue(fs);
|
|
editor.session.on('change', function(delta) {
|
|
if(typeof canvas1.setShaders === "function")
|
|
{
|
|
canvas1.setShaders(vs, editor.getSession().getValue());
|
|
setUniform('1i', 'flags', flags);
|
|
}
|
|
});
|
|
}
|
|
client.send();
|
|
document.body.innerHTML = [''
|
|
,'<font size=7 color=#909090>' + my_title.innerHTML
|
|
,'<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="width:800px;height:1780px;"></div>'
|
|
,'</td><td valign=top>' + document.body.innerHTML + '<div style=\'font-size:25px\'>' + my_instructions.innerHTML + '</div>' + '</td>'
|
|
,'</tr></table>'
|
|
,'</TR></TABLE>'
|
|
].join('');
|
|
|
|
// SET UP THE EDITABLE TEXT AREA ON THE LEFT SIDE.
|
|
ace.require("ace/ext/language_tools");
|
|
var editor = ace.edit("ace", {
|
|
mode:"ace/mode/glsl",
|
|
theme:"ace/theme/crimson_editor"
|
|
});
|
|
editor.setOptions({
|
|
enableBasicAutocompletion: true,
|
|
enableSnippets: true,
|
|
enableLiveAutocompletion: true,
|
|
fontSize: 14,
|
|
fontFamily: "monaco, menlo, ubuntu mono, consolas, source-code-pro",
|
|
fixedWidthGutter: true,
|
|
showGutter: true,
|
|
showPrintMargin: false,
|
|
});
|
|
editor.setAutoScrollEditorIntoView(true);
|
|
// REPARSE THE SHADER PROGRAM AFTER EVERY KEYSTROKE.
|
|
|
|
let lastTime = Date.now();
|
|
let animating = true;
|
|
let ctrl = false;
|
|
canvas1.addEventListener('click',function(ev){
|
|
if(animating)
|
|
lastTime = Date.now();
|
|
else
|
|
startTime += Date.now() - lastTime;
|
|
animating = !animating;
|
|
});
|
|
document.addEventListener('keydown',(e)=>{
|
|
if(e.code.startsWith('Control'))
|
|
{
|
|
ctrl = true;
|
|
}
|
|
else if(ctrl && e.code == 'KeyT')
|
|
{
|
|
mask = 0x1;
|
|
flags = flags&!mask | (!(flags&mask)?mask:0);
|
|
setUniform('1i', 'flags', flags);
|
|
}
|
|
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();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('keyup',(e)=>{
|
|
if(e.code.startsWith('Control'))
|
|
{
|
|
ctrl = false;
|
|
}
|
|
});
|
|
// SET THE CURRENT TIME IN SECONDS BEFORE RENDERING EACH FRAME.
|
|
|
|
let startTime = Date.now();
|
|
|
|
function animate(gl) {
|
|
if(animating)
|
|
setUniform('1f', 'uTime', (Date.now() - startTime) / 1000);
|
|
else
|
|
setUniform('1f', 'uTime', (lastTime - startTime) / 1000);
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|