Skip to content

module 2 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
antso77 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

module 2 #1

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
267 changes: 267 additions & 0 deletions module 2
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,267 @@
<!--Antti Astikainen
1101552
3D programming
module2 -->
<html>
<head>
<style type="text/css">
body{
background-color:black;
}

.choice{
width:400px;
margin: 0 auto;
text-align:left;
background-color:white;
}

#Canvas{
margin:5% 30%;
border:1px solid black;
}

</style>
<title>1101552</title>

<!-- Vertex //-->
<script id="shader-vs" type="x-shader/x-vertex">

attribute float aVertexAngle; // ANGLE IN CIRCLE

uniform float radius; // RADIUS OF CIRCLE

varying float vVertexAngle;

vec3 transform(float a) // CALCULATE VERTEX POSITIONS BASED ON ANGLE AND RADIUS
{
float x, y;
x = 0.0 + a * cos(aVertexAngle); // CALCULATING X POSITION OF VERTEX
y = 0.0 + a * sin(aVertexAngle); // CALCULATING Y POSITION OF VERTEX

return vec3(x, y, 0.0); //VEC3 POSITION
}

void main(void)
{
gl_Position = vec4(transform(radius), 1.0); // USE TRANSFORM FUNCTION TO GET VERTEX POSITIONS
gl_PointSize = 5.0; //POINT SIZE
vVertexAngle = aVertexAngle;
}

</script>

<!-- Fragment Shader //-->
<script id="shader-fs" type="x-shader/x-fragment">

precision highp float; // SET FLOAT PRECISION TO HIGH PRECISION

uniform float radius; // RADIUS VALUE THAT PASS AS UNIFORM

varying float vVertexAngle;

vec4 color(float a)
{
float xCos = cos(a);
float ySin = sin(a);

return vec4(xCos, ySin, 1.0, 1.0);
}

void main(void)
{
gl_FragColor = color(vVertexAngle); // CALCULATE EACH FRAGMENT COLOR BASED ON RADIUS VALUE
}

</script>

<script type="text/javascript">
var gl = null; // WEBGL CONTEXT
var prg = null; // THE PROGRAM (SHADERS)
var c_width = 500; // VARIABLE TO STORE THE WIDTH OF THE CANVAS
var c_height = 500; // VARIABLE TO STORE THE HEIGHT OF THE CANVAS

var vertexBuffer = null; //VERTEX BUFFER FOR CIRCLE

var indices = [];
var vertices = [];


var radius = 0.8; // RADIUS VALUE OF CIRCLE

var renderingMode = 'TRIANGLES'; // FOR DEFAULT RENDERING MODE


function initShaderProgram() // THIS FUNCTION CREATES SHADER PROGRAM THAT USE TO RENDER
{
vertexShader : WebGLShader; // VERTEX SHADER
fragmentShader : WebGLShader; // FRAGMENT SHADER

var vsSource = document.getElementById("shader-vs").innerHTML; // GET VERTEX SHADER SOURCE FROM INDEX.HTML

vertexShader = gl.createShader(gl.VERTEX_SHADER); // CREATE NEW SHADER
gl.shaderSource(vertexShader, vsSource); // SET SHADER SOURCE
gl.compileShader(vertexShader); // COMPILE SHADER

if(!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) // IF THERE WERE ANY ERRORS DURING COMPILATION REPORT THEM IN CONSOLE
{
console.log("Error compiling vertex shader: " + gl.getShaderInfoLog(vertexShader));
}

var fsSource = document.getElementById("shader-fs").innerHTML; // GET FRAGMENT SHADER SOURCE FROM INDEX.HTML

fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); // CREATE NEW SHADER
gl.shaderSource(fragmentShader, fsSource); // SET SHADER SOURCE
gl.compileShader(fragmentShader); // COMPILE SHADER

if(!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) // IF THERE WERE ANY ERRORS DURING COMPILATION REPORT THEM IN CONSOLE
{
console.log("Error compiling fragment shader: " + gl.getShaderInfoLog(fragmentShader));
}

prg = gl.createProgram(); // create program

gl.attachShader(prg, vertexShader); // ATTACH VERTEX SHADER TO PROGRAM
gl.attachShader(prg, fragmentShader); // ATTACH FRAGMENT SHADER TO PROGRAM
gl.linkProgram(prg); // LINK PROGRAM

if(!gl.getProgramParameter(prg, gl.LINK_STATUS)) // IF THERE WERE ANY ERRORS REPORT THEM TO BROWSER CONSOLE
{
console.log("Shader program linking failed: " + gl.getProgramInfoLog(prg));
}

gl.useProgram(prg);

// REFERENCE TO THE UNIFORMS AND ATTRIBUTES DEFINED IN THE SHADERS.

prg.vertexAngleAttribute = gl.getAttribLocation(prg, "aVertexAngle");
prg.uniformRadius = gl.getUniformLocation(prg, "radius");
}

