Search the Community

Showing results for tags 'webgl'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Found 397 results

  1. 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 itch.io: http://oliver-benedens.itch.io/hyperactive-soccer Homepage (find my other games there, for each there is a html5 version): http://www.beppigames.de
  2. 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.
  3. 100% Open-Source / Cross-Platform! (full project with source code and resources are downloadable on title screen) www.PacDudeHero.com GAME IS RELEASED! Powered By JeZxLee's "1993 Ford(R) Mustang GT Cobra 5.0[TM]" 2-D video game engine - "Pony Power!"
  4. I tried multitexture batching using Richard tutorial with hopes that the performance will be improved https://phaser.io/tutorials/advanced-rendering-tutorial/part4 I made the test on my demo using phaser 2.8.2 https://github.com/Tembac/ChimangoGamesDemo (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.
  5. 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!
  6. 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!
  7. 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?
  8. 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!
  9. 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 ?
  10. Introduction/Presentation of Perplexus Shadow Open Game (How to play - suggestion - tips) Enjoy in playing
  11. 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!
  12. 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.
  13. BeFive Smart Ball

    This game is now open source: https://github.com/BeFiveINFO/befive-smartball Title: BeFive Smart Ball Platforms: Browser with WebGL enabled. Game Link: http://play.befive.info/smartball/ Instruction Card: http://play.befive.info/smartball/#modal 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.
  14. 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!
  15. I am creating new AnimatedSprites on pointerdown event (and deleting them on next pointerdown event) over the course if application lifetime. At some point around 20 clicks, the app crashes with an error: Rats! webGl crashed. At that point no error is displayed in console. Crash happens on a mobile device, and would probably also happen on desktop, if someone perform plenty of clicks. Code that is repeatedly used is below. I also include live example at http://forwardingsolutions.club/. Can someone please point out what am I doing wrong? From other answers I deduced that you need to reset the loader and call destroy() on animated sprite. I call both of this methods, but there is still an issue. function createNewAnimatedSprite(resources,newLoader){ var tmpSprite = new PIXI.extras.AnimatedSprite(setupFrames(resources["nextSprite"].texture.baseTexture)); app.stage.addChild(tmpSprite); spritesArray.push(tmpSprite); setupNextSprites(tmpSprite); app.renderer.plugins.prepare.upload(tmpSprite, function(){ console.log("updoaded now"); canRunNext = true; newLoader.reset(); //console.log("kill"); delete tmpSprite; }); } function setupNextSprites(nextSprite){ nextSprite.x = app.renderer.width / 2; nextSprite.y = app.renderer.height / 2; nextSprite.anchor.set(0.5); nextSprite.loop = false; nextSprite.animationSpeed = 0.5; nextSprite.visible = false; nextSprite.onComplete = function (){ console.log("animation finished"); isAnimating = false; }; } function setupNextAnimation(){ var randomNumber = getRandomInt(0,3); switch (randomNumber) { case 0: nextColor = "red"; break; case 1: nextColor = "aqua"; break; case 2: nextColor = "green"; break; case 3: nextColor = "purple"; break; } } app.stage.on("pointerdown", function () { if (firstRun && !isAnimating) { firstRun = false; isAnimating = true; currentSprite.gotoAndPlay(0); currentSprite.gotoAndPlay(0); }else{ if (canRunNext && !isAnimating){ isAnimating=true; if (currentSprite.visible){ currentSprite.visible = false; currentSprite.destroy(true); } spritesArray[spritesArray.length-1].visible = true; spritesArray[spritesArray.length-1].gotoAndPlay(0); app.stage.removeChild(spritesArray[spritesArray.length-2]); spritesArray[spritesArray.length-2].destroy(true); canRunNext = false; setupNextSpritesAnimation(); } } }); function setupSpritesAnimation(){ //created currentSprite just once at the start of app spritesArray.push(currentSprite); }
  16. Morning! Just working on a bit of a debug console for my game, was just wondering if it was at all possible to switch the renderers at runtime? Have tried a couple of methods, but it just halts the code from executing I think (no error), but guessing it would be a nogo?
  17. 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. https://www.ogcopen.com/golf/game/
  18. This industrial robot arm is animated using a much improved IK solver that combines the speed of FABRIK and the accuracy of CCD. It uses fixed, twist-only, and hinge constraints to limit its six bones' range of movement.
  19. Wabbit Mountain Madness Hello! This is a project we got commissioned by Cartoon Network while I was working in Artik Games, it was released at the beggining of this year. It was developed on Haxe: Flambe, compiled for HTML5 with desktop and mobile compatibility. It weighs just 15mb and runs pretty smoothly even in older hardware, like Galaxy S3. More on the technical details below, here is the game link, a gameplay video and a screenie: Play it! http://www.boomeranghq.net/games/wabbit-mountain-madness Mirror: http://www.cute-games.com/game/7854/wabbit-mountain-madness.html Gameplay Video Sreenie The game was developed by a three-person team during one and a half months. I participated as programmer, togheter with a 2d artist and a game designer. On the technical side of things, I choosed the Haxe: Flambe engine because it was one of the only ones fitting the constraints we had in place: Compiles to HTML5 The game weighs less than 20mb Compatible with desktop and mobile inputs Performs well on mobile browsers Makes it possible to compile to native Android using Adobe Air (although finally this didn't happen) Being my first experience with Haxe, I felt really comfortable with the language and tools available. We worked most of the animations in Flash and used the import tool Flambe provides. The API also has a very useful Script class which makes tweening and sequencing a breeze, really painless. It's also possible to communicate to the browser from inside the game, which allowed me to develop an internal tool used for level-design, with a hacky combination of flambe, javascript and php. Anyway, I hope you enjoy the game and I'm open for questions! I'm currently freelancing so feel free to contact me if you are interested in hiring me for some work http://zamaroht.com/about
  20. Webgl camera in box2d

    Hello! I am new in Webgl programming, and I am having trubel with moving the camera. I try to create a maze game, and I use three.js and box2D.js. The problem is that the camera is looking from above into the mazze, while I am trying to make it part of the maze (I mean looking like you are trying to escape from the maze). Could anyone, please, help me? I haven't found any ideeas on the web....
  21. Hello visitor! I'm looking for skilled javascript developer to build small web game for 2 weeks with me. My main goal to get know more about pixi.js by doing valuable project for estimated time. What you will get at the end of development? You can share game with others, it will be your own portfolio; You can stay with me for next 2 weeks to monetize the game to get revenue from advertising. I will share 50% with you; If you not familiar with pixi.js, you will get experience by doing real project and you will spend only 2 weeks to get results; You will meet good guy (me :)), we can collaborate to do next projects which will give you money. Who am I? My name is Andy Tyurin. I'm working in banking sphere in a role of front-end team leader. I spend my free time by working with my own 2.5D game engine which is written on Dart. I'd like to build games, but I haven't got any real games to show, which can be described as a problem for me, but I did a lot of examples build on top of three.js, lwjgl (java). Except the fact, that I'm Dart enthysiast, I'd like to work with other languages such as javascript, node.js and java. Which tech stack I want to use by doing this game? Pixi.js as rendering engine to build 2D game; KOA framework to build REST, websocket server (node.js); React to make UI components. What about project, any other information? The game is called as "Space football". I will glad to tell you more, please contact first by skype: AndyTyurin Kind regards!
  22. Detecting Support for Multi-Texture

    I've implemented multi-texture support into my game and I'm running into an issue. On iPad 4 and up everything looks to work fine, but on iPad 3 and below the textures don't render properly. Is there anyway to reliable detect the iPad model or if the device supports multi-texturing?
  23. 3d plugin performance

    Hello, I need to add some 3d functionality to an existing project. That project is based on lastest PIXI build (so I can't use PIXI fork by ivan.popelyshev), and I decided to write a plugin that offers flat sprites in 3d space. On my PC (in Google Chrome) it works quite well, but when I'm testing it on Asus Zenfone 2 (also in Google Chrome) the FPS is very low, especially when my 3d objects are moving and rotating. The performance is bad even with quite a few objects (~25 visible objects and some invisible 3d containers). I added some optimizations, but it wouldn't help. Could you please tell me what can cause that performance issues? I attached plugin source code to the post. Thanks in advance for answer. P.S. Is there any new information about 3d support in PIXI itself (PIXI flip)? And is it possible to use another framework that supports 3d, along with existing project based on PIXI? plugin3d.zip
  24. Crash Pixijs in Cocoon

    Crash and close Cocoon app, when use PIXI TEXT witn WebGL Render, for Pixi version 4.3 or superior.