Search the Community

Showing results for tags 'WebGL'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 373 results

  1. I'm looking for ways to optimize a scene I created in the Playground. This scene is based on previous work from another thread, I just added some objects and logic to mimic a small game. It uses native CannonJS for the PFS-camera and movement of the monster models. I used the code and model from the instances demo. From line 16, you can turn on and off physics for the monsters, skeletal animations, the skybox, trees, shadows, procedural textures(grass), and whether or not the monsters should lookAt and follow the player. As well as specify the amount of trees + the range and amount of monsters. I'm only hitting around ~30 FPS with this example. Is a scene such as this too heavy for WebGL and browsers? The trees are instances, so unless I clone and merge them, I don't see what could be changed there. Maybe a smaller, compressed texture. The monster models all have skeletons and animations, so no instances or merging can be used here. Disabling physics seems to give some FPS boost, so maybe using a worker would do some good in this example. I'll give this a try, and see what effect it has on overall performance. Here's a minimized version, with most things stripped, and 50 monsters without animations.
  2. Hi guys, We developed a game last year with phaser 2.3.0 and webgl, it worked fine on computer browsers and mobile devices. But since the last update of chrome for android (v53.0.2785.97), the screen is flickering until it becomes totally black, without any error or warning. The issue is present on mobile only, it worked on chrome for android v52, but not v53. We tried to upgrade to phaser 2.6.2, same issue on chrome for android v53. If we use Phaser.CANVAS instead of webgl, it works fine, but we prefer using webgl for performances. Does anyone encounter the same problem? Thanks for your help. Joe K.
  3. Hyperactive Soccer

    Fast 5-a-side soccer game with 1 and 2 player modes. The game was influenced by International Soccer (C64) and RealSports Soccer (VCS 2600). Made with emscripten. Requires WebGL capable browser. Supported controls are keyboard (recommended) or gamepad. For two player mode use two gamepads (both playing at same keyboard is possible but cramped). Play it at Homepage (find my other games there, for each there is a html5 version):
  4. 100% Open-Source / Cross-Platform! (full project with source code and resources are downloadable on title screen) GAME IS RELEASED! Powered By JeZxLee's "1993 Ford(R) Mustang GT Cobra 5.0[TM]" 2-D video game engine - "Pony Power!"
  5. Welcome to the Pixi.js forum

    Hi everyone and welcome to the PIXI.js forum! First off, big thanks to @photonstorm for providing a place for people to talk Pixi, very kind of you sir! If you dont know what pixi.js is then let me give ya the low down: Pixi.js a fast, lightweight, open source 2D library that works across all devices. The Pixi renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of webGL. It's the fastest HTML5 renderer in town! The idea behind pixi.js is that it can be used as the rendering component in your game engine (or any other type of project!) rather than as a game engine itself. Questions / bug reports / amazing feature ideas, or anything at all Pixi, then this is the place to discuss it! I will also be posting updates here as the engine grows and evolves. Pixi.js can be found here along with lots of examples: To find out more about Pixi and read our beginners tutorial, check out our blog over on Goodboy
  6. 5 latest new maze for Perplexus Shadow Open (BabylonJS WebGL 3D maze game. Very fun, but player still have to manually manage arc camera with mouse.
  7. Some time ago, we launched what turned out to be a really popular browser game: TANX. It's an online tank battle game and it's designed to be all about instant mayhem and fun. But we always felt as though it wasn't pushing WebGL hard enough. So we've spent the last few months revamping it. Here's the result: It's now using the PBR (physically based rendering) support in PlayCanvas. The level, tanks and power ups have all been rebuilt from scratch. So, it's the same great gameplay but with fancy new graphics. Read more about it here. And if you want to play, head to: Please send us your feedback and suggestions. Want to help us out? We'd really appreciate a retweet: See you on the battlefield.
  8. I tried multitexture batching using Richard tutorial with hopes that the performance will be improved I made the test on my demo using phaser 2.8.2 (Demo is not updated with multi texture batching yet) Draw calls are a lot less now but I don't see any performance improvement. On some devices that I tested it is is also showing graphical glitches with several of the sprites. Canvas is still the faster render option on all the devices I try phaser on. Why is this? Maybe I'm doing something wrong? I tested on Ipad 3 and Nexus 6p. I made other tests on the past with slower android devices and canvas is always the best option.
  9. Filter on sprite batch

    Hi guys, I have a sprite batch containing 250+ 64x64 sprites from a single tileset / spritesheet. I need to apply a filter to the entire batch rather than per-sprite (way too slow!) I seem to only be able to add filters to the stage or single sprites. Anything else seems to do nothing. Is there any way I can do this? My original goal is to create an Overlay filter (Since the overlay blend mode doesn't work in WebGL) and apply it to all the sprites so they mix correctly with what is rendered underneath them. Thanks!
  10. Skate Hooligans

    SKATE HOOLIGANS Cowabunga! Little hooligans are on the way! Choose your hero and arrange an amazing disorder Collect coins, upgrade bonuses, buy cool skateboards, avoid dangerous obstacles and get scores as much as you can. LINK: Caution: It’s a WebGL-based game, please ensure that you have latest browser version. Game is WebGL based written with custom game engine. We've refused three.js because of Google Closure Complier And now all gzipped code is only 110Kb! Also we won't license it and the game is free for embedding on any website <iframe src="" name="Skate Hooligans" width="800" height="600" frameborder="0" scrolling="no" allowfullscreen="true"><p>Your browser does not support iframes.</p></iframe> We use CPMStar banners and video preroll for monetization. Please contact me at if you have any questions, suggestions, etc.
  11. Pixi v5: WebGL 1 or 2?

    Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  12. Hi, While I'm studying WebGL, I'm wondering how to use vertex shader with Pixi.js. Using fragment shaders is quite clear in my mind, but I'm still confused on how to send vertices coordinates to a vertex shader in Pixi.js. For instance, assuming we have such a vertex shader: // vertex shader attribute vec3 aVertexPosition; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); } and we have such vertices coordinates: const vertices = [ 0.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, -1.0, 0.0 ]; How could I draw this triangle (this is supposed to be a triangle) with this vertex shader and Pixi.js? Thanks!
  13. SimpleMaterial WEBGL WARNINGS

    Has anyone else tried using the SimpleMaterial library class ? I can use it and it works but for some reason the browser is reporting WEBGL warnings when using material. Is weird ... there are NO custom uniforms or samplers (outside what was defines in Babylon.simpleMaterial.ts) Note: All other material library classes work just fine (except some funny showing really large fur when using furMaterial) @Sebavan ... Got any clue about this one?
  14. When Canvas better WebGL

    Hi, On some Android devices canvas renderer works better and stable than Web GL Some games may crash in Web GL mode when in canvas mode all games stable. I want to ask is there any way how can we detect it ? Maybe some benchmarks exist ?
  15. Introduction/Presentation of Perplexus Shadow Open Game (How to play - suggestion - tips) Enjoy in playing
  16. Hello, everyone. I've been playing around a lot with Pixi.js trying to find the best ways for memory optimization. Using Pixi's loader, I load my images. Some images are very large and for the first time creating and adding them to the stage, my game freezes for a moment. After reading around, I realized that freeze is Pixi uploading the texture to the GPU. Now, my question is, would it be ideal to add in a method to pixi's loader that after the texture loads, it uploads it to the GPU? That would stop the brief freeze. I have already used Pixi's built in method to upload to the GPU and the freeze is gone. What would be the pros and cons of doing this for every texture loaded? Thank you!
  17. Pixi.js Showcase

    Made anything cool with pixi.js? Post it up here and share it with the world! Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it! To get the ball rolling, here are some pixi.js projects that exist out on the internets: games: experiments:
  18. BeFive Smart Ball

    This game is now open source: Title: BeFive Smart Ball Platforms: Browser with WebGL enabled. Game Link: Instruction Card: Description: This is a 3D video game version of an old game machines based on pinball. Press start button to dispense balls. Click on the white button and hold until the button turns to green. If you release the button when the green light is on, a ball is launched. Please try using SPACE BAR to shoot balls which is easier than using mouse button. When your balls fall in any of those holes, you are rewarded with a certain number of balls. Game tips: Exchange a number of balls at a time, then keep on shooting as fast as possible to increase your chance of winning balls. Keyboard shortcuts. SPACE BAR: shoot a ball. P: Payout. S: Start. F: Full screen. C: Reset camera position. T: toggle control panel. Additional notes: This game uses Oimo.js (for physics engine) and Three.js (3D rendering). This is my 4th html5 game to publish and is the first I made in 3d. Please feel free to leave feedbacks. Thank you in advance for checking the game out.
  19. I am trying to visualize cascading effect of natural hazard/disaster on interdependent critical infrastructures applying WebGL. Suppose I have two critical infrastructures- Water Distribution system and power generation system with geolocation (latitude/longitude). Due to flooding or Hurricane, some substations of power generation system may be damaged and as a consequence, some substations of water distribution system may stopped working due to the power outage/blackout. So, is it possible to create an interactive visualization displaying effect of flood/hurricane on the substations of power system and damage effect of power substations to the water substations using PixiJS? Please note that I need to visualize both systems on geographic map and cascading effect/failure of substations over time (maybe, using slider to show cascading failure per minute/hour in a 24 hours day). Attached is an image showing both intradependency in a critical infrastructure and interdependency between 5 critical infrastructures. Any related PixiJS example of web visualization with real/fake data will be highly appreciated. Thank you.
  20. First release of full game Perplexus Shadow Open Where everybody could buil its own perplexus and upload and than everybody could play it (on all web browsers with webgl) Also on phones android and iphones Added Physics "Physics step" where 10 or 15 works as fast as 50 on desktop with nvidia 960 ... you can continue playing on check points on which you go through ... or update I will release soon vidows how to build your own perplexus like lego ...and videos how to play each level from start to end.
  21. Clear Rect in Render Texture

    Hi! I'm using pixi 4.5.3 and can't find a way to clear out an rectangle from my transparent render texture. Seems that all blend modes have gl.ONE_MINUS_SRC_ALPHA in them Is there any hack around this? I have a large renderTexture with mostly static bitmap text and I want to update only parts that have changed for better performance. Is there any other way to update only part of an rendertexture while retaining transparency? Thanks!
  22. Hi, Please, attach achieves to a free source code of 2D Games in HTML5 (or examples). Or give a link where one could download the source code. Maybe you can give a source code of your games? But I want only with the rendering context of the canvas: "webgl" or "2d" (without using of frameworks like: babylon.js and so on) Free Source Code from books: 2012 - 05 - Core HTML5 Canvas Graphics, Animation, and Game Development - David Geary 2012 - 06 - WebGL Beginner's Guide - Diego Cantor, Brandon Jones 2012 - 11 - Foundation Game Design with HTML5 and JavaScript - Rex van der Spuy 2012 - 12 - Pro HTML5 Games - Aditya Ravi Shankar 2013 - 03 - The Web Game Developer's Cookbook - Evan Burchard 2013 - 07 - WebGL Programming Guide. Interactive 3D Graphics Programming with WebGL (OpenGL) - Kouichi Matsuda, Rodger Lea 2014 - 02 - Programming 3D Applications with HTML5 and WebGL - Tony Parisi 2014 - 03 - HTML5 Games Creating Fun with HTML5, CSS3 and WebGL - 2nd Edition - Jacob Seidelin 2014 - 03 - Interactive Computer Graphics - 7th Edition - Edward Angel, Dave Shreiner 2014 - 04 - WebGL Game Development - Sumeet Arora 2014 - 05 - WebGL HOTSHOT - Mitch Williams 2014 - 07 - HTML5 Game Development HOTSHOT - Makzan 2015 - 03 - Build an HTML5 Game. A Developer's Guide with CSS and JavaScript - Karl Bunyan 2015 - 05 - Advanced Game Design with HTML5 and JavaScript 2015 - 09 - Build your own 2D Game Engine - Kelvin Sung 2016 - 07 - Mastering HTML5 Game Development - Daniel Albu Multiplayer in Node.js + 2013 - 02 - Socket.IO Real-time Web Application Development - Rohit Rai 2015 - 05 - Multiplayer Game Development with HTML5 - Rodrigo Silveira
  23. Hey guys and girls, we are trying to get WebGL Compressed Textures to work with the texture trim/crop, but get strange effects: Problems in WebGL: DDS form a horizontally and vertically repeating pattern PVR form a horizontally repeating pattern Not compressed PNGs have the pixels touching the right and bottom border drag on With CanvasRenderer the PNG gets displayed exactly the way we expected it For our compressed texture conversion we: Take our base image, usually PNG with lots of empty transparent space, and trim off the empty parts to each side Save the trim x, y start position and the original width and height of the full texture Save the width and height of the trimmed image as crop Add a padding to make our texture a Power of Two size (or square for PVR) Any idea what we could try to fight those problems? See the attached example replicating the errors: compressed_texture_padding.7z
  24. Desktop - Online 3D Golf Game Simulation

    Hi all, this is the latest build of our online golf simulation. it runs on chrome and ff based on threejs/webgl game is in very early stage but you could play at least 3 different courses.