8Observer8

Members
  • Content Count

    387
  • Joined

  • Last visited

  • Days Won

    1

8Observer8 last won the day on March 12 2019

8Observer8 had the most liked content!

About 8Observer8

  • Rank
    Advanced Member
  • Birthday 03/16/1987

Contact Methods

  • Website URL
    https://8observer8.github.io/

Profile Information

  • Gender
    Male
  • Interests
    WebGL 1.0, TypeScript, Blender

Recent Profile Visitors

3930 profile views
  1. I thought that it is a standard example but now I think it is your own project. I just wanted to download 3D environment from the example. I like it. But okay, I will find something similar for my experiments or I will try to make it in Blender for practice in 3D modeling.
  2. Could you give me a link where can I download the source code of this example?
  3. I study this book: Multiplayer Game Development with HTML5 I rewrite the classic Snake game example from the book to TypeScript. Author uses Node.js, Express and SocketIO. I want to make 3D version of the Snake game. I will deploy the game on Heroku for free: https://www.heroku.com/ You can use OpenShift (https://www.openshift.com/) - it is the same. I found a very good tutorial how to make a smooth movement using lag compensation and client prediction methods: Real Time Multiplayer in HTML5 I deployed the example from the tutorial on Heroku: https://battle-world.herokuapp.com/?debug (I use a free plan and if no one runs it 30 minute you need to wait 10 seconds) You can open two browser pages to test it. The example from the tutorial on GitHub: https://github.com/ruby0x1/realtime-multiplayer-in-html5
  4. I study these game engines for web: Babylon.js - 3D, TypeScript, JavaScript, desktop and mobile Phaser CE (Community Edition) - 2D, TypeScript, JavaScript, desktop and mobile Phaser 3 - 2D, TypeScript, JavaScript, desktop and mobile Unity WebGL - 2D/3D, C#, desktop only
  5. Read my instruction and build my example here: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript
  6. I translated the Phaser 3 example from the Buttons In Phaser 3 tutorial to TypeScript and placed it on Playground: https://plnkr.co/edit/HaC3iIB0eQG1vilq?preview
  7. For example, like this: https://plnkr.co/edit/CJ9iGJr4mkysO5t0?preview <!doctype html> <html> <body> <input id="nameField" value="Enter your name..."> <button id="okButton" onclick="okButton_OnClick()">Ok</button> <script> function okButton_OnClick() { var nameField = document.getElementById("nameField"); var name = nameField.value; console.log(name); } </script> </body> </html>
  8. This is a quote from the Unity documentation: https://docs.unity3d.com/Manual/webgl-browsercompatibility.html We can use Unity native builds for desktop computers, mobiles devices and desktop browser. Phaser for 2D and Babylon.js/Three.js for 3D. But there are a lot of another WebGL frameworks: List of WebGL frameworks - Wikipedia A collection of WebGL frameworks and libraries
  9. This is a big playlist (243 lectures) Math for Gamedev
  10. Video introduction to linear algebra: Essence of linear algebra Written lessons: https://learnopengl.com/Getting-started/Transformations https://learnopengl.com/Getting-started/Coordinate-Systems https://learnopengl.com/Getting-started/Camera Let's translate these lesson's examples to WebGL.
  11. I learn math for graphics and games too. I study pure WebGL and JavaScript/TypeScript. And I study Phaser (2D) and Babylon.js (3D). We can use WebGL and JavaScript/TypeScript to study Geometry, Trigonometry, Linear Algebra and Phisics. This is my short example how to use 2D Physics with TypeScript. Here you find a video course: Math for Game Developers Books for beginners that I study: 2004 - 04 - Math and Physics for Game Programmers - Wendy Stahler - 504 pages: Amazon 2011 - 02 - Graphics for Game Programming - JungHyun Han - 330 pages: Amazon 2011 - 06 - Mathematics for 3D Game Programming and Computer Graphics - 3rd edition - Eric Lengyel - 624 pages: Amazon Code: http://mathfor3dgameprogramming.com/ 2011 - 11 - 3D Math Primer for Graphics and Game Development - 2nd edition - F. Dunn, I. Parberry - 846 pages: Amazon 2013 - 12 - Mathematics for Computer Graphics - 4th edition - John Vince - 412 pages: Amazon 2015 - 08 - Essential Mathematics for Games and Interactive Applications - 3rd edition - James M. Van Verth, Lars M. Bishop - 624 pages: Amazon Code: https://github.com/jvanverth/essentialmath
  12. Draw line. WebGL 2.0, TypeScript, glMatrix, jQuery, TypeScript Playground: https://plnkr.co/edit/6LDFAX2e8Dc0QCIo?preview Source Code: draw-line-webgl20-ts.rar index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line. WebGL 2.0, TypeScript</title> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> </head> <body> <canvas id="renderCanvas" width="300" height="300"></canvas> </body> </html> Main.ts import * as $ from "jquery"; import { mat4 } from "gl-matrix"; $(() => { // Get WebGL context let canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; let gl = canvas.getContext("webgl2"); let vShaderSource = [ "#version 300 es", "layout(location = 0) in vec3 aPosition;", "uniform mat4 uProjMatrix;", "void main()", "{", " gl_Position = uProjMatrix * vec4(aPosition, 1.0);", "}" ].join("\n"); let fShaderSource = [ "#version 300 es", "precision mediump float;", "out vec4 fragColor;", "void main()", "{", " fragColor = vec4(1.0, 0.0, 0.0, 1.0);", "}" ].join("\n"); let vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vShaderSource); gl.compileShader(vShader); let vMessage = gl.getShaderInfoLog(vShader); if (vMessage.length > 0) console.log("Verex Shader Error: " + vMessage); let fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fShaderSource); gl.compileShader(fShader); let fMessage = gl.getShaderInfoLog(fShader); if (fMessage.length > 0) console.log("Fragment Shader Error: " + fMessage); let program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); let progMessage = gl.getProgramInfoLog(program); if (progMessage.length > 0) console.log("Failed to link a program: " + progMessage); gl.useProgram(program); let vertexPositions = [ 0.0, 0.0, 0.0, 70, 70, 0.0 ]; let vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositions), gl.STATIC_DRAW); let aPositionLocation = gl.getAttribLocation(program, "aPosition"); if (aPositionLocation < 0) console.log ("Failed to get a aPosition location"); gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aPositionLocation); let aProjMatrixLocation = gl.getUniformLocation(program, "uProjMatrix"); if (!aProjMatrixLocation) console.log("Failed to get a uProjMatrix location"); let projMatrix = mat4.ortho(mat4.create(), -100, 100, -100, 100, 10, -10); gl.uniformMatrix4fv(aProjMatrixLocation, false, projMatrix); gl.clearColor(0.9, 0.9, 0.9, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.LINES, 0, 2); }); RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min", "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min" } }); requirejs(["Main"], () => { }); tsconfig.json { "compilerOptions": { "target": "ES5", "module": "AMD", "sourceMap": true, "outDir": "public/js" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules/*" ] } package.json { "name": "draw-line-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "tsc -p tsconfig.json" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/gl-matrix": "^2.4.5", "@types/jquery": "^3.3.35", "@types/requirejs": "^2.1.31" } }
  13. Draw line. WebGL 1.0, TypeScript, glMatrix, jQuery, TypeScript Playground: https://plnkr.co/edit/maq1F4JpXXulm9R8?preview Source Code: draw-line-webgl10-ts.rar index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Line. WebGL 1.0, TypeScript</title> <script data-main="js/RequireConfig" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> </head> <body> <canvas id="renderCanvas" width="300" height="300"></canvas> </body> </html> Main.ts import * as $ from "jquery"; import { mat4 } from "gl-matrix"; $(() => { // Get WebGL context let canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; let gl = canvas.getContext("webgl"); let vShaderSource = [ "attribute vec3 aPosition;", "uniform mat4 uProjMatrix;", "void main()", "{", " gl_Position = uProjMatrix * vec4(aPosition, 1.0);", "}" ].join("\n"); let fShaderSource = [ "void main()", "{", " gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);", "}" ].join("\n"); let vShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vShader, vShaderSource); gl.compileShader(vShader); let vMessage = gl.getShaderInfoLog(vShader); if (vMessage.length > 0) console.log("Verex Shader Error: " + vMessage); let fShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fShader, fShaderSource); gl.compileShader(fShader); let fMessage = gl.getShaderInfoLog(fShader); if (fMessage.length > 0) console.log("Fragment Shader Error: " + fMessage); let program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); let progMessage = gl.getProgramInfoLog(program); if (progMessage.length > 0) console.log("Failed to link a program: " + progMessage); gl.useProgram(program); let vertexPositions = [ 0.0, 0.0, 0.0, 70, 70, 0.0 ]; let vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexPositions), gl.STATIC_DRAW); let aPositionLocation = gl.getAttribLocation(program, "aPosition"); if (aPositionLocation < 0) console.log ("Failed to get a aPosition location"); gl.vertexAttribPointer(aPositionLocation, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aPositionLocation); let aProjMatrixLocation = gl.getUniformLocation(program, "uProjMatrix"); if (!aProjMatrixLocation) console.log("Failed to get a uProjMatrix location"); let projMatrix = mat4.ortho(mat4.create(), -100, 100, -100, 100, 10, -10); gl.uniformMatrix4fv(aProjMatrixLocation, false, projMatrix); gl.clearColor(0.9, 0.9, 0.9, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.LINES, 0, 2); }); RequireConfig.ts requirejs.config({ baseUrl: "js", paths: { "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min", "gl-matrix": "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min" } }); requirejs(["Main"], () => { }); tsconfig.json { "compilerOptions": { "target": "ES5", "module": "AMD", "sourceMap": true, "outDir": "public/js" }, "include": [ "src/**/*.ts" ], "exclude": [ "node_modules/*" ] } package.json { "name": "draw-line-webgl10-ts", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "tsc -p tsconfig.json" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@types/gl-matrix": "^2.4.5", "@types/jquery": "^3.3.35", "@types/requirejs": "^2.1.31" } }
  14. I rewrote a simple example from the Matter.js Getting Started tutorial to TypeScript. You can run it on Playground. Source code and instruction how to build: https://github.com/8Observer8/getting-started-matterjs-ts