8Observer8

Members
  • Content Count

    266
  • Joined

  • Last visited

Everything posted by 8Observer8

  1. 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.
  2. 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:
  3. 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.
  4. 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:
  5. 8Observer8

    Christmas Breakout (classic Breakout with an xmas theme)

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

    Best 3d models marketplace?

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

    Zombie Strike

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

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

    But why do you use WebGL for your game?
  9. 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
  10. 8Observer8

    Zombie Strike

    The link does not work.
  11. 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.
  12. 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); }); });
  13. 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/
  14. 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" ] }
  15. 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>
  16. 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
  17. 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.
  18. 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.
  19. 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
  20. 8Observer8

    How to make a multiplayer game

    That is a wrong link above. This is the right link: 1- Making Multiplayer HTML5 Game: Setup & Sending Files. NodeJs Tutorial Guide
  21. 8Observer8

    Hosting recommendations ?

    If you have Node.js Server your can use Heroku. It is free for 5 applications. Getting Started on Heroku with Node.js Heroku supports: Node.js Ruby Java PHP Python Go Scala Clojure
  22. 8Observer8

    How to make a multiplayer game

    How to Make HTML5 Games: Javascript Tutorial for Beginners
  23. 8Observer8

    Let's create WebGL examples for practice

    I know how to improve workflow, productive of coding and code quality of our web Applications and Games. We can write specifications by Jasmine framework. I wrote a simple example how to write specs for Kata from CodeWars in TypeScript. It may be usefull for JS-developers too. See my short description and project on GitHub: https://goo.gl/DsuLXY This is an example how to run Jasmine Unit Tests in TS on Playground: https://goo.gl/Jrk6Zk I will rewrite my Snake Game to 3D with Unit Tests. I will give you a link on GitHub. Happy Coding!
  24. 8Observer8

    Let's create WebGL examples for practice

    Playable 2D Snake Game with sounds Demo in Playground Language: TypeScript Tools: WebGL 1.0, RequireJS Source Code on GitHub Source Code in archive: snake2d-perspective-camera-sounds.zip