Essay Analysis
Problem Statement:
Use WebGL to model desktop window manager (Texture Mapping)
In a modern operating system, the desktop window manager is indeed a 3D graphics application. In such an operation system, each top-level window is a rectangle in the 3D space with its contents texture mapped from an image (usually dynamic). This project is to implement a simplified version of the desktop window manager. It requires modeling, texture mapping, and interaction.
1)
The desktop (to be implemented on the canvas) consists of a background/wallpaper, a task bar, and two kinds of application windows, Web Browsers (any kind) and Calculators (any kind). The task bar is always at the front, and the background is always at the back. The order of application windows (web browsers and calculator) is determined by their Z orders.
2)
The task bar shows multiple icons, two of which are Web Browser and Calculator. Clicking the Web Browser icon starts a web browser. Clicking the Calculator icon brings up a calculator. A user can start multiple instances of Web Browsers and multiple instances of Calculators.
3)
Each application window is a texture mapped 3D rectangle. On an application window, there is a designated strip called the title bar at the top, and there is an X icon on the title bar. A user can close the window by clicking the X icon and bring the window to the front by clicking the non-X area on the title bar. A user can also move the window by dragging the title bar. Below the title bar is the client area of an application. The client area has to be texture mapped by the application content. For simplicity, the client area does not need to be dynamic. An application window does not need to be resized.
Submission Requirements:
1) Create a directory called project5 under your CS home directory. Move into that directory and create two files: texmap.html and texmap.js to complete this project.
2) Make sure the project5 directory contain the two files: texmap.html and texmap.js. (Here we assume the Common directory and the project4 directory are located under the same CS directory, but you do not need to submit the Common directory.) Note1: I will share common directory separately and you have to use and include below common directory files into spotlight.html file to generate expected output. Please refer below screenshot:
Note2: texmap.html file should contain vertex-shader & fragment-shader to define vertices & color of vertices.
Below is just a sample of html file:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=utf-8″ >
<title>Koch Snowflake</title>
<body style=”background-color:grey;”></body>
<script id=”vertex-shader” type=”x-shader/x-vertex”>
attribute vec4 vPosition;
void
main()
{
gl_PointSize = 1.0;
gl_Position = vPosition;
}
</script>
<script id=”fragment-shader” type=”x-shader/x-fragment”>
precision mediump float;
void
main()
{
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}
</script>
<canvas id=”d” width=”500″ height=”500″></canvas>
<script type=”text/javascript” src=”../Common/webgl-utils.js”></script>
<script type=”text/javascript” src=”../Common/initShaders.js”></script>
<script type=”text/javascript” src=”../Common/MV.js”></script>
<script type=”text/javascript” src=”../project5/ texmap.js”></script>
</head>
</html>
Note:-
Compress the project5 directory into project5.zip and submit the compressed file to me and add
other necessary comments in texmap.js. whenever a part of the code is not obvious.
