diff --git a/README.md b/README.md index 06fcfd4..c7860a6 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,24 @@ ------------------------------------------------------------------------------- CIS565: Project 5: WebGL ------------------------------------------------------------------------------- -Fall 2013 -------------------------------------------------------------------------------- -Due Friday 11/08/2013 -------------------------------------------------------------------------------- +Yuqin Shao ------------------------------------------------------------------------------- -NOTE: -------------------------------------------------------------------------------- -This project requires any graphics card with support for a modern OpenGL -pipeline. Any AMD, NVIDIA, or Intel card from the past few years should work -fine, and every machine in the SIG Lab and Moore 100 is capable of running -this project. - -This project also requires a WebGL capable browser. The project is known to -have issues with Chrome on windows, but Firefox seems to run it fine. ------------------------------------------------------------------------------- -INTRODUCTION: +Demos Here ------------------------------------------------------------------------------- -In this project, you will get introduced to the world of GLSL in two parts: -vertex shading and fragment shading. The first part of this project is the -Image Processor, and the second part of this project is a Wave Vertex Shader. - -In the first part of this project, you will implement a GLSL vertex shader as -part of a WebGL demo. You will create a dynamic wave animation using code that -runs entirely on the GPU. - -In the second part of this project, you will implement a GLSL fragment shader -to render an interactive globe in WebGL. This will include texture blending, -bump mapping, specular masking, and adding a cloud layer to give your globe a -uniquie feel. +In part 1, I did a very simple water wave. +Click the screenshot below for demo +[![screen](images/custom.JPG)](http://yuqinshao.github.io/Project5-WebGL/part1/index_custom.html) +In part2, I added a skybox for the globe +[![screen](images/skybox.JPG)](http://yuqinshao.github.io/Project5-WebGL/part2/index.html) ------------------------------------------------------------------------------- -CONTENTS: -------------------------------------------------------------------------------- -The Project4 root directory contains the following subdirectories: - -* part1/ contains the base code for the Wave Vertex Shader. -* part2/ contains the base code for the Globe Fragment Shader. -* resources/ contains the screenshots found in this readme file. ------------------------------------------------------------------------------- PART 1 REQUIREMENTS: ------------------------------------------------------------------------------- - In Part 1, you are given code for: * Drawing a VBO through WebGL @@ -55,94 +28,16 @@ In Part 1, you are given code for: You are required to implement the following: * A sin-wave based vertex shader: - -![Example sin wave grid](resources/sinWaveGrid.png) +[![screen](resources/sinWaveGrid.png)](http://yuqinshao.github.io/Project5-WebGL/part1/vert_wave.html) * A simplex noise based vertex shader: -![Example simplex noise wave grid](resources/oceanWave.png) - -* One interesting vertex shader of your choice - -------------------------------------------------------------------------------- -PART 1 WALKTHROUGH: -------------------------------------------------------------------------------- -**Sin Wave** - -* For this assignment, you will need the latest version of Firefox. -* Begin by opening index.html. You should see a flat grid of black and white - lines on the xy plane: - -![Example boring grid](resources/emptyGrid.png) - -* In this assignment, you will animate the grid in a wave-like pattern using a - vertex shader, and determine each vertex’s color based on its height, as seen - in the example in the requirements. -* The vertex and fragment shader are located in script tags in `index.html`. -* The JavaScript code that needs to be modified is located in `index.js`. -* Required shader code modifications: - * Add a float uniform named u_time. - * Modify the vertex’s height using the following code: - - ```glsl - float s_contrib = sin(position.x*2.0*3.14159 + u_time); - float t_contrib = cos(position.y*2.0*3.14159 + u_time); - float height = s_contrib*t_contrib; - ``` - - * Use the GLSL mix function to blend together two colors of your choice based - on the vertex’s height. The lowest possible height should be assigned one - color (for example, `vec3(1.0, 0.2, 0.0)`) and the maximum height should be - another (`vec3(0.0, 0.8, 1.0)`). Use a varying variable to pass the color to - the fragment shader, where you will assign it `gl_FragColor`. - -* Required JavaScript code modifications: - * A floating-point time value should be increased every animation step. - Hint: the delta should be less than one. - * To pass the time to the vertex shader as a uniform, first query the location - of `u_time` using `context.getUniformLocation` in `initializeShader()`. - Then, the uniform’s value can be set by calling `context.uniform1f` in - `animate()`. - -**Simplex Wave** - -* Now that you have the sin wave working, create a new copy of `index.html`. - Call it `index_simplex.html`, or something similar. -* Open up `simplex.vert`, which contains a compact GLSL simplex noise - implementation, in a text editor. Copy and paste the functions included - inside into your `index_simplex.html`'s vertex shader. -* Try changing s_contrib and t_contrib to use simplex noise instead of sin/cos - functions with the following code: - -```glsl -vec2 simplexVec = vec2(u_time, position); -float s_contrib = snoise(simplexVec); -float t_contrib = snoise(vec2(s_contrib,u_time)); -``` - -**Wave Of Your Choice** - -* Create another copy of `index.html`. Call it `index_custom.html`, or - something similar. -* Implement your own interesting vertex shader! In your README.md with your - submission, describe your custom vertex shader, what it does, and how it - works. +[![screen](resources/oceanWave.png)](http://yuqinshao.github.io/Project5-WebGL/part1/index_simplex.html) ------------------------------------------------------------------------------- PART 2 REQUIREMENTS: ------------------------------------------------------------------------------- -In Part 2, you are given code for: - -* Reading and loading textures -* Rendering a sphere with textures mapped on -* Basic passthrough fragment and vertex shaders -* A basic globe with Earth terrain color mapping -* Gamma correcting textures -* javascript to interact with the mouse - * left-click and drag moves the camera around - * right-click and drag moves the camera in and out - -You are required to implement: +In Part 2, we are required to implement: * Bump mapped terrain * Rim lighting to simulate atmosphere @@ -150,224 +45,12 @@ You are required to implement: * Specular mapping * Moving clouds -You are also required to pick one open-ended effect to implement: - -* Procedural water rendering and animation using noise -* Shade based on altitude using the height map -* Cloud shadows via ray-tracing through the cloud map in the fragment shader -* Orbiting Moon with texture mapping and shadow casting onto Earth -* Draw a skybox around the entire scene for the stars. -* Your choice! Email Liam and Patrick to get approval first - -Finally in addition to your readme, you must also set up a gh-pages branch -(explained below) to expose your beautiful WebGL globe to the world. - -Some examples of what your completed globe renderer will look like: - -![Completed globe, day side](resources/globe_day.png) - -Figure 0. Completed globe renderer, daylight side. - -![Completed globe, twilight](resources/globe_twilight.png) - -Figure 1. Completed globe renderer, twilight border. - -![Completed globe, night side](resources/globe_night.png) - -Figure 2. Completed globe renderer, night side. - -------------------------------------------------------------------------------- -PART 2 WALKTHROUGH: -------------------------------------------------------------------------------- - -Open part2/frag_globe.html in Firefox to run it. You’ll see a globe -with Phong lighting like the one in Figure 3. All changes you need to make -will be in the fragment shader portion of this file. - -![Initial globe](resources/globe_initial.png) - -Figure 3. Initial globe with diffuse and specular lighting. - -**Night Lights** - -The backside of the globe not facing the sun is completely black in the -initial globe. Use the `diffuse` lighting component to detect if a fragment -is on this side of the globe, and, if so, shade it with the color from the -night light texture, `u_Night`. Do not abruptly switch from day to night; -instead use the `GLSL mix` function to smoothly transition from day to night -over a reasonable period. The resulting globe will look like Figure 4. -Consider brightening the night lights by multiplying the value by two. - -The base code shows an example of how to gamma correct the nighttime texture: - -```glsl -float gammaCorrect = 1/1.2; -vec4 nightColor = pow(texture2D(u_Night, v_Texcoord), vec4(gammaCorrect)); -``` - -Feel free to play with gamma correcting the night and day textures if you -wish. Find values that you think look nice! +And I imeplemented a skybox as extra feature. -![Day/Night without specular mapping](resources/globe_nospecmap.png) - -Figure 4. Globe with night lights and day/night blending at dusk/dawn. - -**Specular Map** - -Our day/night color still shows specular highlights on landmasses, which -should only be diffuse lit. Only the ocean should receive specular highlights. -Use `u_EarthSpec` to determine if a fragment is on ocean or land, and only -include the specular component if it is in ocean. - -![Day/Night with specular mapping](resources/globe_specmap.png) - -Figure 5. Globe with specular map. Compare to Figure 4. Here, the specular -component is not used when shading the land. - -**Clouds** - -In day time, clouds should be diffuse lit. Use `u_Cloud` to determine the -cloud color, and `u_CloudTrans` and `mix` to determine how much a daytime -fragment is affected by the day diffuse map or cloud color. See Figure 6. - -In night time, clouds should obscure city lights. Use `u_CloudTrans` and `mix` -to blend between the city lights and solid black. See Figure 7. - -Animate the clouds by offseting the `s` component of `v_Texcoord` by `u_time` -when reading `u_Cloud` and `u_CloudTrans`. - -![Day with clouds](resources/globe_daycloud.png) - -Figure 6. Clouds with day time shading. - -![Night with clouds](resources/globe_nightcloud.png) - -Figure 7. Clouds observing city nights on the dark side of the globe. - -**Bump Mapping** - -Add the appearance of mountains by perturbing the normal used for diffuse -lighting the ground (not the clouds) by using the bump map texture, `u_Bump`. -This texture is 1024x512, and is zero when the fragment is at sea-level, and -one when the fragment is on the highest mountain. Read three texels from this -texture: once using `v_Texcoord`; once one texel to the right; and once one -texel above. Create a perturbed normal in tangent space: - -`normalize(vec3(center - right, center - top, 0.2))` - -Use `eastNorthUpToEyeCoordinates` to transform this normal to eye coordinates, -normalize it, then use it for diffuse lighting the ground instead of the -original normal. - -![Globe with bump mapping](resources/globe_bumpmap.png) - -Figure 8. Bump mapping brings attention to mountains. - -**Rim Lighting** - -Rim lighting is a simple post-processed lighting effect we can apply to make -the globe look as if it has an atmospheric layer catching light from the sun. -Implementing rim lighting is simple; we being by finding the dot product of -`v_Normal` and `v_Position`, and add 1 to the dot product. We call this value -our rim factor. If the rim factor is greater than 0, then we add a blue color -based on the rim factor to the current fragment color. You might use a color -something like `vec4(rim/4, rim/2, rim/2, 1)`. If our rim factor is not greater -than 0, then we leave the fragment color as is. Figures 0,1 and 2 show our -finished globe with rim lighting. - -For more information on rim lighting, -read http://www.fundza.com/rman_shaders/surface/fake_rim/fake_rim1.html. - -------------------------------------------------------------------------------- -GH-PAGES -------------------------------------------------------------------------------- -Since this assignment is in WebGL you will make your project easily viewable by -taking advantage of GitHub's project pages feature. - -Once you are done you will need to create a new branch named gh-pages: - -`git branch gh-pages` - -Switch to your new branch: - -`git checkout gh-pages` - -Create an index.html file that is either your renamed frag_globe.html or -contains a link to it, commit, and then push as usual. Now you can go to - -`.github.io/` - -to see your beautiful globe from anywhere. - -------------------------------------------------------------------------------- -README -------------------------------------------------------------------------------- -All students must replace or augment the contents of this Readme.md in a clear -manner with the following: - -* A brief description of the project and the specific features you implemented. -* At least one screenshot of your project running. -* A 30 second or longer video of your project running. To create the video you - can use http://www.microsoft.com/expression/products/Encoder4_Overview.aspx -* A performance evaluation (described in detail below). ------------------------------------------------------------------------------- PERFORMANCE EVALUATION ------------------------------------------------------------------------------- -The performance evaluation is where you will investigate how to make your -program more efficient using the skills you've learned in class. You must have -performed at least one experiment on your code to investigate the positive or -negative effects on performance. - -We encourage you to get creative with your tweaks. Consider places in your code -that could be considered bottlenecks and try to improve them. - -Each student should provide no more than a one page summary of their -optimizations along with tables and or graphs to visually explain any -performance differences. - -------------------------------------------------------------------------------- -THIRD PARTY CODE POLICY -------------------------------------------------------------------------------- -* Use of any third-party code must be approved by asking on the Google groups. - If it is approved, all students are welcome to use it. Generally, we approve - use of third-party code that is not a core part of the project. For example, - for the ray tracer, we would approve using a third-party library for loading - models, but would not approve copying and pasting a CUDA function for doing - refraction. -* Third-party code must be credited in README.md. -* Using third-party code without its approval, including using another - student's code, is an academic integrity violation, and will result in you - receiving an F for the semester. - -------------------------------------------------------------------------------- -SELF-GRADING -------------------------------------------------------------------------------- -* On the submission date, email your grade, on a scale of 0 to 100, to Liam, - liamboone@gmail.com, with a one paragraph explanation. Be concise and - realistic. Recall that we reserve 30 points as a sanity check to adjust your - grade. Your actual grade will be (0.7 * your grade) + (0.3 * our grade). We - hope to only use this in extreme cases when your grade does not realistically - reflect your work - it is either too high or too low. In most cases, we plan - to give you the exact grade you suggest. -* Projects are not weighted evenly, e.g., Project 0 doesn't count as much as - the path tracer. We will determine the weighting at the end of the semester - based on the size of each project. - - ---- -SUBMISSION ---- -As with the previous project, you should fork this project and work inside of -your fork. Upon completion, commit your finished project back to your fork, and -make a pull request to the master repository. You should include a README.md -file in the root directory detailing the following +I am not sure how to get the performace evaluation for this project. I just simply calculate the frame rate for my +page. There are all 50 fps. -* A brief description of the project and specific features you implemented -* At least one screenshot of your project running. -* A link to a video of your project running. -* Instructions for building and running your project if they differ from the - base code. -* A performance writeup as detailed above. -* A list of all third-party code used. -* This Readme file edited as described above in the README section. diff --git a/images/bumpMapping.JPG b/images/bumpMapping.JPG new file mode 100644 index 0000000..e496141 Binary files /dev/null and b/images/bumpMapping.JPG differ diff --git a/images/bumpMapping2.JPG b/images/bumpMapping2.JPG new file mode 100644 index 0000000..dc8b6a2 Binary files /dev/null and b/images/bumpMapping2.JPG differ diff --git a/images/bumpMapping3.JPG b/images/bumpMapping3.JPG new file mode 100644 index 0000000..b67d0f9 Binary files /dev/null and b/images/bumpMapping3.JPG differ diff --git a/images/custom.JPG b/images/custom.JPG new file mode 100644 index 0000000..87b716c Binary files /dev/null and b/images/custom.JPG differ diff --git a/images/rim.JPG b/images/rim.JPG new file mode 100644 index 0000000..65fe32c Binary files /dev/null and b/images/rim.JPG differ diff --git a/images/skybox.JPG b/images/skybox.JPG new file mode 100644 index 0000000..d97c9ed Binary files /dev/null and b/images/skybox.JPG differ diff --git a/part1/index_custom.html b/part1/index_custom.html new file mode 100644 index 0000000..16a9bdc --- /dev/null +++ b/part1/index_custom.html @@ -0,0 +1,58 @@ + + + +Custom Wave + + + + + +
fps: 0
+
+ + + + + + + + + + + + diff --git a/part1/index_simplex.html b/part1/index_simplex.html new file mode 100644 index 0000000..55efb49 --- /dev/null +++ b/part1/index_simplex.html @@ -0,0 +1,93 @@ + + + +Noise Wave + + + + + +
+ + + + + + + + + + + + diff --git a/part1/vert_wave.html b/part1/vert_wave.html index 57107ca..da131ee 100644 --- a/part1/vert_wave.html +++ b/part1/vert_wave.html @@ -14,20 +14,28 @@ attribute vec2 position; uniform mat4 u_modelViewPerspective; - + uniform float u_time; + varying vec4 FragColor; + void main(void) { - float height = 0.0; + float s_contrib = sin(position.x*2.0*3.14159 + u_time); + float t_contrib = cos(position.y*2.0*3.14159 + u_time); + float height = s_contrib * t_contrib; + FragColor = mix(vec4(0.5,0.5,0.0,1.0),vec4(0.0,0.8,1.0,1.0),height); gl_Position = u_modelViewPerspective * vec4(vec3(position, height), 1.0); + } diff --git a/part1/vert_wave.js b/part1/vert_wave.js index b90b9cf..e4a81c7 100644 --- a/part1/vert_wave.js +++ b/part1/vert_wave.js @@ -31,7 +31,8 @@ var positionLocation = 0; var heightLocation = 1; var u_modelViewPerspectiveLocation; - + + (function initializeShader() { var program; var vs = getShaderSource(document.getElementById("vs")); @@ -40,7 +41,9 @@ var program = createProgram(context, vs, fs, message); context.bindAttribLocation(program, positionLocation, "position"); u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective"); - + + u_time = context.getUniformLocation(program,"u_time"); + context.useProgram(program); })(); @@ -125,7 +128,10 @@ uploadMesh(positions, heights, indices); numberOfIndices = indices.length; })(); - + + var u_time; + var time = 0; + var decrease = false; (function animate(){ /////////////////////////////////////////////////////////////////////////// // Update @@ -137,15 +143,31 @@ mat4.multiply(view, model, mv); var mvp = mat4.create(); mat4.multiply(persp, mv, mvp); - + + time += 0.001; + + + /////////////////////////////////////////////////////////////////////////// // Render context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT); context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0); - + + context.uniform1f(u_time,time); + window.requestAnimFrame(animate); })(); - + + var lastMouseX = null; + var lastMouseY = null; + + (function handleMouseMove(event){ + var newX = event.clientX; + var newY = event.clientY; + })(); + + + }()); diff --git a/part1/vert_wave_custom.js b/part1/vert_wave_custom.js new file mode 100644 index 0000000..dea3c30 --- /dev/null +++ b/part1/vert_wave_custom.js @@ -0,0 +1,195 @@ +(function() { + "use strict"; + /*global window,document,Float32Array,Uint16Array,mat4,vec3,snoise*/ + /*global getShaderSource,createWebGLContext,createProgram*/ + + var NUM_WIDTH_PTS = 32; + var NUM_HEIGHT_PTS = 32; + + var message = document.getElementById("message"); + var canvas = document.getElementById("canvas"); + var context = createWebGLContext(canvas, message); + if (!context) { + return; + } + + /////////////////////////////////////////////////////////////////////////// + + context.viewport(0, 0, canvas.width, canvas.height); + context.clearColor(1.0, 1.0, 1.0, 1.0); + context.enable(context.DEPTH_TEST); + + var persp = mat4.create(); + mat4.perspective(45.0, 0.5, 0.1, 100.0, persp); + + var eye = [2.0, 1.0, 3.0]; + var center = [0.0, 0.0, 0.0]; + var up = [0.0, 0.0, 1.0]; + var view = mat4.create(); + mat4.lookAt(eye, center, up, view); + + var positionLocation = 0; + var heightLocation = 1; + var u_modelViewPerspectiveLocation; + + + (function initializeShader() { + var program; + var vs = getShaderSource(document.getElementById("vs")); + var fs = getShaderSource(document.getElementById("fs")); + + var program = createProgram(context, vs, fs, message); + context.bindAttribLocation(program, positionLocation, "position"); + u_modelViewPerspectiveLocation = context.getUniformLocation(program,"u_modelViewPerspective"); + + u_time = context.getUniformLocation(program,"u_time"); + + context.useProgram(program); + })(); + + var heights; + var numberOfIndices; + + (function initializeGrid() { + function uploadMesh(positions, heights, indices) { + // Positions + var positionsName = context.createBuffer(); + context.bindBuffer(context.ARRAY_BUFFER, positionsName); + context.bufferData(context.ARRAY_BUFFER, positions, context.STATIC_DRAW); + context.vertexAttribPointer(positionLocation, 2, context.FLOAT, false, 0, 0); + context.enableVertexAttribArray(positionLocation); + + if (heights) + { + // Heights + var heightsName = context.createBuffer(); + context.bindBuffer(context.ARRAY_BUFFER, heightsName); + context.bufferData(context.ARRAY_BUFFER, heights.length * heights.BYTES_PER_ELEMENT, context.STREAM_DRAW); + context.vertexAttribPointer(heightLocation, 1, context.FLOAT, false, 0, 0); + context.enableVertexAttribArray(heightLocation); + } + + // Indices + var indicesName = context.createBuffer(); + context.bindBuffer(context.ELEMENT_ARRAY_BUFFER, indicesName); + context.bufferData(context.ELEMENT_ARRAY_BUFFER, indices, context.STATIC_DRAW); + } + + var WIDTH_DIVISIONS = NUM_WIDTH_PTS - 1; + var HEIGHT_DIVISIONS = NUM_HEIGHT_PTS - 1; + + var numberOfPositions = NUM_WIDTH_PTS * NUM_HEIGHT_PTS; + + var positions = new Float32Array(2 * numberOfPositions); + var indices = new Uint16Array(2 * ((NUM_HEIGHT_PTS * (NUM_WIDTH_PTS - 1)) + (NUM_WIDTH_PTS * (NUM_HEIGHT_PTS - 1)))); + + var positionsIndex = 0; + var indicesIndex = 0; + var length; + + for (var j = 0; j < NUM_WIDTH_PTS; ++j) + { + positions[positionsIndex++] = j /(NUM_WIDTH_PTS - 1); + positions[positionsIndex++] = 0.0; + + if (j>=1) + { + length = positionsIndex / 2; + indices[indicesIndex++] = length - 2; + indices[indicesIndex++] = length - 1; + } + } + + for (var i = 0; i < HEIGHT_DIVISIONS; ++i) + { + var v = (i + 1) / (NUM_HEIGHT_PTS - 1); + positions[positionsIndex++] = 0.0; + positions[positionsIndex++] = v; + + length = (positionsIndex / 2); + indices[indicesIndex++] = length - 1; + indices[indicesIndex++] = length - 1 - NUM_WIDTH_PTS; + + for (var k = 0; k < WIDTH_DIVISIONS; ++k) + { + positions[positionsIndex++] = (k + 1) / (NUM_WIDTH_PTS - 1); + positions[positionsIndex++] = v; + + length = positionsIndex / 2; + var new_pt = length - 1; + indices[indicesIndex++] = new_pt - 1; // Previous side + indices[indicesIndex++] = new_pt; + + indices[indicesIndex++] = new_pt - NUM_WIDTH_PTS; // Previous bottom + indices[indicesIndex++] = new_pt; + } + } + + uploadMesh(positions, heights, indices); + numberOfIndices = indices.length; + })(); + + var u_time; + var time = 1; + var decrease = false; + + var fps = 0; + var elapsedTime = 9; + var frameCount = 0; + var lastTime = new Date().getTime(); + + (function animate(){ + /////////////////////////////////////////////////////////////////////////// + //calculate frame rate here + var now = new Date().getTime(); + frameCount ++; + elapsedTime += (now - lastTime); + lastTime = now; + if(elapsedTime >= 1000) + { + fps = frameCount; + frameCount = 0; + elapsedTime -= 1000; + document.getElementById('fps').innerHTML ='fps: '+ fps; + } + lastTime = new Date().getTime(); + + // Update + + var model = mat4.create(); + mat4.identity(model); + mat4.translate(model, [-0.5, -0.5, 0.0]); + var mv = mat4.create(); + mat4.multiply(view, model, mv); + var mvp = mat4.create(); + mat4.multiply(persp, mv, mvp); + + time += 0.01; +// if(time>=0) + // time -= 0.005; + + /////////////////////////////////////////////////////////////////////////// + // Render + context.clear(context.COLOR_BUFFER_BIT | context.DEPTH_BUFFER_BIT); + + context.uniformMatrix4fv(u_modelViewPerspectiveLocation, false, mvp); + context.drawElements(context.LINES, numberOfIndices, context.UNSIGNED_SHORT,0); + + context.uniform1f(u_time,time); + + window.requestAnimFrame(animate); + })(); + + var lastMouseX = null; + var lastMouseY = null; + + (function handleMouseMove(event){ + var newX = event.clientX; + var newY = event.clientY; + + })(); + + document.onmousemove = handleMouseMove; + + +}()); diff --git a/part2/Back.png b/part2/Back.png new file mode 100644 index 0000000..e845d45 Binary files /dev/null and b/part2/Back.png differ diff --git a/part2/Back.tif b/part2/Back.tif new file mode 100644 index 0000000..8c24e7b Binary files /dev/null and b/part2/Back.tif differ diff --git a/part2/Down.png b/part2/Down.png new file mode 100644 index 0000000..0122996 Binary files /dev/null and b/part2/Down.png differ diff --git a/part2/Down.tif b/part2/Down.tif new file mode 100644 index 0000000..de67cc1 Binary files /dev/null and b/part2/Down.tif differ diff --git a/part2/Front.png b/part2/Front.png new file mode 100644 index 0000000..dcf9355 Binary files /dev/null and b/part2/Front.png differ diff --git a/part2/Front.tif b/part2/Front.tif new file mode 100644 index 0000000..b256291 Binary files /dev/null and b/part2/Front.tif differ diff --git a/part2/Left.png b/part2/Left.png new file mode 100644 index 0000000..2a56d07 Binary files /dev/null and b/part2/Left.png differ diff --git a/part2/Left.tif b/part2/Left.tif new file mode 100644 index 0000000..266bb8c Binary files /dev/null and b/part2/Left.tif differ diff --git a/part2/Others/back (2).png b/part2/Others/back (2).png new file mode 100644 index 0000000..1ddc9b6 Binary files /dev/null and b/part2/Others/back (2).png differ diff --git a/part2/Others/back.png b/part2/Others/back.png new file mode 100644 index 0000000..1ddc9b6 Binary files /dev/null and b/part2/Others/back.png differ diff --git a/part2/Others/bottom (2).png b/part2/Others/bottom (2).png new file mode 100644 index 0000000..afe40a9 Binary files /dev/null and b/part2/Others/bottom (2).png differ diff --git a/part2/Others/bottom.png b/part2/Others/bottom.png new file mode 100644 index 0000000..afe40a9 Binary files /dev/null and b/part2/Others/bottom.png differ diff --git a/part2/Others/front (2).png b/part2/Others/front (2).png new file mode 100644 index 0000000..0827690 Binary files /dev/null and b/part2/Others/front (2).png differ diff --git a/part2/Others/front.png b/part2/Others/front.png new file mode 100644 index 0000000..0827690 Binary files /dev/null and b/part2/Others/front.png differ diff --git a/part2/Others/left (2).png b/part2/Others/left (2).png new file mode 100644 index 0000000..8f71a4d Binary files /dev/null and b/part2/Others/left (2).png differ diff --git a/part2/Others/left.png b/part2/Others/left.png new file mode 100644 index 0000000..8f71a4d Binary files /dev/null and b/part2/Others/left.png differ diff --git a/part2/Others/right (2).png b/part2/Others/right (2).png new file mode 100644 index 0000000..0492ec0 Binary files /dev/null and b/part2/Others/right (2).png differ diff --git a/part2/Others/right.png b/part2/Others/right.png new file mode 100644 index 0000000..0492ec0 Binary files /dev/null and b/part2/Others/right.png differ diff --git a/part2/Others/top (2).png b/part2/Others/top (2).png new file mode 100644 index 0000000..8a389a2 Binary files /dev/null and b/part2/Others/top (2).png differ diff --git a/part2/Others/top.png b/part2/Others/top.png new file mode 100644 index 0000000..8a389a2 Binary files /dev/null and b/part2/Others/top.png differ diff --git a/part2/Right.png b/part2/Right.png new file mode 100644 index 0000000..95e7ee5 Binary files /dev/null and b/part2/Right.png differ diff --git a/part2/Right.tif b/part2/Right.tif new file mode 100644 index 0000000..d81aa25 Binary files /dev/null and b/part2/Right.tif differ diff --git a/part2/Up.png b/part2/Up.png new file mode 100644 index 0000000..edd97d8 Binary files /dev/null and b/part2/Up.png differ diff --git a/part2/Up.tif b/part2/Up.tif new file mode 100644 index 0000000..2b85c07 Binary files /dev/null and b/part2/Up.tif differ diff --git a/part2/frag_globe.html b/part2/frag_globe.html index 6aa5609..7fee900 100644 --- a/part2/frag_globe.html +++ b/part2/frag_globe.html @@ -7,9 +7,11 @@ +
fps: 0
+ + + + + + diff --git a/part2/frag_globe.js b/part2/frag_globe.js index 1d8a877..b174f87 100644 --- a/part2/frag_globe.js +++ b/part2/frag_globe.js @@ -55,12 +55,29 @@ var u_EarthSpecLocation; var u_BumpLocation; var u_timeLocation; + var program; + //skybox + var spositionLocation; + var snormalLocation; + var stexCoordLocation; + var u_frontLoc; + var u_backLoc; + var u_leftLoc; + var u_rightLoc; + var u_bottomLoc; + var u_topLoc; + + var u_sModelLocation; + var u_sViewLocation; + var u_sPerspLocation; + var program2; + (function initializeShader() { var vs = getShaderSource(document.getElementById("vs")); var fs = getShaderSource(document.getElementById("fs")); - var program = createProgram(gl, vs, fs, message); + program = createProgram(gl, vs, fs, message); positionLocation = gl.getAttribLocation(program, "Position"); normalLocation = gl.getAttribLocation(program, "Normal"); texCoordLocation = gl.getAttribLocation(program, "Texcoord"); @@ -77,15 +94,41 @@ u_timeLocation = gl.getUniformLocation(program,"u_time"); u_CameraSpaceDirLightLocation = gl.getUniformLocation(program,"u_CameraSpaceDirLight"); - gl.useProgram(program); + // gl.useProgram(program); + + var skyvs = getShaderSource(document.getElementById("skyvs")); + var skyfs = getShaderSource(document.getElementById("skyfs")); + program2 = createProgram(gl,skyvs,skyfs,message); + spositionLocation = gl.getAttribLocation(program2,"Position"); + stexCoordLocation = gl.getAttribLocation(program2,"Texcoord"); + u_frontLoc = gl.getUniformLocation(program2,"u_Front"); + u_backLoc = gl.getUniformLocation(program2,"u_Back"); + u_leftLoc = gl.getUniformLocation(program2,"u_Left"); + u_rightLoc = gl.getUniformLocation(program2,"u_Right"); + u_bottomLoc = gl.getUniformLocation(program2,"u_Bottom"); + u_topLoc = gl.getUniformLocation(program2,"u_Top"); + u_sModelLocation = gl.getUniformLocation(program2,"u_Model"); + u_sViewLocation = gl.getUniformLocation(program2,"u_View"); + u_sPerspLocation = gl.getUniformLocation(program2,"u_Persp"); + })(); + + var dayTex = gl.createTexture(); var bumpTex = gl.createTexture(); var cloudTex = gl.createTexture(); var transTex = gl.createTexture(); var lightTex = gl.createTexture(); var specTex = gl.createTexture(); + + var frontTex = gl.createTexture(); + var backTex = gl.createTexture(); + var leftTex = gl.createTexture(); + var rightTex = gl.createTexture(); + var bottomTex = gl.createTexture(); + var topTex = gl.createTexture(); + function initLoadedTexture(texture){ gl.bindTexture(gl.TEXTURE_2D, texture); @@ -97,34 +140,50 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.bindTexture(gl.TEXTURE_2D, null); } + + function initLoadedsTexture(texture){ + gl.bindTexture(gl.TEXTURE_2D, texture); + gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); + //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); + //gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); + gl.bindTexture(gl.TEXTURE_2D, null); + } var numberOfIndices; - + var positionsName; + var normalsName; + var texCoordsName; + var indicesName; (function initializeSphere() { function uploadMesh(positions, texCoords, indices) { // Positions - var positionsName = gl.createBuffer(); + positionsName = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionsName); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); - gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(positionLocation); + //gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); + //gl.enableVertexAttribArray(positionLocation); // Normals - var normalsName = gl.createBuffer(); + normalsName = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, normalsName); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); - gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(normalLocation); + //gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, 0, 0); + //gl.enableVertexAttribArray(normalLocation); // TextureCoords - var texCoordsName = gl.createBuffer(); + texCoordsName = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, texCoordsName); gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); - gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0); - gl.enableVertexAttribArray(texCoordLocation); + // gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0); + //gl.enableVertexAttribArray(texCoordLocation); // Indices - var indicesName = gl.createBuffer(); + indicesName = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesName); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); } @@ -175,6 +234,376 @@ numberOfIndices = indicesIndex; })(); + //TODO: Initialize Skybox + var cubeIndicesNum = 0; + var spositionsName; + var stexCoordsName; + var sindicesName; + var frind; var baind; var lind; var rind; var boind; var tind; + var ftex; var batex; var ltex; var rtex; var botex; var ttex; + var fpositions; var bapositions; var lpositions; var rpositions; var bopositions; var tpositions; + (function initializeCube(){ + /*function uploadMesh(positions,texCoords,indices){ + + spositionsName = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, spositionsName); + gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + // TextureCoords + stexCoordsName = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, stexCoordsName); + gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + // Indices + sindicesName = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, sindicesName); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); + }*/ + + var faceNum = 2; + //var verticeNum = faceNum * 3; + var verticeNum = 4; + var cubePositions = new Float32Array(3 * verticeNum); + var cubeTexcoord = new Float32Array(2 * verticeNum); + var cubeIndices = new Uint16Array(3 * faceNum); + + //front face + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = -0.5; //left bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = -0.5; //left top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + fpositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, fpositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(fpositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(fpositions); + // TextureCoords + ftex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, ftex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(ftex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(ftex); + + // Indices + frind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, frind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + //back face + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = -0.5; //left bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = -0.5; //left top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + bapositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, bapositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(bapositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(bapositions); + // TextureCoords + batex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, batex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(batex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(batex); + + // Indices + baind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, baind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + //left face + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = -0.5; //left bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = -0.5; //left top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = -0.5; //right top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = -0.5; //right bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + lpositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, lpositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(lpositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(lpositions); + // TextureCoords + ltex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, ltex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(ltex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(ltex); + + // Indices + lind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + //right face + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = 0.5; //left bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = 0.5; //left top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = 0.5; //right bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + rpositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, rpositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(rpositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(rpositions); + // TextureCoords + rtex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, rtex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(rtex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(rtex); + + // Indices + rind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + //bottom + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = -0.5; //left bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = -0.5; //left top + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = 0.5; //right top + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = 0.5; //right bottom + cubePositions[posIdx ++] = -0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + bopositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, bopositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(bopositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(bopositions); + // TextureCoords + botex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, botex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(botex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(botex); + + // Indices + boind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, boind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + //top + var posIdx = 0; + var texIdx = 0; + var indicIdx = 0; + cubePositions[posIdx ++] = -0.5; //left bottom + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 1.0; + + cubePositions[posIdx ++] = -0.5; //left top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 1.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = 0.5; //right top + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = 0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 0.0; + + cubePositions[posIdx ++] = 0.5; //right bottom + cubePositions[posIdx ++] = 0.5; + cubePositions[posIdx ++] = -0.5; + cubeTexcoord[texIdx ++] = 0.0; + cubeTexcoord[texIdx ++] = 1.0; + + //indices + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 1; + cubeIndices[indicIdx++] = 2; + cubeIndices[indicIdx++] = 3; + cubeIndices[indicIdx++] = 0; + cubeIndices[indicIdx++] = 2; + + tpositions = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, tpositions); + gl.bufferData(gl.ARRAY_BUFFER, cubePositions, gl.STATIC_DRAW); + gl.vertexAttribPointer(tpositions, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(tpositions); + // TextureCoords + ttex = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, ttex); + gl.bufferData(gl.ARRAY_BUFFER, cubeTexcoord, gl.STATIC_DRAW); + gl.vertexAttribPointer(ttex, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(ttex); + + // Indices + tind = gl.createBuffer(); + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tind); + gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, cubeIndices, gl.STATIC_DRAW); + + /*var indicIdx = 0; + for(var i = 0;i= 1000) + { + fps = frameCount; + frameCount = 0; + elapsedTime -= 1000; + document.getElementById('fps').innerHTML = 'fps: '+fps; + } + lastTime = new Date().getTime(); + + // Update var model = mat4.create(); mat4.identity(model); mat4.rotate(model, 23.4/180*Math.PI, [0.0, 0.0, 1.0]); mat4.rotate(model, Math.PI, [1.0, 0.0, 0.0]); - mat4.rotate(model, -time, [0.0, 1.0, 0.0]); + mat4.rotate(model, -time, [0.0, 1.0, 0.0]); var mv = mat4.create(); mat4.multiply(view, model, mv); @@ -259,8 +704,22 @@ /////////////////////////////////////////////////////////////////////////// // Render + gl.useProgram(program); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - + gl.bindBuffer(gl.ARRAY_BUFFER, positionsName); + gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(positionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, normalsName); + gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(normalLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, texCoordsName); + gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(texCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesName); + gl.uniformMatrix4fv(u_ModelLocation, false, model); gl.uniformMatrix4fv(u_ViewLocation, false, view); gl.uniformMatrix4fv(u_PerspLocation, false, persp); @@ -287,11 +746,155 @@ gl.bindTexture(gl.TEXTURE_2D, specTex); gl.uniform1i(u_EarthSpecLocation, 5); gl.drawElements(gl.TRIANGLES, numberOfIndices, gl.UNSIGNED_SHORT,0); - + + + //draw skybox + var modelSky = mat4.create(); + mat4.identity(modelSky); + mat4.rotate(modelSky, -90.0, [1.0, 0.0, 0.0]); + mat4.rotate(modelSky, 60.0, [0.0, 1.0, 0.0]); + mat4.scale(modelSky,[22.0,22.0,22.0]); + var mv = mat4.create(); + mat4.multiply(view,modelSky,mv); + + gl.useProgram(program2); + + + //front face + gl.bindBuffer(gl.ARRAY_BUFFER,fpositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, ftex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, frind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + + gl.activeTexture(gl.TEXTURE6); + gl.bindTexture(gl.TEXTURE_2D, frontTex); + gl.uniform1i(u_frontLoc, 6); + + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + + //back + gl.bindBuffer(gl.ARRAY_BUFFER,bapositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, batex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, baind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + + gl.activeTexture(gl.TEXTURE7); + gl.bindTexture(gl.TEXTURE_2D, backTex); + gl.uniform1i(u_frontLoc, 7); + + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + + //left + gl.bindBuffer(gl.ARRAY_BUFFER,lpositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, ltex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, lind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + + gl.activeTexture(gl.TEXTURE8); + gl.bindTexture(gl.TEXTURE_2D, leftTex); + gl.uniform1i(u_frontLoc, 8); + + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + + //right + gl.bindBuffer(gl.ARRAY_BUFFER,rpositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, rtex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, rind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + + gl.activeTexture(gl.TEXTURE9); + gl.bindTexture(gl.TEXTURE_2D, rightTex); + gl.uniform1i(u_frontLoc, 9); + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + + //top + gl.bindBuffer(gl.ARRAY_BUFFER,tpositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, ttex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + gl.activeTexture(gl.TEXTURE10); + gl.bindTexture(gl.TEXTURE_2D, topTex); + gl.uniform1i(u_frontLoc, 10); + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + + //bottom + gl.bindBuffer(gl.ARRAY_BUFFER,bopositions); + gl.vertexAttribPointer(spositionLocation, 3, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(spositionLocation); + + gl.bindBuffer(gl.ARRAY_BUFFER, botex); + gl.vertexAttribPointer(stexCoordLocation, 2, gl.FLOAT, false, 0, 0); + gl.enableVertexAttribArray(stexCoordLocation); + + gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, boind); + + gl.uniformMatrix4fv(u_sModelLocation, false, modelSky); + gl.uniformMatrix4fv(u_sViewLocation, false, view); + gl.uniformMatrix4fv(u_sPerspLocation, false, persp); + + gl.activeTexture(gl.TEXTURE10); + gl.bindTexture(gl.TEXTURE_2D, bottomTex); + gl.uniform1i(u_frontLoc, 10); + gl.drawElements(gl.TRIANGLES,cubeIndicesNum,gl.UNSIGNED_SHORT,0); + time += 0.001; + //console.log(time); window.requestAnimFrame(animate); + //FPSMeter.stop(); + } + var textureCount = 0; function initializeTexture(texture, src) { @@ -305,12 +908,33 @@ } } texture.image.src = src; - } - + } initializeTexture(dayTex, "earthmap1024.png"); initializeTexture(bumpTex, "earthbump1024.png"); initializeTexture(cloudTex, "earthcloud1024.png"); initializeTexture(transTex, "earthtrans1024.png"); initializeTexture(lightTex, "earthlight1024.png"); initializeTexture(specTex, "earthspec1024.png"); + + function initializesTexture(texture,src){ + texture.image = new Image(); + texture.image.onload = function() { + initLoadedsTexture(texture); + } + texture.image.src = src; + } + + /*initializesTexture(frontTex, "front.png"); + initializesTexture(backTex, "back.png"); + initializesTexture(leftTex, "left.png"); + initializesTexture(rightTex, "right.png"); + initializesTexture(topTex, "top.png"); + initializesTexture(bottomTex, "bottom.png");*/ + initializesTexture(frontTex, "Front.png"); + initializesTexture(backTex, "Back.png"); + initializesTexture(leftTex, "Left.png"); + initializesTexture(rightTex, "Right.png"); + initializesTexture(topTex, "Up.png"); + initializesTexture(bottomTex, "Down.png"); + }()); diff --git a/part2/index.html b/part2/index.html new file mode 100644 index 0000000..ef36570 --- /dev/null +++ b/part2/index.html @@ -0,0 +1,215 @@ + + + +Fragment Globe + + + + + +
fps: 0
+
+ + + + + + + + + + + + + + + + +