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

  1. WebGL filter texture overlapping

    I use a custom filter in pixi.js for blur but when I use the filter on different objects, the texture of my biggest object overlaps on smaller objects. After some research, I think it's linked to the temporary RenderTarget I use to apply my filter on the 2 axis. First, it seems that the clear parameter of the function filterManager.getRenderTarget() is ignored when I read the source code of the method. But anyway, even if I manually call the clear() method of the RenderTarget at the end of the filter application the result is the same. But if my 3 objects have different dimensions (let say 100x100, 200x200 and 400x400) in order to get a different RenderTarget for each, the rendering is OK. Any idea ? Thanks
  2. Tiled Terrain Manager

    Hi! This is a template project, for PlayCanvas, that provides a complete tiled terrain system based on heightmaps and colormaps. Example build: Some of its features:- Terrain generator from tiled heightmaps. The heightmaps and colormaps (splatmaps) have to be provided in a specific named notion. Included there are two sample terrain projects created with WorldMachine.- Texture generator from tiled colormaps (splatmaps). The user can provide up to 4 textures and the shader mixes them on the terrain based on the channels of the colormap (R,G,B and Alpha).- All methods included in the generators are run using an async loop, which splits them between the frames. This allows generation, rendering and texturing to be done during run-time creating only momentary pauses.- A special collision mesh can be created if required with a smaller subdivision count than the rendered model for physics/collisions.- Normals are fixed and re-calculated on border, during generation to avoid seams between the tiles.- A visibility manager can be configured to render only a specific number of tiles based on the active camera. The tiles get visible/hidden based on the position of the camera on the terrain. If memory is managed correctly this allows for infinite terrain size/tiles.- A sample actor is provided in the project (named Aj), with a simple 3rd person controller.- A random terrain distribution script is provided based on distribution maps which can be painted per tile or per the complete terrain. PlayCanvas has a batching API in the works which will allow combining multiple meshes to reduce draw calls, this will increase greatly performance especially when objects like flora are distributed on the terrain. Current version is v1.15 and the project can be found here. A tutorial on how to use this can be studied here.
  3. Instanced Particles with Dynamic refraction mapping and scripted path, water surface reflection mapping with noise height map, sprite replication with scripted positioning, all composited into one animation scene. Enjoy the magic of manipulating water.
  4. Performance

    I updated my iPhone to the new ios and immediately, my game's performance dropped... It was still ok, but noticeably not as smooth (I have an iphone SE which I appreciate is an older/weaker spec device.) What I found was that forcing the game to run on canvas fixed the issue (it also removed the flickering that I'd noticed on my kid's Kindles which are definitely older and very much weaker in spec.) For this game, it's fine, there's nothing that needs to be WebGL, but moving forward (i.e. next game) I was interested in using filters &c. So, is there anything I should be looking at from a code point of view to avoid poorer performance on older devices? Or, have we got to the point where trying to support legacy devices is impossible? Any other thoughts?
  5. Instanced particles with dynamic refraction and heat distortion effects. More showcase videos can be found here.
  6. Hello all, I'm working on a personal project and im facing a small problem with canvas resizing, Here the initial state: You can see that the scene is well centered, the problem happens when i close a panel (the right or the left panels) then the canvas will be scaled and the scene will be like here: Please note that im creating the canvas like the following: <canvas id="renderCanvas" style="width:100%;height:100%;" touch-action="none"></canvas> Any help will be appreciated Thxs in advance guys Regards DarkLight
  7. Mask out parts of an image?

    I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should. Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion. Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions. The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. I think a WebGL solution such as using shaders might be used. Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ? Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this? PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).
  8. The Load of 3D configurators in Realtime?

    Hi, I am 3D graphic designer and programmer. I create 3D configurators in Realtime like on the following website. The configurators was developed on WebGL-basis and have the problem that the only load if the configurators are visible in the viewport. How I can solve the problem? Thanks.
  9. Found some unnecessary calculations

    Not sure if here's the best place for this but since it is not a bug etc I avoided opening an issue on github I stumbled upon some odd rotation code in phaser while reading From src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js and src/pixi/display/Sprite.js // Rotate matrix by 90 degrees // We use precalculated values for sine and cosine of rad(90) a = a0 * 6.123233995736766e-17 + -c0; b = b0 * 6.123233995736766e-17 + -d0; c = a0 + c0 * 6.123233995736766e-17; d = b0 + d0 * 6.123233995736766e-17; Ok. Some rotationcode with fancy precalculated values. But: the value given in e-notation is 0.00000000000000006123233995736766 and therefore effectively zero. Which makes sense since this was meant to be the precalculation of cos(rad(90)) - which equals exactly to zero. I suppose the literal resulted from a rounding error when someone typed Math.cos(Math.radians(90)) into a console So a better version would be: // Rotate matrix by 90 degrees a = -c0; b = -d0; c = a0; d = b0; Maybe someone sees this and is willing to fix it on the side...
  10. DogfightX Browser 3D HTML5 game, you can play PVP and teamfight. Play with or against your friends and overcome original quests involving fast paced combat, puzzle and skill. No installation required.Survive and shoot at others while trying to keep your own airplane alive!
  11. Make AR Browser Games with PlayCanvasAR

    I'm excited to announce the open-sourcing of PlayCanvasAR - a cool extension to PlayCanvas that enables browser-based AR games (and other apps), even on mobile: Here's a little video: We tweeted about it here: Please help us spread the word with a retweet if you like what you see! And let us know what you think!
  12. 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.
  13. 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!
  14. 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.
  15. 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".
  16. 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; } }
  17. 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.
  18. 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):
  19. 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.
  20. 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!"
  21. 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.
  22. 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!
  23. 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!
  24. 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?
  25. 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!