WebGL Scale triangle

My Projects
Change Password
My Profile
Logout
Undo
Redo
Cut
Copy
Paste
Delete
Select All
Find
Find and Replace
Editor Theme
Crimson
Eclipse
Github
Solarized
Cobalt
krTheme
Monokai
Terminal
Textmate
Twilight
Vibrant Ink
Font Size
8px
9px
10px
11px
12px
13px
14px
15px
16px
17px
18px
20px
22px
24px
Tab Size
1
2
3
4
5
6
7
8
Show Invisible
Hide Invisible
Show Line Numbers
Hide Line Numbers
Ace Editor (Default)
Vim Editor
Emacs Editor
Open New Project
Save Project
Save As New Project
Share Project
Search Project
<!doctype html> <html> <body> <canvas width = "300" height = "300" id = "my_Canvas"></canvas> <script> /*=================Creating a canvas=========================*/ var canvas = document.getElementById('my_Canvas'); gl = canvas.getContext('experimental-webgl'); /*===========Defining and storing the geometry==============*/ var vertices = [ -0.5,0.5,0.0, -0.5,-0.5,0.0, 0.5,-0.5,0.0, ]; //Create an empty buffer object and store vertex data var vertex_buffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); gl.bindBuffer(gl.ARRAY_BUFFER, null); /*========================Shaders============================*/ //Vertex shader source code var vertCode = 'attribute vec4 coordinates;' + 'uniform mat4 u_xformMatrix;' + 'void main(void) {' + ' gl_Position = u_xformMatrix * coordinates;' + '}'; //Create a vertex shader program object and compile it var vertShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertShader, vertCode); gl.compileShader(vertShader); //fragment shader source code var fragCode = 'void main(void) {' + ' gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}'; //Create a fragment shader program object and compile it var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); //Create and use combiened shader program var shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); gl.linkProgram(shaderProgram); gl.useProgram(shaderProgram); /*===================scaling==========================*/ var Sx = 1.0, Sy = 1.5, Sz = 1.0; var xformMatrix = new Float32Array([ Sx, 0.0, 0.0, 0.0, 0.0, Sy, 0.0, 0.0, 0.0, 0.0, Sz, 0.0, 0.0, 0.0, 0.0, 1.0 ]); var u_xformMatrix = gl.getUniformLocation(shaderProgram, 'u_xformMatrix'); gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix); /* ===========Associating shaders to buffer objects============*/ gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); var coordinatesVar = gl.getAttribLocation(shaderProgram, "coordinates"); gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coordinatesVar); /*=================Drawing the Quad========================*/ gl.clearColor(0.5, 0.5, 0.5, 0.9); gl.enable(gl.DEPTH_TEST); gl.clear(gl.COLOR_BUFFER_BIT); gl.viewport(0,0,canvas.width,canvas.height); gl.drawArrays(gl.TRIANGLES, 0, 3); </script> </body> </html>

WebGL Scale triangle (HTML-5)

WebGL Scale triangle (HTML-5) helps you to Edit, Run and Share your Html Code directly from your browser. This development environment provides you version HTML-5.

How to give program Input?

The latest version of Coding Ground allows to provide program input at run time from the termnial window exactly the same way as you run your program at your own computer. So simply run a program and provide your program input (if any) from the terminal window available in the right side.

Keyboard Shortcuts

ShortcutDescription
⌘ + EnterRun the program
⌘ + SSave Project (Login Required)
⇧ + ⌘ + SSave As Project
⌘ + PNew Project
⌘ + GShare Project
⌘ + ZUndo Editing
⌘ + YRedo Editing
⌘ + ASelect All Text
⌘ + XCut Selected Text
⌘ + CCopy Selected Text
⌘ + VPaste Copied Text
⌘ + FSearch Text
⌘ + ⌥ + FReplace Text
ShortcutDescription
Ctrl + EnterRun the program
Ctrl + SSave Project
Shift + Ctrl + SSave As Project
Ctrl + GShare Project
Ctrl + ZUndo Editing
Ctrl + YRedo Editing
Ctrl + ASelect All Text
Ctrl + XCut Selected Text
Ctrl + CCopy Selected Text
Ctrl + VPaste Copied Text
Ctrl + FSearch Text
Ctrl + HReplace Text

Save Html Project

You can save your Html Project with us so that you can access this project later on. To save a project you will need to create a login Id with us. So before you save a project, please create a login Id using a link given at the top right corner of this page.

Share Html Project

You can use this feature to share your Html Code with your teachers, classmates and colleagues. Just click Share Button and it will create a short link, which can be shared through Email, WhatsApp or even through Social Media. A shared link will be deleted if it has been passive for almost 3 months.

 Execute |  Beautify | Share