8Observer8

Members
  • Content Count

    271
  • Joined

  • Last visited

  • Days Won

    1

Everything posted by 8Observer8

  1. 8Observer8

    3D Game Showcase?

    I remade a very simple 2D game to 3D game without engines using WebGL and Blender: https://8observer8.github.io/WebGL/Bitballoon/
  2. WebGL have a very big performance because all calculations are occurred on graphics card processor that get data from graphics card memory. You can compare WebGL with Canvas API. For example, you can write a fragment shader in GLSL that will get every pixel and analyze color with the "if" statement. The fragment shader works very quickly but CanvasRenderingContext2D.getImageData() works very slow. WebGL and GLSL have more possibilities then Canvas API. It is simple to rewrite you WebGL game to OpenGL/C++/C#/Java to have very high performance without browser's restrictions.
  3. Yes, you are right the HTML5 <canvas> element is not available on all devices with old browsers. You should show a message for a user like this: <canvas> Your browser does not support the HTML5 "canvas" element. Please, use a modern browser. </canvas> Check what modern browsers supports WebGL here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2
  4. I could not choose what to study for coding games and I decided to study these tools: Pure WebGL 1.0 and pure WebGL 2.0. I like to study linear math, trigonometry, shader math. I like to study this book which uses pure WebGL and glMatrix: Build your own 2D Game Engine and Create Great Web Games I want to understand how game frameworks works under hood, I mean: Pixi.js, Phaser.js, Three.js, Babylon.js and so on. I like to write very simple clone games like: Snake, Pong, Tetris and so on without game frameworks and game engines. I can use C++ books about OpenGL to study WebGL because WebGL 1.0 is based on OpenGL ES 2.0 (WebGL 2.0 on OpenGL ES 3.0). There are a lot of books and examples in C++ and GLSL that I can translate to WebGL. I can use ThinMatrix video tutorial to study OpenGL using Java and translate his examples to WebGL. I study C# for Unity Game Engine and I write my own simple game engine in C# and OpenGL 3.1 (OpenTK) by rewriting example from this books from deprecated/legacy OpenGL to modern OpenGL: C# Game Programming: For Serious Game Creation This book is a great. It study how to write a good modular architecture and how to develop software using TDD (Test-Driven Development). I like TDD and BDD (Behaviour-Driven Development). I am a fan of these methodologies of software development. I want to rewrite the code from this book to TypeScript/WebGL because TypeScript is very similar to C#. I liked compiled languages like C# and Java. But I study JavaScript 5 (2009) because it is very popular and I will be able to find removed jobs like freelance in the future when I will be a skilled computer graphics and game programmer. Pixi.js and Phaser.js for 2D games. It is very popular frameworks. A lot of works was made. You can write your own shaders in GLSL for these frameworks. Three.js and Babylon.js for 3D games in interactive 3D applications. These are 3D libraries based on WebGL and Canvas API like another popular graphics libraries. You can write shaders for this graphics libraries in GLSL too. Unity Game Engine for 2D and 3D games. I can write WebGL games for Desktop and I can build them for Android, iOS, Desktop (Mac, Window, Linux) to native applications and these native applications will not have browser restrictions. I can write shaders in HLSL and this shader language in very similar to GLSL. I can connect my WebGL, desktop and mobile clients to Node.js server that your Socket.io or WebSockets. For WebGL version I can use pure WebGL frameworks because Unity WebGL build does not work on mobile devices P.S. Sorry for my English. I study it but it is very hard. I did not use Translate Google for writing this message, I wrote this myself.
  5. 8Observer8

    Zombie Strike

    I write my own little 2D (and 3D) game engine in pure WebGL, JS/ES5 (and TypeScript/C# versions). I study how to write a good Game Loop. But I don not understand what does mean "consistent frame rate". Could you explain in short how did you determine that this is consistent frame rate? What could you say about my current Game Loop on Playground (wait a few second when all scripts and images will be downloaded). You can see my Game Loop in the file "MainLoop.js"
  6. 8Observer8

    Three.js in TypeScript on Playground

    I made very simple example (just rewrite Getting Started Example) in TypeScript and Three.js without Angular. This example shows: How to compile TS files to AMD modules and load them with Require.js How to place your examples in Playground (https://plnkr.co/edit/) And how to use OrbitControl with TS on Playground (It does not work now but I will solve it soon) Check: https://plnkr.co/edit/yICv96E7lTK8xu7DohJB?p=preview OrbitControl with TS works locally: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground But it does not want to work on Playground. P.S. I will be very glad if someone help me and explain me why OrbitControl works locally but does not work on Playground.
  7. Hello, Please, write your advices how to Learn English. Maybe you know good resources, books and so on. I studied German at school and university. This is my advices. What I use for studying English. I study English 10 years since 2008 (with big interruptions) by myself for free without teachers, schools, and without traveling to English countries. If you have a good internet connection you can study English at home. I advise you to use monolingual dictionaries, for example, Oxford series of dictionaries. I use them a few month. Try to use your native language at minimum. Try to think in English every minute. Use only English Books for studying programming, English and so on. For example, "English Grammar in Use" by Murphy Raymond. Do not watch videos in your native language. Use a lot of sources for studing in English only. Do not chat with people who know your native language. Do not speak with them in Skype. Find friends that do not know your native language. Write on forums and anywhere in English only. Use English everywhere where it possible. Chat and speak in Skype only to people who do not know your native language. Find remote work without people who know your native language. If you have money, study English only with teachers who do not know your native language. Do not afraid mistakes. Practice every minute. And you will see a progress soon. This information for the Slavs who know Russian, and another peaple who know Russian. I use this excelent book for grammar from Comrade Stalin period of Soviet Union (Soviet Union books are great!). It is 8th Edition, 1957: Практическая грамматика английского языка, Ерухим Израилевич, Ксения Качалова Motivational video in English: How to learn any language in six months | Chris Lonsdale | TEDxLingnanUniversity Write in English a lot with a pen every day. It is very effective:
  8. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    Music and Snowman are scary. Especially if you play at night. I feel that Krampus somewhere near.
  9. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    I am using Chrome Version 71.0.3578.98 (Official Build) (64-bit) Notebook with a size of a monitor 15' Ok, I will make a screenshot. See:
  10. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

    I did not see the third row of blocks.
  11. 8Observer8

    Best 3d models marketplace?

    @jasonpark2421 You can buy 3D models here: https://assetstore.unity.com/ There are a lot of free assets.
  12. 8Observer8

    Zombie Strike

    Excelent game! Did you make it one? Did you write code only? Where did you get the art, music and sounds?
  13. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    But why do you use WebGL for your game?
  14. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    All mobile browsers support WebGL 1.0 excepting Opera Mini: https://caniuse.com/#feat=webgl
  15. 8Observer8

    Zombie Strike

    The link does not work.
  16. 8Observer8

    Phaser 2 vs pixi vs Phaser 3 (amount of sprites per screen)

    Why? I think WebGL is better for performance than Canvas because WebGL works on GPU, not CPU.
  17. 8Observer8

    Find empty position in map

    I have an idea. I made an example on Playground with Unit Tests using Jasmine because I study TDD (Test-Driven Development). We can write a function that will get a 2D map and will return an array of empty points. Lets define: 0 - empty p - player b - bar or obstacle (I thinks that "bar" and "obstacle" are synonyms in English) For example, this is our 2D map: p00000 bbbb00 0p000b bbb000 p00000 We expected that a function will return an array of empty points: (0, 1), (0, 2) and so on. We can generate a random index from the range: [0, cells.length) and use this random index to get an empty cell from cells list: main.js /** * Returns a random integer between min (include) and max (include) */ function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } function main() { var map = [ ['p', '0'], ['0', 'p'] ]; // Get empty cell list var gameGame = new GameMap(); var emptyCells = gameGame.GetEmptyCells(map); console.log(emptyCells); // output: [ {x: 0, y: 1}, {x: 1, y: 0} ] // Get random cell var index = getRandomInt(0, emptyCells.length - 1); var cell = emptyCells[index]; console.log(cell); // output: {x: 1, y: 0} } window.onload = main; GameMap.js function GameMap() { } GameMap.prototype.GetEmptyCells = function(map) { var emptyCells = []; for (var x = 0; x < map.length; x++) { var row = map[x]; for (var y = 0; y < row.length; y++) { if (row[y] === "0") { emptyCells.push({ x: x, y: y }); } } } return emptyCells; }; SpecRunner.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jasmine Spec Runner v3.3.0</title> <link rel="shortcut icon" type="image/png" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.0.0/jasmine_favicon.png"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/jasmine-html.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.3.0/boot.min.js"></script> <!-- include source files here... --> <script src="src/GameMap.js"></script> <!-- include spec files here... --> <script src="spec/GameMapSpec.js"></script> </head> <body> </body> </html> GameMapSpec.js describe("GameMap", function() { it("GetEmptyMap_ReturnsEmptyMapList", function() { // Arrange var gameMap = new GameMap(); var expectedCells = [ { x: 0, y: 1 }, { x: 0, y: 2 }, { x: 0, y: 3 }, { x: 0, y: 4 }, { x: 0, y: 5 }, { x: 1, y: 4 }, { x: 1, y: 5 }, { x: 2, y: 0 }, { x: 2, y: 2 }, { x: 2, y: 3 }, { x: 2, y: 4 }, { x: 3, y: 3 }, { x: 3, y: 4 }, { x: 3, y: 5 }, { x: 4, y: 1 }, { x: 4, y: 2 }, { x: 4, y: 3 }, { x: 4, y: 4 }, { x: 4, y: 5 }, ]; var map = [ ['p', '0', '0', '0', '0', '0'], ['b', 'b', 'b', 'b', '0', '0'], ['0', 'p', '0', '0', '0', 'b'], ['b', 'b', 'b', '0', '0', '0'], ['p', '0', '0', '0', '0', '0'], ]; // Act var actualCells = gameMap.GetEmptyCells(map); // Assert expect(actualCells).toEqual(expectedCells); }); });
  18. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  19. 8Observer8

    Let's create WebGL examples for practice

    Textured Rectangle with Transforms using Webgl2, glMatrix, and TypeScript Playground: https://plnkr.co/edit/OxENcZjrW1SeaGi3ncy9?p=preview Source code: textured-rect-with-transforms-webgl2-typescript.zip index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Textured Rectangle with Transforms using WebGL 2.0, glMatrix, and TypeScript</title> <script data-main="dist/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <link rel="stylesheet" href="css/style.css"> </head> <body> <canvas id="renderCanvas" width="250" height="250"></canvas> </body> </html> style.css #renderCanvas { border: 5px solid #aaaaaa; } Program.ts import { Scene } from "./Scene"; class Program { public static Main(): void { let scene = new Scene("renderCanvas"); } } Program.Main(); RequireConfig.ts requirejs.config({ baseUrl: "dist", paths: { "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min" } }); requirejs(["Program"], (Program) => { }); Scene.ts import { ShaderProgram } from "./ShaderProgram"; import { mat4, vec3 } from "gl-matrix"; export class Scene { private _shaderProgram: ShaderProgram; public constructor(canvasName: string) { this._shaderProgram = new ShaderProgram(canvasName); let gl = this._shaderProgram.GetGL(); this.Init(); } private Init() { 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 ]); let gl = this._shaderProgram.GetGL(); let program = this._shaderProgram.GetProgram(); let vbo = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vbo); gl.bufferData(gl.ARRAY_BUFFER, verticesAndTexCoords, gl.STATIC_DRAW); let FSIZE = verticesAndTexCoords.BYTES_PER_ELEMENT; let a_Position = gl.getAttribLocation(program, "a_Position"); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4 * FSIZE, 0); gl.enableVertexAttribArray(a_Position); let a_TexCoord = gl.getAttribLocation(program, "a_TexCoord"); gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, 4 * FSIZE, 2 * FSIZE); gl.enableVertexAttribArray(a_TexCoord); gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); let image = new Image(); image.onload = () => { this.OnImageLoaded(image); }; image.crossOrigin = ""; image.src = "https://dl.dropboxusercontent.com/s/nxvziah1a7n9txd/256px-WebGL_Logo.svg.png"; } private OnImageLoaded(image: HTMLImageElement) { let gl = this._shaderProgram.GetGL(); let program = this._shaderProgram.GetProgram(); 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, 0.5, 0)); mat4.rotateZ(modelMatrix, modelMatrix, 20.0 * Math.PI / 180.0); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1 * 2.0, 1, 1)); 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); } } ShaderProgram.ts export class ShaderProgram { private _gl: WebGLRenderingContext; private _program: WebGLProgram; private _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; }`; private _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); }`; public constructor(canvasName: string) { let canvas = document.getElementById(canvasName) as HTMLCanvasElement; this._gl = canvas.getContext("webgl2") as WebGLRenderingContext; let gl = this._gl; let vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, this._vertexShaderSource); gl.compileShader(vShader); let fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, this._fragmentShaderSource); gl.compileShader(fShader); this._program = gl.createProgram(); gl.attachShader(this._program, vShader); gl.attachShader(this._program, fShader); gl.linkProgram(this._program); gl.useProgram(this._program); } public GetGL(): WebGLRenderingContext { return this._gl; } public GetProgram(): WebGLProgram { return this._program; } } package.json { "name": "textured-rect-with-transforms-webgl2-typescript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/gl-matrix": "^2.4.4", "@types/requirejs": "^2.1.31" } } tsconfig.json { "compilerOptions": { "module": "amd", "sourceMap": true, "outDir": "dist", "target": "es5" }, "exclude": [ "node_modules" ] }
  20. 8Observer8

    Let's create WebGL examples for practice

    Textured Rectangle with Transforms using ES5, WebGL 1.0, glMatrix Playground <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Textured Rectangle with Transforms using WebGL 1.0, ES5</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/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); gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); // Allows transperency with textures. gl.enable(gl.BLEND); gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 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.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); var u_Sampler = gl.getUniformLocation(program, "u_Sampler"); gl.uniform1i(u_Sampler, 0); var modelMatrix = mat4.create(); mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, 0.5, 0)); mat4.rotateZ(modelMatrix, modelMatrix, 20.0 * Math.PI / 180.0); mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(1 * 2.0, 1, 1)); 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/nxvziah1a7n9txd/256px-WebGL_Logo.svg.png"; </script> </body> </html>
  21. 8Observer8

    What game engine/framework do you use?

    I study: Phaser Pixi.js Babylon.js Three.js Unity WebGL and Unity Desktop pure WebGL 1.0/2.0 with this books: Build your own 2D Game Engine and WebGL Programming Guide pure OpenGL 3+ in C++/GLFW, C#/OpenTK, Java (LWJGL3), and Python/GLFW. It help me learning WebGL because many book and tutorial about OpenGL I use two languages for web: JavaScriptES5 and TypeScript. I study TDD (Test-Driven Development) and Unit Testing for writing specs using Jasmine Mock framwork. I want to write some simple multiplayer games like Snake or Battle City using Socket.io and TDD. This is my achievement. I connected Unit WebGL Client and Unity Windows Client with Heroku by Socke.io. I wrote simple server in TypeScript that just send "hello, world" and counter for clients. You can test it if you want: Unity WebGL Client: https://green-game.herokuapp.com/ Unit Desktop Client: https://dl.dropboxusercontent.com/s/s5an0qzsb1h3j6o/UnitClientWindowsBuild.zip I study this tutorial: Unity Multiplayer Game Development with Node | Pluralsight
  22. Hello, I am trying to run official Getting Started Example on Playground https://plnkr.co/edit/ with OrbitControls. The first problem was that official OrbitControls is not friendly with TypeScript and I took: https://github.com/nicolaspanel/three-orbitcontrols-ts But this module does not use AMD by default and I recompiled it to AMD for usage with RequireJS library because I have a few files: Program.ts and Scene.ts and I can run my example on Playground only with AMD compilation. Recompilation requires going in node_modules folder for recompiling module - it is not a common way. I created libs folder in my project and copied content of dist to libs/three-orbitcontrols-ts/ it works localy: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground I put all files in one directory for usage in Plunker and it works localy: https://github.com/8Observer8/usage-orbitcontrols-in-typescript-on-playground-one-directory But when I upload the files on Plunker it does not work: https://plnkr.co/edit/yICv96E7lTK8xu7DohJB?p=preview You will see the error in a console: Please, help me to solve this problem.
  23. 8Observer8

    How to make a multiplayer game

    I want to make multiplayer games too. I have some suggestions for you. Set a simple first goal for youself. I think that free Heroku is the best. Make a very simple server app that will send the "hello, world" message + "counter" to your clients. Chose client side: Canvas API, WebGL, Phaser, Pixi.js, Three.js, Babylon.js, Unity WebGL and so on. I choose Unity for client. I wrote the very simple server in TypeScript. I built client in WebGL and in desktop app. I uploaded my simple server on Heroku. You can try run: Unity WebGL Client: Click to run in browser (sometimes you need to run a few times to wake up Heroku app) Unity Desktop Client for Windows: Click to download You will see a message that server send every one second. If you want, I can explain you in TeamViewer or Skype how to make it for free. Write me a private message.
  24. 8Observer8

    How to make a multiplayer game

    I found a of lessons from link above: Multiplayer Nodejs Game Tutorial This is a step-by-step instruction how to deploy your game server on Heroku: Getting Started on Heroku with Node.js