• Advertisement

8Observer8

Member
  • Content count

    65
  • Joined

  • Last visited

Community Reputation

163 Neutral

About 8Observer8

  • Rank
    Member

Personal Information

  • Interests
    |programmer|
  1. C vs. C++ vs. C# (Beginner)

    You can start with Python. It is a friendly language for beginning. It will be usefull in Future for writing games with PyGame or Panda3D or for writing plugins for Blender, GIMP and Maya. My choice is: C#, JavaScript and Python. C# for Unity JavaScript for writing browser multiplayer games with Node.js/socket.io, Phaser, Pixi.js, WebGL, Babylon.js and Three.js Python for writing plugins for Blender
  2. How to start the journey

    I think these are good tutorials for beginning: https://noobtuts.com/unity
  3. How to start the journey

    You can start from here: https://unity3d.com/learn/tutorials
  4. Let's create WebGL examples for practice

    Drawing a text Live demo + source code: https://plnkr.co/edit/GqmJ4uB5XmNB1Cu7qlhl?p=preview Download the source code: drawing-text.zip Fonts was generated from TrueType and OpenType by Bitmap Font Generator
  5. Let's create WebGL examples for practice

    WebGL 2.0. Rotation animation https://jsfiddle.net/8Observer8/fLumroxa/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Rotation animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #a8bdc4; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.clearColor(0.894, 0.976, 0.886, 1.0); var ANGLE_STEP = 45.0; // Rotation angle (degrees/second) var g_last = Date.now(); var currentAngle = 0.0; var modelMatrix = mat4.create(); var tick = function () { currentAngle = animate(currentAngle); // Update the rotation angle draw(4, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle requestAnimationFrame(tick, canvas); // Request that the browser calls tick }; tick(); function draw(n, currentAngle, modelMatrix, u_ModelMatrix) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); } function animate(angle) { // Calculate the elapsed time var now = Date.now(); var elapsed = now - g_last; g_last = now; // Update the current rotation angle (adjusted by the elapsed time) var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; return newAngle %= 360; } </script> </body> </html>
  6. Let's create WebGL examples for practice

    WebGL 1.0. Rotation animation https://jsfiddle.net/8Observer8/gLpowbe2/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Rotation animation</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #a8bdc4; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.clearColor(0.894, 0.976, 0.886, 1.0); var ANGLE_STEP = 45.0; // Rotation angle (degrees/second) var g_last = Date.now(); var currentAngle = 0.0; var modelMatrix = mat4.create(); var tick = function () { currentAngle = animate(currentAngle); // Update the rotation angle draw(4, currentAngle, modelMatrix, u_ModelMatrix); // Draw the triangle requestAnimationFrame(tick, canvas); // Request that the browser calls tick }; tick(); function draw(n, currentAngle, modelMatrix, u_ModelMatrix) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, currentAngle * Math.PI / 180); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, n); } function animate(angle) { // Calculate the elapsed time var now = Date.now(); var elapsed = now - g_last; g_last = now; // Update the current rotation angle (adjusted by the elapsed time) var newAngle = angle + (ANGLE_STEP * elapsed) / 1000.0; return newAngle %= 360; } </script> </body> </html>
  7. Let's create WebGL examples for practice

    WebGL 1.0. Applying a texture to a square https://jsfiddle.net/zjydm1ev/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Applying a texture to a square</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = ` attribute vec2 a_Position; attribute vec2 a_TexCoord; uniform mat4 u_ModelMatrix; varying vec2 v_TexCoord; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); v_TexCoord = a_TexCoord; }`; var fragmentShaderSource = ` precision mediump float; uniform sampler2D u_Sampler; varying vec2 v_TexCoord; void main() { gl_FragColor = texture2D(u_Sampler, v_TexCoord); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var verticesAndTexCoords = new Float32Array([ -0.5, 0.5, 0.0, 1.0, // (x, y), (u, v) -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); var image = new Image(); image.onload = function () { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.activeTexture(gl.TEXTURE0); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } image.crossOrigin = ""; image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg'; </script> </body> </html> WebGL 2.0. Applying a texture to a square https://jsfiddle.net/gd2uo3jg/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Applying a texture to a square</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; in vec2 a_TexCoord; uniform mat4 u_ModelMatrix; out vec2 v_TexCoord; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); v_TexCoord = a_TexCoord; }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform sampler2D u_Sampler; in vec2 v_TexCoord; out vec4 fragColor; void main() { fragColor = texture(u_Sampler, v_TexCoord); }`; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var verticesAndTexCoords = new Float32Array([ -0.5, 0.5, 0.0, 1.0, // (x, y), (u, v) -0.5, -0.5, 0.0, 0.0, 0.5, 0.5, 1.0, 1.0, 0.5, -0.5, 1.0, 0.0 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); var FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); var a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); var image = new Image(); image.onload = function () { gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1); gl.activeTexture(gl.TEXTURE0); var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D , 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1.5, 1.5, 1.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } image.crossOrigin = ""; image.src = 'https://dl.dropboxusercontent.com/s/xi091ya34qqzda2/lightblueflower.jpg'; </script> </body> </html>
  8. Let's create WebGL examples for practice

    WebGL 1.0. Square translation using WASD and arrow keys https://jsfiddle.net/tqnfyy53/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Square translation using WASD and arrow keys</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <p>Click here to active the window</p> <p>Use WASD or arrow keys</p> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); var pos = { x: 0.1, y: 0.1 }; var step = 0.2; window.addEventListener('keydown', function (event) { if (event.keyCode === 87 || event.keyCode === 38) // W, Up pos.y += step; else if (event.keyCode === 65 || event.keyCode === 37) // A, Left pos.x -= step; else if (event.keyCode === 83 || event.keyCode === 40) // S, Down pos.y -= step; else if (event.keyCode === 68 || event.keyCode === 39) // D, Right pos.x += step; draw(pos); }); draw(pos); function draw(pos) { mat4.identity(modelMatrix); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(pos.x, pos.y, 0.0)); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.2, 0.2, 0.2)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html> WebGL 2.0. Square translation using WASD and arrow keys https://jsfiddle.net/14z5m5hh/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Square translation using WASD and arrow keys</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <p>Click here to active the window</p> <p>Use WASD or arrow keys</p> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); var pos = { x: 0.1, y: 0.1 }; var step = 0.2; window.addEventListener('keydown', function (event) { if (event.keyCode === 87 || event.keyCode === 38) // W, Up pos.y += step; else if (event.keyCode === 65 || event.keyCode === 37) // A, Left pos.x -= step; else if (event.keyCode === 83 || event.keyCode === 40) // S, Down pos.y -= step; else if (event.keyCode === 68 || event.keyCode === 39) // D, Right pos.x += step; draw(pos); }); draw(pos); function draw(pos) { mat4.identity(modelMatrix); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(pos.x, pos.y, 0.0)); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.2, 0.2, 0.2)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html>
  9. Let's create WebGL examples for practice

    WebGL 1.0. Scaling on mouse click https://jsfiddle.net/m86tq8t2/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Scaling on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var maxScale = 1.5; var minScale = 0.5; var currentscale = minScale; var scaleStep = 0.1; draw(currentscale); canvas.onmousedown = function () { currentscale += scaleStep; if (currentscale > maxScale) { scaleStep *= -1; currentscale = maxScale; } else if (currentscale < minScale) { scaleStep *= -1; currentscale = minScale; } draw(currentscale); } function draw(scale) { mat4.identity(modelMatrix); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(scale, scale, scale)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html> WebGL 2.0. Scaling on mouse click https://jsfiddle.net/kffdhsvw/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Scaling on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var maxScale = 1.5; var minScale = 0.5; var currentscale = minScale; var scaleStep = 0.1; draw(currentscale); canvas.onmousedown = function () { currentscale += scaleStep; if (currentscale > maxScale) { scaleStep *= -1; currentscale = maxScale; } else if (currentscale < minScale) { scaleStep *= -1; currentscale = minScale; } draw(currentscale); } function draw(scale) { mat4.identity(modelMatrix); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(scale, scale, scale)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html>
  10. Let's create WebGL examples for practice

    WebGL 1.0. Rotation after translation on mouse click https://jsfiddle.net/ue911jao/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Rotation after translation on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var angle = 0; var angleStep = 10; draw(angle); canvas.onmousedown = function () { draw(angle); angle += angleStep; } function draw(angle) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0)); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html> WebGL 2.0. Rotation after translation on mouse click https://jsfiddle.net/55xx969b/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Rotation after translation on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var angle = 0; var angleStep = 10; draw(angle); canvas.onmousedown = function () { draw(angle); angle += angleStep; } function draw(angle) { mat4.identity(modelMatrix); mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0)); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html>
  11. Let's create WebGL examples for practice

    WebGL 1.0. Rotation before translation on mouse click https://jsfiddle.net/4fxmLhmc/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Rotation before translation on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var angle = 0; var angleStep = 10; draw(angle); canvas.onmousedown = function () { draw(angle); angle += angleStep; } function draw(angle) { mat4.identity(modelMatrix); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0)); mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html> WebGL 2.0. Rotation before translation on mouse click https://jsfiddle.net/cLxuo6jx/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Rotation before translation on mouse click</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var canvas = document.getElementById("renderCanvas"); var gl = canvas.getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); var angle = 0; var angleStep = 10; draw(angle); canvas.onmousedown = function () { draw(angle); angle += angleStep; } function draw(angle) { mat4.identity(modelMatrix); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0)); mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6)); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } </script> </body> </html>
  12. Let's create WebGL examples for practice

    WebGL 1.0. Scale a square using glMatrix https://jsfiddle.net/8Observer8/xuz9wcxm/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Scale a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #7cc1d3; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.486, 0.372, 0.749); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.5, 0.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.941, 0.960, 0.819, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html> WebGL 2.0. Scale a square using glMatrix https://jsfiddle.net/8Observer8/6pLyzwaj/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Scale a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #7cc1d3; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.486, 0.372, 0.749); var modelMatrix = mat4.create(); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.5, 0.5)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.941, 0.960, 0.819, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html>
  13. Let's create WebGL examples for practice

    WebGL 1.0. Rotate a square using glMatrix https://jsfiddle.net/8Observer8/cqyu7zx9/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Rotate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); mat4.rotateZ(modelMatrix, modelMatrix, 20 * Math.PI / 180); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html> WebGL 2.0. Rotate a square using glMatrix https://jsfiddle.net/8Observer8/v4atjmfh/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Rotate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #e0aeae; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.207, 0.635, 0.125); var modelMatrix = mat4.create(); mat4.rotateZ(modelMatrix, modelMatrix, 20 * Math.PI / 180); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.894, 0.976, 0.886, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html>
  14. Let's create WebGL examples for practice

    WebGL 1.0. Translate a square using glMatrix https://jsfiddle.net/8Observer8/t2q4rmnm/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 1.0. Translate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `attribute vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `precision mediump float; uniform vec3 u_Color; void main() { gl_FragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html> WebGL 2.0. Translate a square using glMatrix https://jsfiddle.net/8Observer8/o7bmuaaj/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL 2.0. Translate a square using glMatrix</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script> <style> #renderCanvas { border: 5px solid #aaaaaa; } </style> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> <script> var vertexShaderSource = `#version 300 es in vec2 a_Position; uniform mat4 u_ModelMatrix; void main() { gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0); }`; var fragmentShaderSource = `#version 300 es precision mediump float; uniform vec3 u_Color; out vec4 fragColor; void main() { fragColor = vec4(u_Color, 1.0); }`; var gl = document.getElementById("renderCanvas").getContext("webgl2"); var vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vertexShaderSource); gl.compileShader(vShader); var fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fragmentShaderSource); gl.compileShader(fShader); var program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); gl.useProgram(program); var vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); var vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); var a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); var u_Color = gl.getUniformLocation(program, "u_Color"); gl.uniform3f(u_Color, 0.635, 0.450, 0.125); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.3, 0.3, 0.0)); var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix"); gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix); gl.clearColor(0.898, 0.984, 0.905, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); </script> </body> </html>
  • Advertisement