8Observer8

Members
 View Profile  See their activity

  • Content Count

    384

  • 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

3777 profile views
  1. 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
  2. 8Observer8
    Read my instruction and build my example here: https://github.com/8Observer8/getting-started-with-pixijs-and-typescript
  3.    ncm123 reacted to a post in a topic: Phaser OR Unity For HTML5 Games
  4. 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
  5.    Hosh reacted to a post in a topic: I want to make a leader board
  6. 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>
  7. 8Observer8 started following Deployment Heroku, Phaser OR Unity For HTML5 Games, (re)learning mathematics and and 1 other
  8. 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
  9. 8Observer8
    This is a big playlist (243 lectures) Math for Gamedev
  10.    viveketic reacted to a post in a topic: How to change background color
  11. 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.
  12.    mazoku reacted to a post in a topic: (re)learning mathematics
  13.    8Observer8 reacted to a post in a topic: (re)learning mathematics
  14.    Hat and Beard reacted to a post in a topic: (re)learning mathematics
  15. 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
  16. 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" } }
  17. 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" } }
  18. 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
  19. 8Observer8
    PhysicsJS was archived.
  20.    quiphop reacted to a post in a topic: Colyseus - Minimalistic MMO Game Server
  21. 8Observer8
    Show a minimum example of your server and client scripts.
  22.    newBie here reacted to a post in a topic: collision in js + three.js
  23. 8Observer8

    Game loop advice

    8Observer8 replied to jake's topic in 2D

    This article is nice: http://buildnewgames.com/real-time-multiplayer/
  24. 8Observer8
    If you want to know about professional way you can read this book: Build your own 2D Game Engine and Create Great Web Games Using HTML5, JavaScript, and WebGL https://www.apress.com/gp/book/9781484209530