Scribd
Upload
2 views22 pages

CS351 Lecture5

The document outlines a lecture on Computer Graphics (CS351) by Dr. Ahmed Hosny, focusing on transformations such as translation, rotation, and scaling of shapes using WebGL. It includes code snippets for vertex and fragment shaders to implement these transformations, along with explanations of the mathematical concepts involved. The lecture emphasizes the importance of understanding the operations required for manipulating graphics in a web environment.

Uploaded by

abdo2652149
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views22 pages

CS351 Lecture5

The document outlines a lecture on Computer Graphics (CS351) by Dr. Ahmed Hosny, focusing on transformations such as translation, rotation, and scaling of shapes using WebGL. It includes code snippets for vertex and fragment shaders to implement these transformations, along with explanations of the mathematical concepts involved. The lecture emphasizes the importance of understanding the operations required for manipulating graphics in a web environment.

Uploaded by

abdo2652149
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Computer

Graphics
(CS351)

Lecturer:
Dr. Ahmed Hosny

CS Department
Faculty of Computer and Information
Assiut University
Lecture 5

CS351 - Dr. Ahmed Hosny 2


No entring after 15 min, exit anytime.

Your cell phone is silent and in your


pocket.
Lecture
Rules Ask anytime or write down your question
to the end.

Focus and Attention.

CS351 - Dr. Ahmed Hosny 3


WebGL .. Continue

CS351 - Dr. Ahmed Hosny 4


Moving, Rotating, and Scaling
• move (translate), rotate, and scale the triangle and display the results
on the screen. These operations are called transformations (affine
transformations).

CS351 - Dr. Ahmed Hosny 5


CS351 - Dr. Ahmed Hosny

TranslatedTriangle

6
CS351 - Dr. Ahmed Hosny 7
Operations
• As these are a per-vertex operation, you need to
implement the operations in a vertex shader.

CS351 - Dr. Ahmed Hosny 8


var VSHADER_SOURCE =`
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main() {
gl_Position = a_Position + u_Translation;
}`;

var FSHADER_SOURCE =`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;

// The translation distance for x, y, and z direction


var Tx = 0.5, Ty = 0.5, Tz = 0.0;

function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl’);

CS351 - Dr. Ahmed Hosny 9


var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL’);
return;
}

// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.’);
return;
}

// Write the positions of vertices to a vertex shader


var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices’);
return;
}

CS351 - Dr. Ahmed Hosny 10


// Pass the translation distance to the vertex shader
var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation’);
if (!u_Translation) {
console.log('Failed to get the storage location of u_Translation’);
return;
}
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);

// Specify the color for clearing <canvas>


gl.clearColor(0, 0, 0, 1);

// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
Can we use uniform3f?
// Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}

CS351 - Dr. Ahmed Hosny 11


var VSHADER_SOURCE =`
attribute vec4 a_Position;
uniform vec4 u_Translation;
void main() {
gl_Position = a_Position + u_Translation;
}`;

var FSHADER_SOURCE =`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;

// The translation distance for x, y, and z direction


var Tx = 0.5, Ty = 0.5, Tz = 0.0;

function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl’);

CS351 - Dr. Ahmed Hosny 12


Rotation

CS351 - Dr. Ahmed Hosny 13


Rotation
• Rotation is a little bit more complex than translation.
• Three items are required:
• Rotation axis (the axis the shape will be rotated around)
• Rotation direction (the direction: clockwise or counterclockwise)
• Rotation angle (the number of degrees the shape will be rotated through)
• right-hand-rule rotation.

CS351 - Dr. Ahmed Hosny 14


0, 0.5, -0.5, -0.5, 0.5, -0.5 0, 0.5, -0.5, -0.5, 0.5, -0.5

Normal Rotated 90

CS351 - Dr. Ahmed Hosny 15


Rotation
• We assume that the point p’ (x’, y’, z’) is the β degree rotated point of
p (x, y, z) around the z-axis.

• Because the rotation is around the z-axis, the z coordinate does not
change, and you can ignore it for now.

CS351 - Dr. Ahmed Hosny 16


r is the distance from the origin to the point p
x = r cos α
y = r sin α

x’ = r cos (α + β)
y’ = r sin (α + β)

Trigonometry Addition Formulas

• sin(a+b) = sin(a)cos(b) + cos(a)sin(b)


• sin(a-b)= sin(a)cos(b)-cos(a)sin(b)
• cos(a+b)=cos(a)cos(b)-sin(a)sin(b) x’ = r (cos α cos β – sin α sin β)
• cos(a-b)=cos(a)cos(b)+sin(a)sin(b) y’ = r (sin α cos β + cos α sin β)

x’ = x cos β – y sin β
y’ = x sin β + y cos β

CS351 - Dr. Ahmed Hosny 17


var VSHADER_SOURCE =`
attribute vec4 a_Position;
uniform float u_CosB, u_SinB;
void main() {
gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;
gl_Position.z = a_Position.z;
gl_Position.w = 1.0;
}`;

// Fragment shader program


var FSHADER_SOURCE =`
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}`;

// The rotation angle


var ANGLE = 90.0;

CS351 - Dr. Ahmed Hosny 18


function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');

// Get the rendering context for WebGL


var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL’);
return;
}

// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.’);
return;
}

// Write the positions of vertices to a vertex shader


var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices’);
return;
}
CS351 - Dr. Ahmed Hosny 19
// Pass the data required to rotate the shape to the vertex shader
var radian = Math.PI * ANGLE / 180.0; // Convert to radians
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);

var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB’);


var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB’);
if (!u_CosB || !u_SinB) {
console.log('Failed to get the storage location of u_CosB or u_SinB’);
return;
}
gl.uniform1f(u_CosB, cosB);
gl.uniform1f(u_SinB, sinB);

// Specify the color for clearing <canvas>


gl.clearColor(0, 0, 0, 1);

// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);

// Draw the rectangle


gl.drawArrays(gl.TRIANGLES, 0, n);
}
CS351 - Dr. Ahmed Hosny 20
CS351 - Dr. Ahmed Hosny

Next • More Graphics Concepts


Lectur • Continue WebGL
e
21
Any
Questions?

CS351 - Dr. Ahmed Hosny 22

You might also like