//CREATES THE BUFFERS THAT CONTAIN SHAPE OF THE CIRCLE
function initBuffers()
{
//EACH NUMBER REPRESENTS ANGLE ON CIRCLE FOR VERTEX IN RADIANS
vertices =
[
0.0, 0.392, 0.785, 1.178, 1.57, 1.963, 2.356, 2.748, 3.141, 3.534, 3.926, 4.319, 4.712, 5.105, 5.497, 5.890
];

//THE FOLLOWING CODE SNIPPET CREATES A VERTEX BUFFER AND BINDS THE VERTICES TO IT
circleVertexBuffer = gl.createBuffer(); // CREATE VERTEX BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); // BIND BUFFER SO ALL BUFFER FUNCTIONS APPPLY TO THIS BUFFER UNTIL BIND ANOTHER OR UNBIND THIS ONE
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // SET BUFFER DATA FOR CURENTLY BOUND BUFFER
gl.bindBuffer(gl.ARRAY_BUFFER, null); // UNBIND BUFFER, GOOD PRACTICE?

//THE FOLLOWING CODE SNIPPET CREATES A VERTEX BUFFER AND BINDS THE INDICES TO IT
circleIndexBuffer = gl.createBuffer(); // CREATE INDEX BUFFER
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleIndexBuffer); // BIND BUFFER
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // SET BUFFER DATA
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); // UNBIND BUFFER
}


//Draws the scene

function drawScene()
{
gl.clearColor(0.0, 0.0, 0.0, 1.0); // SET CLEAR COLOR TO BLACK
gl.enable(gl.DEPTH_TEST); // ENABLE DEPTH TEST (NOT NECESSERY HERE BUT NEEDED FOR 3D OBJECT RENDERING)

gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // CLEAR BUFFER WITH CURRENT CLEAR COLOR
gl.viewport(0, 0, c_width, c_height); // SET VIEW PORT TO BE SAME SIZE AS CANVAS ELEMENT

gl.bindBuffer(gl.ARRAY_BUFFER, circleVertexBuffer); // BIND BUFFER, GETING READY TO DRAW
gl.vertexAttribPointer(prg.aVertexAngle, 1, gl.FLOAT, false, 0, 0); // TELL CMOPUTER HOW VBO IS ORGANISED
gl.enableVertexAttribArray(prg.vertexAngleAttribute); // ENABLE VERTEX SHADER ATTRIBUTE SO CAN USE IT INSIDE SHADER

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, circleIndexBuffer); // BIND IBO
indices = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; // SET INDEX DATA
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); // SET BUFFER DATA

switch(renderingMode) //RENDER DIFFERENT TYPES
{

case "TRIANGLES":
{
gl.drawElements(gl.TRIANGLE_FAN, indices.length, gl.UNSIGNED_SHORT,0);
break;
}
case "LINE_LOOP":
{
gl.drawElements(gl.LINE_LOOP, indices.length, gl.UNSIGNED_SHORT,0);
break;
}
case 'POINTS':
{
gl.drawElements(gl.POINTS, indices.length, gl.UNSIGNED_SHORT,0);
break;
}
}
}


//RENDERING
requestAnimationFrame(renderLoop);
function renderLoop()
{
if (document.getElementById("polygon").checked) renderingMode = "TRIANGLES"; // CHECK RADIO BUTTONS AND SET RENDERING MODE
if (document.getElementById("lineloop").checked) renderingMode = "LINE_LOOP";
if (document.getElementById("points").checked) renderingMode = "POINTS";

gl.uniform1f(prg.uniformRadius, radius);

requestAnimationFrame(renderLoop);
drawScene();
}

function initWebGL() // IN THIS FUNCTION GET WEBGL RENDERING CONTEXT FROM CANVAS ELEMENT
{
canvas = document.getElementById("Canvas"); // GET CANVAS ELEMENT INSIDE PAGE
try
{
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl"); // THEN GET WEBGL CONTEXT FROM CANVAS
}
catch(e) { }

if(!gl)
{
alert("Error: Your browser does not appear to support WebGL."); // ERROR MESSAGE IF BROWSER DOES NOT SUPPORT WEBGL
}
}


//Execute the WebGL app

function runWebGLApp()
{
//OBTAINS A WEBGL CONTEXT
initWebGL();
//INITIALIZES THE PROGRAM (SHADERS). MORE ABOUT THIS ON CHAPTER 3!
initShaderProgram();
//INITIALIZES THE BUFFERS THAT ARE GOING TO USE TO DRAW VERTEX BUFFER AND INDEX BUFFER
initBuffers();
//RENDERS VB+IB
renderLoop();
}
</script>
</head>

<body onLoad='runWebGLApp()'>
<div class="choice">
<p>3D Graphics Programming - Module 2 assignment</p>
<p>Select option for rendering type:</p>

<form>
<input type="radio" id="polygon" name="rendermode" value="TRIANGLE_STRIP" checked> Polygon<br>
<input type="radio" id="lineloop" name="rendermode" value="LINE_LOOP"> Line Loop<br>
<input type="radio" id="points" name="rendermode" value="POINTS"> Point Sprite
</form>
</div>
<canvas id='Canvas' width='500' height='500'>
Your browser does not support the HTML5 canvas element.
</canvas>

</body>

</html>