8Observer8

Members
  • Content count

    227
  • Joined

  • Last visited

About 8Observer8

  • Rank
    Advanced Member
  • Birthday 03/16/1987

Profile Information

  • Gender
    Male
  • Location
    Russia, Saratov
  • Interests
    TypeScript, WebGL 1.0/2.0, Unity, Babylon.js, Three.js
  1. I made builds of some demos by "Unity Cloud Build", you can run it from here: https://8observer8.bitbucket.io/ If you want you can read about "Unity Cloud Build" here: https://unity3d.com/unity/features/cloud-build
  2. Bitballoon3D Game Pure WebGL 1.0, TypeScript, Blender Live Demo: https://8observer8.github.io/WebGL/Bitballoon/
  3. View Selector Three.js, JavaScript, Blender Live demo: https://8observer8.github.io/threejs/view-selector/
  4. My name is Ivan Enzhaev (my first name is Ivan). I was born in 1987. I am from Russia, Saratov. I'm looking for freelance tasks (or for a remote full-time work) Current status of work: FREE Email: 8observer8@gmail.com Note. I don't speak English but I have good skills for reading and writing. I will soon speak English. IDEs: VSCode (for JS and TS), Visual Studio 2015 (for C#, Unity and C++) Skills: Three.js - JS Babylon.js - JS (or TS) pure WebGL 1.0/2.0 - JS or TS OpenGL 3.3 - C++ (SDL2/SFML/GLFW/FreeGLUT/WinAPI) OpenGL 3.3 - C# (OpenTK, WinForms, WPF) Unity - C# Phaser - JS (or TS) Pixi.js - JS (or TS) 3D modeling in Blender Texturing in GIMP Some skills in animation and in texture painting in Blender I can hosting on: Github Pages Bitbucket Cloud Firebase (with build in DB) Heroku (Node.js/MongoDB) Hostings with MySQL/PHP Education Saratov State University (2004 - 2009): https://www.sgu.ru/en Faculty of Physics Department of Radiotechnology and Electrodynamics First place of work: КБ Электроприбор (2008-2014) Position: engineer programmer (C++, WinAPI, Assembler and C for Microcontroller C167 and Intel MCS-51) Second place of work: АО «ИНИУС» (2014-2015) Position: software developer (C++, MFC, Qt) Third place of work: freelance (from 2015 until now)
  5. 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
  6. Visualization of large data sets - seeking advice

    WebGL + GPU = Amazing Results!
  7. Visualization of large data sets - seeking advice

    You can use video card for calculations. It is very powerful: WebGL In Action
  8. 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>
  9. 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>
  10. Let's create WebGL examples for practice

    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>
  11. 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>
  12. Let's create WebGL examples for practice

    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>
  13. 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>
  14. Let's create WebGL examples for practice

    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>