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 378 results

  1. Hello. I'm having an issue creating a skybox with compressed ktx textures. I've followed the instructions here, and have used the 2 bat scripts in conjunction with the PVRTexTool and ASTC tools. Note that I've used "D" for developer level quality. cd my-directory-with-images make-ktx-batch D ktx-batch That seems to have correctly generated the compressed files. I then create the default skybox. var available = ['-astc.ktx', '-dxt.ktx', '-pvrtc.ktx', '-etc2.ktx', '-etc1.ktx']; var formatUsed = engine.setTextureFormatToUse(available); console.log(formatUsed + ' textures'); ... var skyboxTexture = new BABYLON.CubeTexture("textures/skybox/gradient-sky/SkyGradient", scene); scene.createDefaultSkybox(skyboxTexture); Based on the console output, it seems to be attempting to load the texture format used "-dxt.ktx" at my root URL. I'm testing in Chrome on a MacBook, but am getting the same error in Firefox and Safari "Error: Error status: 404 - Unable to load -dxt.ktx". Any ideas? Thanks for taking the time to read.
  2. 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.
  3. Hello everyone! I'm making fluid simulation effect, i found a demo: and i want to clone it. The demo written by WebGL + shader but i don't know about WebGL, i'm worrying . I'm trying export to babylon.js and there are a few things i don't know how to do. I'm really stuck, i expect the babylon community to help me 1. var texture_water = GL.createTexture(); GL.bindTexture(GL.TEXTURE_2D, texture_water); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_S, GL.CLAMP_TO_EDGE); GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_WRAP_T, GL.CLAMP_TO_EDGE); GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, 512, 512, 0, GL.RGBA, GL.FLOAT, null); 2. var quad_vertex = [-1, -1, 1, -1, 1, 1, -1, 1]; var QUAD_VERTEX = GL.createBuffer(); GL.bindBuffer(GL.ARRAY_BUFFER, QUAD_VERTEX); GL.bufferData(GL.ARRAY_BUFFER, new Float32Array(quad_vertex), GL.STATIC_DRAW); var quad_faces = [0, 1, 2, 0, 2, 3]; var QUAD_FACES = GL.createBuffer(); GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, QUAD_FACES); GL.bufferData(GL.ELEMENT_ARRAY_BUFFER, new Uint16Array(quad_faces), GL.STATIC_DRAW); GL.vertexAttribPointer(SHP_VARS.rendering.position, 2, GL.FLOAT, false, 8, 0); GL.bindBuffer(GL.ARRAY_BUFFER, QUAD_VERTEX); GL.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, QUAD_FACES); GL.disableVertexAttribArray(SHP_VARS.rendering.position); 3. GL.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_SHORT, 0); GL.disableVertexAttribArray(SHP_VARS.water.position); GL.framebufferTexture2D(GL.FRAMEBUFFER, GL.COLOR_ATTACHMENT0, GL.TEXTURE_2D, texture_normals, 0); GL.useProgram(SHP_NORMALS); GL.enableVertexAttribArray(SHP_VARS.normals.position); GL.bindTexture(GL.TEXTURE_2D, texture_water); GL.drawElements(GL.TRIANGLES, 6, GL.UNSIGNED_SHORT, 0); GL.disableVertexAttribArray(SHP_VARS.normals.position); GL.bindFramebuffer(GL.FRAMEBUFFER, null); GL.flush(); With the above code how i export to babylon.js? Thanks so much!
  4. 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.
  5. 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:
  6. Hello, everyone. I am using an SVG file to render resolution independent textures. My device has a pixel ratio of 3, and so I set the PIXI resolution to 3 for a crisp display. My SVG texture becomes weirdly pixelated if the canvas it is rendered to is too large. This only happens when using the WebGL renderer. I have two comparison pictures: First one crisp (Canvas), second one pixelated (WebGL). The size of the texture is 1528x1528 and my screen resolution is 1920x1080.
  7. haha, I'm a old developer I started to make game from 2008 1. 2008-2017, flash game 2. 2015-2017, h5 game This game is used these engine and tools 1. H5 engine, LayaAir, this engine is very wonderful, I just used safari to play it, this game will have 55~60fps 2. UI IDE, FairyGUI, I can't find other UI EDIT IDE is good than it, I can use it do anything, and it's very very easy, it has timeline like flash, and it has more useful components. I can use it make UI on diffrient size of mobile, yeah, just use IDE, not source. 3. Spine, 3D animation tools LayaAir and FairyGUI are from chinese company, but it has english language. layaair -> fairyGUI -> I hope you like my game, I hope I can find a good h5 game job, i can teach your team how to use LayaAir and FairyGUI, my email is Sorry, my english is not good. ^-^ first photo prove that I used h5 engine to make this game
  8. [WIP] Devader (AntiMiner)

    ---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.
  9. webgl error

    I sometimes see the following error in console. Error: WebGL: texImage2D: Uploading ArrayBuffers with FLIP_Y or PREMULTIPLY_ALPHA is slow. (babylon.2.4.max.js:3847:17) What does this mean?
  10. You can always check if your browser (Desktop,Tablet,Phone) (Windows,Linux,Android,iOS) support WebGL and which one "WebGL 1" and/or "WebGL 2".
  11. Hi, I try to use Multitexture, but I get this log in IOS (Iphone 6) [Warning] setTexturePriority: Image "sAdivinhaAi" was given textureIndex=0 because there is no available texture space (0). (phaser-no-physics.min.js, line 3); [Warning] setTexturePriority: Image "sKeyboard" was given textureIndex=0 because there is no available texture space (-2048). (phaser-no-physics.min.js, line 3); And some textures get framed, taken from another BitmapFont Thansk, preload() { game.load.atlasJSONHash('sAdivinhaAi','sAdivinhaAi.png', 'sAdivinhaAi.json'); game.load.atlasJSONHash('sKeyboard', 'keyboard.png', 'keyboard.json'); // Fontss game.load.bitmapFont('Open', 'fonts/Open.png', 'fonts/Open.fnt'); } create() { var enabled = game.renderer.setTexturePriority(['sAdivinhaAi', 'sKeyboard']); if (enabled) {'Open').base.textureIndex = enabled.length + 1; } }
  12. 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!"
  13. 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):
  14. 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.
  15. 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
  16. 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.
  17. 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.
  18. 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.
  19. 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!
  20. 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!
  21. 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!
  22. 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?
  23. 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 ?
  24. Introduction/Presentation of Perplexus Shadow Open Game (How to play - suggestion - tips) Enjoy in playing