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
    • Facebook Instant Games
    • Web Gaming Platform
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 471 results

  1. 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
  2. ---edit--- link no longer works, there is a download on the homepage now as I could not handle all browser issues ---edit--- controls: WASD for movement, mouse to target and shoot, E/right click releases a large rocket at the target Q/middle mouse button to place turrets aim of the game: don't die and kill those pesky spiders that are eating the hexas. if you die, or all the hexas are gone, you lose. the game was created for a small fun contest with the theme "mining and herds", this was my take on it. I'm still missing a start/end screen with a highscore list. not quite sure if I should try to use facebook api for this.
  3. 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:
  4. Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?
  5. Our game has mostly interior environments, we need reasonably correct reflection for the floor. We’ve already using box projected cubemaps (i.e. parallax envMap) but as each mesh can only has 1 envMap, we have to split the floor to multiple parts according to the local cubemap position, which is unreasonable for our use case. We need someone to implement the POI based cubemap blending method as described very detailed here: References: We’re really looking forward for a long-term collaboration. The budget is to be negotiated. Please send your quote to:
  6. Hi everyone, Famobi has been around for more than two years already, but somehow we haven’t actively taken part in this wonderful forum during this period. Many of you know us already and have published their wonderful games in our network. So first of all we want to say THANK YOU! Thank you for the fantastic games you create, thanks for making the HTML5 games industry the next big thing and thanks for just being really great people. After all you and your games are our daily business. And we have lots of fun with them. But even more important, our clients love them. We have spread your games to many portals, companies and brands and gave them the attention they deserve. Since your games have been the foundation of our company and its ongoing success, it’s only fair that we share with you our current state and upcoming projects. Of course we continue and steadily improve our daily work as a distributor of your games. We place them on all the biggest and most known portals around the globe. And new portals, big and small, are registering for an account at Famobi every day. Another focus right now is Facebook Instant Games. Shortly we will begin placing games in the Facebook messenger. So if you have amazing high score games with a quick and easy gameplay, let us know anytime. One can never have enough of those And in general, please continue to send us your games. There are no restrictions to genre or age. However we have a few requirements based on the needs of our clients and partners, that have proven to be crucial for maximum success. The games must be: Full responsive. Games must work in portrait and landscape mode. Without text. No texts means anyone will understand your game regardless of language. Small. Preferrably the file size should not exceed 3 MB. Smooth performance. Even on lower-end devices. We test our games from iPhone 4S and Samsung Galaxy S4 mini upwards. These are a few examples of games that fulfill these requirements and that we really love: Solitaire Classic Street Race Fury 4 in a Row Classic Bottle Flip Challenge Mandala Coloring Book Backgammon Classic Kids Color Book 2 But before our post reaches the dimensions of a novel, let’s come to an end for now. For all those who didn’t know or contact us yet, you can reach us anytime under these addresses: Game submission: Please use our submit form right here: General questions: Purchase of games: Thanks so much and let’s continue to shape the industry! Cheers from the whole team!
  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. Hi, I'd like to render points with PIXI.DRAW_MODES.POINTS and shaders. But I am not successful in displaying it. A minimul example is shown below.( const renderer = new PIXI.autoDetectRenderer(); = 'pixi-canvas'; document.body.appendChild(renderer.view); const geometry = new PIXI.Geometry() .addAttribute('aVertexPosition', [100, 100, // x, y 100, 200, // x, y 300, 200], // x, y 2) const vertexSrc = ` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); }`; const fragmentSrc = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); }`; const shader = PIXI.Shader.from(vertexSrc, fragmentSrc, null); const mesh = new PIXI.Mesh(geometry, shader); mesh.drawMode = PIXI.DRAW_MODES.POINTS; // doesn't work // mesh.drawMode = PIXI.DRAW_MODES.TRIANGLES; // works fine const stage = new PIXI.Container(); stage.addChild(mesh); renderer.render(stage); This code in any other PIXI.DRAW_MODE works fine. WebGL Points exsample( works too, so I think that the cause of this problem is not my environment. ----- pixi v5.2.0 Windows10 / Chrome79.0.3945.88 ----- I'd really appreciate it if you could give me your advice.
  9. I rewrote the Pong game to WebGL 1.0 and TypeScript from the tutorial: I use a free hosting and sometimes my Node.js/Express server sleeps. Wait 10 second to wake up the server. Run the release version in the browser: Download the source code: I will find the instruction in file how to build to the Release and Debug versions.
  10. Hello is anyone else experiencing this error on iOS 13: WebGL: INVALID_VALUE: uniform1iv: invalid texture unit Here's the full message: [Warning] Turning drawing buffer preservation for the WebGL canvas being captured (0.0.js, line 6472) [Error] WebGL: INVALID_VALUE: uniform1iv: invalid texture unit uniform1iv anonymous (Anonymous Script 1 (line 7)) syncUniforms (0.0.js:9832) syncUniformGroup (0.0.js:9818) anonymous (Anonymous Script 2 (line 22)) syncUniforms (0.0.js:9832) syncUniformGroup (0.0.js:9818) bind (0.0.js:9791) _render (5.5.js:5905) render (0.0.js:14434) render (0.0.js:14439) render (0.0.js:14439) render (0.0.js:14439) renderAdvanced (0.0.js:14492) render (0.0.js:14430) render (0.0.js:14439) render (0.0.js:11619) render (5.5.js:748) emit (0.0.js:17454) update (0.0.js:17993) (anonymous function) (0.0.js:17692)
  11. RELIC RUNWAY Are you ready for crazy adventures? Run as far as you can, collect coins, upgrade useful bonuses, pick up parts of ancient relics, unlock amazing characters, and compete with your friends to be the best relic runner! LINK: MAIN FEATURES: Beautiful and dangerous Inka Ruins 10 brave heroes to unlock A lot of ancient relics to discover on your way Play with your Facebook friends And it's free for embedding on your website <iframe src="" name="Relic Runway" width="640" height="480" frameborder="0" scrolling="no" allowfullscreen="true"></iframe> Please contact us at if you have any questions, suggestions, etc.
  12. Hey everyone. I am building a web based 3D interactive showcase of a spacecraft's journey. Most of the users are expected to be accessing it via low to mid range androids, so for performance I've decided upon three.js, rather than babylon.js. Correct me if I'm wrong in this. I've worked as a web developer and dabbled with game development with Phaser and Godot, but haven't built anything with three.js or babylon. So I wanted your advice on best practices and resources; things that my future self would wish I had known before starting. Here's some more information: The showcase will be separated into scenes, which can be navigated via a timeline, which also highlights the current date, if it's in range. In addition to the animated view of spacecraft's trajectory and position, it will have some cinematic scenes of the rocket exiting the atmosphere and a lander landing on the target body as well. I might even consider making the rover user controllable. Here's one inspiration from NatGeo. Any help is appreciated.
  13. Verge3D 2.14 for Blender and 3Ds Max is out bringing #AR, morph targets/shape keys, parametric models, exposure control settings, vignetting effect, texture-from-text feature, normal map generator and many new puzzles! 3Ds max release article Blender release article
  14. I am getting this error in my game only on IOS with Cordova on PIXI 5.1.1 with Webgl 2.0 (It works on Google Chrome perfectly fine). All my sprites and graphics get loaded to the screen but when the RAF should start it gets this error and doesn't continue. Maybe it's something my IOS with Cordova is lacking from the requirements for Webgl 2.0 Specifications? Thanks for any advice! 🙂
  15. Hello, First time posting on this forum. Issue: I am having issues using TweenMax when rendered in WebGL with PIXI. Nothing happens at all. If I change my code to use canvas it works just fine. Is anybody having similar or the same issues? Thanks for any help. let app = new PIXI.autoDetectRenderer(1920, 1080); document.body.appendChild(app.view); let stage = new PIXI.Container(); let testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0x18FF10); testGraphic.drawRect(0, 0, 500, 500); stage.addChild(testGraphic);, 1, {pixi: {alpha: 0}}); app.render(stage);
  16. Panopuzzle is a tile rotation puzzle game you can play from inside a 360 panorama and it is live here: panopuzzle If you own an Oculus Go or another VR headset - there is also a immersive VR version which runs via WebVR in the standard Go browser under It runs in pretty much any browser on a mobile phone, a tablet or desktop computer. You can move your device or drag the image with the mouse/finger to look around. Tap/click a tile will rotate it - your preferred rotation direction can be set in the settings (rotating gear in the left bottom) At the left top is the "Zoom out" option which changes the panorama to an outside view like that No matter if you are zoomed in or out you can (within limits) zoom in/out the normal way (mouse wheel, mouse middle click and move or two finger pinch) The tile counter at the top can be switched on or off depending on how difficult you want to make it for yourself. You can also switch on a hint system which will highlight one wrong tile at a time - sometimes quite useful to find those last two ones Click "Zoom in" at the left top to "go into" the panorama again. All settings are kept so to switch off the hints again in the next level you need to do that via the settings. Once all the tiles are correct you can progress to the next level by pressing "Next" on the right top - or replay the level on a different setting (easy, normal, hard) There are 22 levels of real world and fractal panoramas with tile numbers ranging from 44 tiles to 132 tiles Have fun and let me know what you think. Also if there are any problems, ideas, improvements.... send me an email to panopuzzle at
  17. Link It Up! is a casual, puzzle platforming game. In this game you need to link up the line to make your way through the level. Link It Up! features 30 levels that include interesting puzzles as well as cool platforming challenges. You can Play it here: Link It Up! is available for non-exclusive licensing so if you're interested in licensing it contact me via email:
  18. Hello dear devs! My name is Paul. I'm not sure if this the right place to do this but I'm gonna give it a shot. So... here it goes! With my friend Edoardo we're creating a Game Engine using three.js for rendering and a node.js + webpack environment for development. It's an electron app, works on Windows, Mac and Linux and is fully extendable through a friendly and simple API. The idea behind this is to create a free tool that is not limited to the functionalities we can add to the editor. Anyone should be able to create editor extensions and publish them either for free or for profit. So, in other words, this could be a Game Engine if you install Game Engine extensions to it, or maybe a WebGL App creator of other sorts if you choose other extensions. We're focusing on the Game side at least for now. As you can see we're in front of something that has no name (yet), no clear purpose and looks like an outlaw which doesn't belong anywhere. So, for now at least, we're referring to it as The Rogue Engine, in search of a purpose and the cure for bad breath 😷 Will it find a name? Will it find the Rogue's Den where it belongs? Is Paul drunk? We don't know. So yes, I'm here to help out the Rogue in its quest, looking for your feedback and ideas (or insults) of any kind. We'd like to build a tool we'd all want to use, and get a clue of which are the tools we should prioritise for the upcoming Alpha. Yes! There's an Alpha in the oven and we'd love for you to try it out. For now we're sharing content through my Twitter, at least until we can find The Rogue a name and some decent clothes to put it on Twitter, Facebook and all those places where the cool kids hang out these days. Thank you 🙏for enduring this horrible post to the end. You're a brave soldier, I hope you enjoy the video (preferably with a beer 🍺) Cheers!
  19. Congrats on v5 you awesome people! So a long time ago I was working on top down 2D game that had line of sight, but I ran into performance problems problems that sound like they can be more easily solved in v5. For some reason the forum is not letting me upload images so here are some links. Screenshots: Video of line of sight It's just one of those pseudo-roguelike line of sight effects where you can't see around corners (real-time though!). It involved lots of triangles, and the algos were based on Amit Patel's To achieve this effect I created a canvas separate from pixi with the shadow color filling the screen, and then I would mask/subtract the triangles generated by the visibility algo. I would then take that resulting image with a littl ebit of blur and put it in a container that was rendered underneath the wall sprites. That was the fast version, I also made another version based on pixi graphics that had other issue. Even the fast version had all sorts of garbage collection problems, probably because it was creating a texture the size of the whole screen every frame and then discarding it. It sounds like v5 can probably handle this feature without generating a texture every frame. Could someone suggest a way to accomplish this in v5? I don't have to put the shadows under the wall sprites if that is particularly hard.. they could be ontop of everything instead -- just whatever stands a chance of hitting 60 fps on a chromebook. TY TY
  20. Some time ago there was a bug report of a problem with rendering SVGs in iOS and MacOS, at least older ones. You can see it there:, but here is a short description as far as I've digged it. On some old Apple devices, iPad 4 / iOS 10 for me, if you load a number of SVGs, make sprites of them and place said sprites on stage, some of these sprites will 'leak' on one another. For example, if you load a green rectangle SVG and then blue circle SVG, sprite made from second one will contain expected circle drawn above unexpected rectangle. This is an old bug still found in v5.0.0 rc-3. Sadly, I found no solution to it. There are cases when it shows and cases when it doesn't, but no way to be sure. Since it is crusial for the project I'm working on, I've made a short test code to check if the current device have this bug, so I can switch to PNGs. In case anyone needs this, you can see it below. It is written for Pixi v5.0.0 rc-3 The idea is simple: I load assets - rectangle and circle - make sprites, place them on stage and render it (you have to do it to catch the bug). Then I extract circle into Uint8ClampedArray of pixels and get alpha value of some corner pixel. If there is no bug, it will be 0 (since there is no pixel there). If the bug is here, it will be 255 cause of rectangle rendered below the circle. Hope this will help someone until this bug gets fixed!
  21. Hello! The project is old so PIXI v.3.0.11 is used. For streaming - Flashphoner via WebRTC Steps to reproduce 1. Start video stream in html video element - stream.start(myDiv) which creates streamVideoElement in myDiv 2. When stream fires STREAM_PLAYING event the method PIXI.Texture.fromVideo(streamHtmlVideoElement) is called and the returned texture is set to the specific PIXI.Sprite instance. 3. Somewhere after this the Firefox browser receives error thrown by WebGl: Additional information The problem is happened very rerely Only Firefox Stream(video element) is not failed after the error In the PIXI source code that means: gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.source); What we tried tried to set video.crossOrigin = "anonymos" to the video element but no success. tried to dispose video like video.src = "" and etc according some advices related to the localStorage caching I know it's not directly linked by PIXI but still I need help. And the image of the current block when exception was thrown.
  22. Hyperactive Soccer 2 A fast-paced single player five-a-side retro soccer game. Whats new: Updated graphics, music and refined gameplay: Dribbling, more "responsive" to passes. A number of game parameter changes (e.g. playfield size, goal size, ball interception). This is fast. To help adjust, you can select from different speeds. Note the teams (nations) have different strengths. So you can adjust difficulty level by who you pick. In "quick" game mode you select brain and speed levels directly which apply to both teams, meaning, they always have the same strength. Direct link: (for fullscreen press button under render area) Homepage: Controls: Keyboard only. Menu navigation: Arrow keys Selection: Return Shoot: X Move: Arrow Keys Back to title page: B In "quick" you select brain and speed levels with left/right arrow keys. There are 8 moving directions. You move in the diagonals by pressing two keys: left/right and up/down. Made with the amazing emscripten.
  23. Hello there! I basically just want to present my personal game project and to collect some feedback and ideas. The game is currently in the alpha phase and there might be bugs and problems but I feel confident enough to show it to the public. The game is called "Connect 3D" and it is a free to play competitive online browser game, where you have to place four tokens in a row to score. However, the game is not as easy as it sounds because the rows can be build in the three dimensional space. This GIF shows a local game session but the game can also be played online. You just have to send the link of the session to one of your friends. Currently you need a second person to play since there is no AI or computer enemy to play against. It works on mobile and on desktops, but you should try it on a modern device and with an up to date browser. There are known problems in Firefox on Windows and on Android. Therefore I recommend to try it in Chrome, Safari or Edge. You can give it a try for free on the website Connect 3D. The feedback is very important for me and the development. I really appreciate your feedback! I plan on implementing much more stuff if the feedback is positive. Possible next features: Personal Profiles and Statistics Level/Rank System (implies profiles) Public Games (join random people and play against them) Tournaments/Competitive Play Computer Opponent (AI) Different Game Modes and many more... Tell me your opinion and what you would enjoy the most in an upcoming version? Thank you for your help! iflow
  24. Hyperactive Tennis You play tennis in single player mode for one set with tie break. There are four difficulty levels: ROOKIE for training, PRO, "NO. 1" and LEGEND for the real challenge. Game is keyboard only: Return: Menu select/Next screen Arrow keys: Menu navigation, running around B: Back to title screen "C": Hit ball X: Lob The levels ROOKIE, PRO, "NO. 1" and LEGEND are selected with left/right arrow keys. The key "C" hits the ball. The game automatically selects service, normal stroke, volley and smash. The key "X" plays a lob. Have fun. Requires some practice though. Made with emscripten. Direct link: Game homepage:
  25. We have atlas exported with Texture Packer. Run-time every texture is cropped by 1 pixel. This pixel is added to the opposite of the texture. Likewise