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.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 369 results

  1. 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.
  2. 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!
  3. 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: https://gemioli.com/hooligans/ 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="https://gemioli.com/hooligans/" 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 [email protected] if you have any questions, suggestions, etc.
  4. Simple question I think. For the next major release of Pixi, v5, which WebGL version will be implemented? Thanks!
  5. 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!
  6. 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?
  7. I'm building line chart using the pixi.js lineTo method. The problem is the lines are shrinking when a distance between points becomes smaller. For testing purpose, I'm trying to draw 200,000 points on that chart. Drawing function: var dataSet = ohlcStore[chartProperty.sym]; if (dataSet && dataSet.length > 0) { var plot = new PIXI.Graphics(); plot.setTransform(columnSize, (renderer.view.height - rowSize) + (Val_min * yScale), 1, -1 * yScale); plot.lineStyle(0.6, chartProperty.lineColor, 1); plot.moveTo(0, dataSet[0].close); for (i = 1; i < dataSet.length; i++) { try { plot.lineTo(i * xScale, dataSet[i].close); } catch (x) { console.error("Error - " + x); } } plot.endFill(); context.addChild(plot); } Result drawing is attached along with this. In this case, xScale is 0.006475032375161876 and Using the canvas render gives correct results. Trying to search for the problem, I've found that the Pixi.js may have an issue with non-integer values. Therefore I've rounded values to integer but the problem didn't solve. Please support to fix this problem.
  8. 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: https://tanx.io Please send us your feedback and suggestions. Want to help us out? We'd really appreciate a retweet: https://twitter.com/playcanvas/status/798871630323843072 See you on the battlefield.
  9. 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. 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.
  13. 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.
  14. 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 ... https://ajna4taiga.no-ip.org/PerplexusShadowOpen/PerplexusProd.html or update https://ajna4taiga.no-ip.org/PerplexusShadowOpen/Home.html I will release soon vidows how to build your own perplexus like lego ...and videos how to play each level from start to end.
  15. 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: http://www.goodboydigital.com/runpixierun/ http://www.theleisuresociety.co.uk/fightforeveryone/ http://flashvhtml.com/ experiments: http://gametest.mobi/pixi/morph/ http://gametest.mobi/pixi/balls/ http://www.goodboydigital.com/pixijs/bunnymark/
  16. 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!
  17. 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 https://github.com/corehtml5canvas/code 2012 - 06 - WebGL Beginner's Guide - Diego Cantor, Brandon Jones https://www.packtpub.com/code_download/9978 2012 - 11 - Foundation Game Design with HTML5 and JavaScript - Rex van der Spuy http://www.apress.com/9781430247166 2012 - 12 - Pro HTML5 Games - Aditya Ravi Shankar http://www.apress.com/9781430247104 2013 - 03 - The Web Game Developer's Cookbook - Evan Burchard https://github.com/EvanBurchard/jsarcade 2013 - 07 - WebGL Programming Guide. Interactive 3D Graphics Programming with WebGL (OpenGL) - Kouichi Matsuda, Rodger Lea https://sites.google.com/site/webglbook/ 2014 - 02 - Programming 3D Applications with HTML5 and WebGL - Tony Parisi http://shop.oreilly.com/product/0636920029205.do 2014 - 03 - HTML5 Games Creating Fun with HTML5, CSS3 and WebGL - 2nd Edition - Jacob Seidelin http://www.wiley.com/WileyCDA/WileyTitle/productCd-1118855388.html 2014 - 03 - Interactive Computer Graphics - 7th Edition - Edward Angel, Dave Shreiner https://github.com/esangel/WebGL 2014 - 04 - WebGL Game Development - Sumeet Arora https://www.packtpub.com/code_download/16881 2014 - 05 - WebGL HOTSHOT - Mitch Williams https://www.packtpub.com/code_download/15622 2014 - 07 - HTML5 Game Development HOTSHOT - Makzan https://www.packtpub.com/code_download/17286 2015 - 03 - Build an HTML5 Game. A Developer's Guide with CSS and JavaScript - Karl Bunyan http://buildanhtml5game.com/ https://www.nostarch.com/html5game 2015 - 05 - Advanced Game Design with HTML5 and JavaScript http://www.apress.com/9781430258001 2015 - 09 - Build your own 2D Game Engine - Kelvin Sung http://www.apress.com/9781484209530 2016 - 07 - Mastering HTML5 Game Development - Daniel Albu https://www.packtpub.com/code_download/26345 Multiplayer in Node.js + socket.io: 2013 - 02 - Socket.IO Real-time Web Application Development - Rohit Rai https://www.packtpub.com/code_download/11391 2015 - 05 - Multiplayer Game Development with HTML5 - Rodrigo Silveira https://www.packtpub.com/code_download/21527
  18. 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
  19. 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/
  20. 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); }
  21. 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?
  22. Hello everybody! I want to share with you the game I made this year for the #js13k jam, it's an stressing shoot 'em up where your objective is to survive much as possible. It's my first time using fragment shaders in a game and I must to say that is not easy to start with, but at the end the results are amazing! So if you want to play it you can find it in: http://js13kgames.com/entries/evil-glitch Also as a requirement for the gamejam all code is opensource (https://github.com/agar3s/devil-glitches), there you can find links with the references I used for the game and people that helped me with feedback and support. Thanks!
  23. 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.
  24. 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!
  25. 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