8Observer8

Members
 View Profile  See their activity

  • Content Count

    387

  • Joined

  • Last visited

  • Days Won

    1

8Observer8 last won the day on March 12 2019

8Observer8 had the most liked content!

Community Reputation

54 Excellent

See reputation activity

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.    8Observer8 reacted to a post in a topic: Phaser 3 Examples in TypeScript
  2.    8Observer8 reacted to a post in a topic: camera clipping planes
  3.    8Observer8 reacted to a post in a topic: camera clipping planes
  4. 8Observer8
    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.
  5. 8Observer8 started following Javascript/Typescript Physics Engines, Which is the best framework for 3D/FPS games with good mobile support?, Phaser OR Unity For HTML5 Games and and 1 other
  6. 8Observer8
    Could you give me a link where can I download the source code of this example?
  7. 8Observer8
    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
  8. 8Observer8
    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
  9. 8Observer8
    Read my instruction and build my example here: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript
  10.    ncm123 reacted to a post in a topic: Phaser OR Unity For HTML5 Games
  11. 8Observer8
    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
  12.    Hosh reacted to a post in a topic: I want to make a leader board
  13. 8Observer8
    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>
  14. 8Observer8
    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
  15. 8Observer8
    This is a big playlist (243 lectures) Math for Gamedev
  16.    viveketic reacted to a post in a topic: How to change background color
  17. 8Observer8
    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.
  18.    mazoku reacted to a post in a topic: (re)learning mathematics
  19.    8Observer8 reacted to a post in a topic: (re)learning mathematics
  20.    Hat and Beard reacted to a post in a topic: (re)learning mathematics
  21. 8Observer8
    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
  22. 8Observer8
    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" } }
  23. 8Observer8
    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" } }
  24. 8Observer8
    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
  25. 8Observer8
    PhysicsJS was archived.