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

Found 409 results

  1. Hi, I have a sprite sheet with 9694 pixels width that I can NOT make it narrower because it has 74 frames with 131 pixels each. However it is blowing WebGL (see snapshot with the error attached)... How could I solve this issue?
  2. New Level

    https://gaming.youtube.com/watch?v=cGwsAGfm2MI
  3. Pixi v4 and webgl code effect

    Hi, I wold like to implements one effect that I found in codepen: this is the link of the effects: codepen My question is : Is there one way to implements it in pixi.js. I'm new with this framwork, i tried to search somethink on google but I don't found nothink. Thanks in advanced
  4. Verge3D for 3ds Max RELEASE!

    We are excited to announce that Verge3D, the complete, artist-friendly suite for creating interactive 3D web experiences, is now available for Autodesk 3ds Max users! Read the full article here!
  5. Added now

    https://gaming.youtube.com/watch?v=q28Z526xCYU
  6. From 3ds Max to Webgl

    We will soon release a new product called Verge3D for Autodesk 3ds Max. Support for both Blender and 3ds Max can significantly expand the audience of 3D Web. Both versions will be compatible with each other so that you can use assets from different packages in one application. Follow the news, the release is expected very soon! Video Teaser
  7. Watch out for gl.clear()!

    Hello, everyone! I just wanted to pass along some very important information that I just discovered regarding optimization that has been completely overlooked in optimization articles that I've read, and can have a huge impact on your apps! I have a game that pushes a pretty similar number of triangles and commands as the Sponza demo, but I wasn't enjoying anywhere near the same frame rate on slower systems. I fired up SpectorJS, cleaned up as much as I could in terms of draw calls and such, and wound up with a game that had fewer calls, fewer commands, and yet STILL ran a good deal slower than Sponza. However, there was one more metric that I had yet to take a close look at, and that was "clear()". I had 6 of them, while Sponza was using only 1. My game is a first-person-shooter that uses an additional camera to draw UI components, and on a different layer, so game geometry doesn't interfere with it. The player's hands and weapons are also drawn in a different rendering group for the same reason. It turns out, however, that for every new layer and group, Babylon kicks off a gl.clear() (which makes sense), and on systems with poor fill rates, this can absolutely wipe you out. In my case, the engine was clearing various buffers 6 times per frame, including multiple times per group/layer. Disabling Babylon's engine.prototype.clear() entirely made a world of difference in terms of FPS, though I do need at least 1 or 2 gl.clear() calls to accommodate my layering requirements. 6 is excessive and unnecessary, however, and I'm currently investigating ways to minimize that. Hopefully, I can do it all by simply modifying my code, but I suspect I might have to make some small engine modifications as well so I have greater control over when gl.clear() gets called, and just how many times. Edit: Just discovered scene.autoClear and scene.autoClearDepthAndStencil. Setting both to false takes care of... well... one of them!
  8. State of WebGL

    Two different WebGL implementations (chrome on the left, firefox on the right) working side by side on Linux x64. Note the subtle difference in colors.
  9. Progressive texture upload

    Hi, I am building a media installation (with Pixi.js v4) which requires to load my textures while the system is running (ideally with a constant 60fps). Therefore I am using createImageBitmap in a Webworker instance and then transfer the ImageBitmap via transferable object to the "main thread". In the main thread I am using this approach to pass the ImageBitmap to Pixi's Texture Loader which then ultimately uploads the texture to the GPU via gl.textImage2d. This all works fine as long as I am using small textures but now I wanna load bigger textures (1920x6000px) and the texture upload starts to take a decent amount of time (70ms). Now to my question: Has anybody created a progressive texture upload for pixi.js similar to this threejs library? If not, what would be the best approach to tackle this? Basically I have similar requirements as the poster in this thread (again unfortunately wrong framework Thanks, Andreas p.s.: I've started to look into pixi.js v5 ... seems like createImageBitmap is coming, yeah!!!
  10. WebGL resize stage blinking on iOS

    Hello, On my iOS devices (iPhone 4S, iPad Mini) when I resize the WebGL renderer, the elements of my stage are briefly scaled with the new size of the stage before being re-render with their original size. I just want to resize the drawing zone without changing the size of the children. The behaviour only occur on iOS with the WebGL renderer. I've made a jsFiddle to show the problem : http://jsfiddle.net/ntvLas1x/1/embedded/result/ . To reproduce, just click several times on the resize button from an iOS device and you will see the red square changing size. Thanks in advance, Louis
  11. Ohayo! Description: Currently in my free time i'm working on crysis-like 2D shooter game prototype about aliens invasion (events between Crysis 2 and Crysis 3) and specialy trained humans in new version of nanosuit (less power of Prophet suit but more soldiers gets it). It will be multiplayer arena shooter, but for now i'm focusing on singleplayer training mission gameplay, and after i complete with fixing prototype with players feedback i'll start working on the core of the game which is multiplayer arena part. Game works smoothly on Google Chrome (game optimisation for Firefox is on future todo list) and was designed for gamepads (PlayStation and Xbox), but you can play with mouse and keyboard too. Right now aliens are very strong so gameplay is focused on tactics and hide&seek more than just running around and shooting everything you see ;P It runs on mobile too but there is no virtual controls (it's on future todo list) so don't ask me for it now Right now i'm asking you guys to tell me how does controls feels and how much time you had to play to destroy all 4 alien bases (big green dots on minimap, you can kill them only with 2 grenade shots per base :P). Play Online (please, use Chrome): http://soulhunter.psichix.io Tech used: - Oxygen Core (my html5 game engine toolset based on best Unity and Godot concepts mixed with latest best html5 apis); - ES7 with babel transpiler; - Webpack for game bundling and live development; I don't know what i should say more about techs, because everything that is there, it is those 3 things If you're interrested in something more about tech, and i will be happy to tell everything you ask ------ BTW. I want to publish topic/article about game engine used here - which subforum should i use to place that kind of topic?
  12. Calling all HTML5 game developers! Here at Goodboy Digital we are looking for developers with a passion for HTML5 game making to come and join a team who really love what they do. If you want to kick out some of the best HTML5 games going with us and help work on cool R&D projects like Pixi.js (and some secret ones too!) then please apply and show us what you got Apply here: https://goodboydigital.workable.com/j/F0010A3928 Merry Christmas! http://work.goodboydigital.com/sleigher-3000/ Mat
  13. I've been working with PIXI filters recently. If I apply the filter to a sprite with alpha, I've noticed that somewhere along the line the alpha gets premultiplied. For example, I have a test texture with a pixel saved as [255, 255, 255, 128]. When I sample the texture, in a filter Instead of [1.0, 1.0, 1.0, 0.5] the result is [0.5, 0.5, 0.5, 0.5]. How can I turn off this premultiplying behaviour? I've tried 'transparent: false' and 'transparent: "notMultiplied" ' in the webGL renderer settings, but neither of those seemed to make any difference?
  14. Hi, I want to create a PIXI.Texture from a WebGL texture. Unfortunately, I have not managed this yet. My WebGL texture is created in the same WebGL renderer context as Pixi with "app.renderer.gl.createTexture()", this works. Then I tried to hang the texture on an existing PIXI.Texture: sprite.texture.baseTexture._glTextures[app.renderer.CONTEXT_UID].texture = myWebglTexture Even without the above line of code, my WebGL texture is inserted into the canvas element and always swaps the texture of the last sprite loaded in Pixi (Change-Texture.mp4). Unfortunately I cannot swap my WebGL Texture with a texture of a specific sprite :-( This approach has unfortunately not worked: Does anyone have an idea? Thank you for your support!
  15. Helo i have a list of element populated form user database and i want to make their 3d representation in webgl or babylon.js I want to changing the object color depending to the user data from list I mean to set color green for object were there id or name are present in this list and set red for those absent How can i make this please ?
  16. Habbo WebGL Game Engine

    This is strictly for educational purposes only Since Flash is pretty much being deprecated in most browsers so is Habbo. Since there's retro versions, most of Habbo's assets are available on the internet. I've been using Pixi for now to create a 2D loading screen, which I did successfully. Then it occurred to me that Pixi is mostly just a renderer, and doesn't support 3D the same way as Three or Babylon does. Problem is that, I found coding of 2D UI elements in both Three and Babylon really difficult compared to Pixi. In Habbo it's really minimal what is going to be 2.5D / 3D as only the rooms, avatars and furni are, the rest is basically 2D GUI. So this is how I've done it for now https://gist.github.com/marcus-sa/7993baa14e6301c762747142e55cb5cf Some questions: Is Habbo; 2D with projecting, 2.5D or 3D, and would it be enough to use Pixi only? If no: Would it be possible to extend Pixi with Three or Babylon when there's going to be rendered 2.5D /3D objects? If it's truly 2D with projecting, should I just use Phaser instead? What would be best to do?
  17. webgl debug by firefox

    Hi all, currently I'm read master RICH's tutorial for improve performance by batch texture. when I use the firefox dev tools canvas capture in the article https://phaser.io/tutorials/advanced-rendering-tutorial/part5 it works when I use canvas renderer, but when I change to webgl, it can not capture the analysis. FF shows error and break the app. TypeError: methodSignatureEnums is not a function-----------------call-watcher.js:168:34 I tried many version of FF and phaser. none of them can work. is there anyone tried this before and works. please give me a workable FF version, many thanks
  18. The Verge3D engine First Release!

    The first version of Verge3D is out! With Verge3D you can publish your 3D models on the Internet, create high-quality and smart 3D configurators, product presentations, e-learning applications and games. Use PBR-materials and the shader node editor to impress your audience with photoreal graphics. Design interactive scenarios with Puzzles, a next-gen visual programming tool. It is time to create interactive visuals for your online projects! Press release: https://www.soft8soft.com/verge3d-1-0-released/ #verge3d #3dweb #webgl #javascript #b3d #soft8soft #puzzles
  19. The best way to learn is to practice as much as possible. Share your examples here. What browsers WebGL is supported, you can see here: WebGL 1.0: https://caniuse.com/#feat=webgl WebGL 2.0: https://caniuse.com/#feat=webgl2 A brief description of what WebGL is, and references to the specifications: https://www.khronos.org/webgl/ Tutorials: WebGL 1.0 Fundamentals WebGL 2.0 Fundamentals This book is about WebGL 1.0: WebGL Programming Guide Source Code for the book: examples.zip Source Code for the book on JSFiddle: Chapter 02. Your First Step with WebGL ch02/HelloCanvas: https://jsfiddle.net/8Observer8/2gky294r/ ch02/HelloPoint1: https://jsfiddle.net/8Observer8/cc72u1u5/ ch02/HelloPoint2: https://jsfiddle.net/8Observer8/uxw657ud/ ch02/ClickedPoints: https://jsfiddle.net/8Observer8/xf4fnc0o/ ch02/ColoredPoints: https://jsfiddle.net/8Observer8/gkkmnpga/ Chapter 03. Drawing and Transforming Triangles ch03/MultiPoint: https://jsfiddle.net/8Observer8/cty1120m/ ch03/HelloTriangle: https://jsfiddle.net/8Observer8/wk4sksnw/ ch03/HelloQuad: https://jsfiddle.net/8Observer8/g4ctyk7w/ ch03/HelloQuad_FAN: https://jsfiddle.net/8Observer8/v119e8o6/ ch03/HelloTriangle_LINES: https://jsfiddle.net/8Observer8/wwrkaxcf/ ch03/HelloTriangle_LINE_STRIP: https://jsfiddle.net/8Observer8/3ggjz4rm/ ch03/HelloTriangle_LINE_LOOP: https://jsfiddle.net/8Observer8/7vcyquro/ ch03/TranslatedTriangle: https://jsfiddle.net/8Observer8/0dp4xvyt/ ch03/RotatedTriangle: https://jsfiddle.net/8Observer8/gh9s6szm/ ch03/RotatedTriangle_Matrix: https://jsfiddle.net/8Observer8/7ze7pgpu/ ch03/ScaledTriangle_Matrix: https://jsfiddle.net/8Observer8/6xzoe63s/ Chapter 04. More Transformations and Basic Animation ch04/RotatedTriangle_Matrix4: https://jsfiddle.net/8Observer8/t4y7783v/ ch04/RotatedTranslatedTriangle: https://jsfiddle.net/8Observer8/b5yfxojp/ ch04/TranslatedRotatedTriangle: https://jsfiddle.net/8Observer8/o8voebc9/ ch04/RotatingTriangle: https://jsfiddle.net/8Observer8/x9j5vdk7/ ch04/RotatingTranslatedTriangle: https://jsfiddle.net/8Observer8/rkrv0322/ ch04/RotatingTriangle_withButtons: https://jsfiddle.net/8Observer8/wzoLmdzd/ Chapter 05. Using Colors and Texture Images ch05/MultiAttributeSize: https://jsfiddle.net/8Observer8/dsfgezbj/ ch05/MultiAttributeSize_Interleaved: https://jsfiddle.net/8Observer8/bshwnden/ ch05/MultiAttributeColor: https://jsfiddle.net/8Observer8/bveykLdf/ ch05/ColoredTriangle: https://jsfiddle.net/8Observer8/mrkpms7d/ ch05/HelloTriangle_FragCoord: https://jsfiddle.net/8Observer8/ft33yo9s/ ch05/TexturedQuad: https://jsfiddle.net/8Observer8/o3vakb3h/ ch05/TexturedQuad_Repeat: https://jsfiddle.net/8Observer8/2s7q68cc/ ch05/TexturedQuad_Clamp_Mirror: https://jsfiddle.net/8Observer8/mqu0wwma/ ch05/MultiTexture: https://jsfiddle.net/8Observer8/ztew5u0p/ Chapter 07. Toward the 3D World ch07/LookAtTriangles: https://jsfiddle.net/8Observer8/6ab11xpg/ ch07/LookAtRotatedTriangles: https://jsfiddle.net/8Observer8/944dd57h/ ch07/LookAtRotatedTriangles_modelViewMatrix: https://jsfiddle.net/8Observer8/e5t6gj1w/ ch07/LookAtTrianglesWithKeys: https://jsfiddle.net/8Observer8/38ewegg2/ ch07/OrthoView: https://jsfiddle.net/8Observer8/zebt4u7t/ ch07/LookAtTrianglesWithKey_ViewVolume: https://jsfiddle.net/8Observer8/vLcejtm1/ ch07/OrthoView_halfSize: https://jsfiddle.net/8Observer8/uvcd9h4p/ ch07/OrthoView_halfWidth: https://jsfiddle.net/8Observer8/vepodfb8/ ch07/PerspectiveView: https://jsfiddle.net/8Observer8/640pv8qe/ ch07/PerspectiveView_mvp: https://jsfiddle.net/8Observer8/w8yh4Lmj/ ch07/PerspectiveView_mvpMatrix: https://jsfiddle.net/8Observer8/hhwnx145/ ch07/DepthBuffer: https://jsfiddle.net/8Observer8/hyumw026/ ch07/Zfighting: https://jsfiddle.net/8Observer8/foc0b45t/ ch07/HelloCube: https://jsfiddle.net/8Observer8/rkpn5tyw/ ch07/ColoredCube: https://jsfiddle.net/8Observer8/80x8cyom/ ch07/ColoredCube_singleColor: https://jsfiddle.net/8Observer8/pespackq/ Chapter 08. Lighting Objects ch08/LightedCube: https://jsfiddle.net/8Observer8/4jchxo84/ ch08/LightedCube_animation: https://jsfiddle.net/8Observer8/ekw3osj7/ ch08/LightedCube_ambient: https://jsfiddle.net/8Observer8/y6qwnfe1/ ch08/LightedTranslatedRotatedCube: https://jsfiddle.net/8Observer8/pa88ujjg/ ch08/PointLightedCube: https://jsfiddle.net/8Observer8/vuq118ue/ ch08/PointLightedCube_animation: https://jsfiddle.net/8Observer8/5bj39hb8/ ch08/PointLightedSphere: https://jsfiddle.net/8Observer8/edz9Lz8f/ ch08/PointLightedSphere_perFragment: https://jsfiddle.net/8Observer8/qzwyow4j/ ch08/PointLightedCube_perFragment: https://jsfiddle.net/8Observer8/8t1umamf/ ch08/LightedCube_perFragment: https://jsfiddle.net/8Observer8/471y2t84/ Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/ Chapter 10. Advanced Techniques ch10/RotateObject: https://jsfiddle.net/8Observer8/1f5hLmff/ ch10/PickObject: https://jsfiddle.net/8Observer8/owue624n/ ch10/PickFace: https://jsfiddle.net/8Observer8/edvw6z90/ ch10/HUD: https://jsfiddle.net/8Observer8/fLxxxs35/ ch10/3DoverWeb: https://jsfiddle.net/8Observer8/tbowcc16/ ch10/Fog: https://jsfiddle.net/8Observer8/6yf9L399/ ch10/Fog_w: https://jsfiddle.net/8Observer8/8aLvthc3/ ch10/RoundedPoints: https://jsfiddle.net/8Observer8/sjs5kmn4/ ch10/LookAtBlendedTriangles: https://jsfiddle.net/8Observer8/apoz294n/ ch10/BlendedCube: https://jsfiddle.net/8Observer8/xsrL2fs5/ ch10/ProgramObject: https://jsfiddle.net/8Observer8/jnd0j6w0/ ch10/FramebufferObject: https://jsfiddle.net/8Observer8/vaLq6d66/ ch10/Shadow: https://jsfiddle.net/8Observer8/jsnfwcae/ ch10/Shadow_highp: https://jsfiddle.net/8Observer8/brjzr00n/ ch10/Shadow_highp_sphere: https://jsfiddle.net/8Observer8/4fmyLy5f/ ch10/OBJViewer: https://jsfiddle.net/8Observer8/pws1x7uv/ ch10/RotatingTriangle_contextLost: https://jsfiddle.net/8Observer8/vs01s8Lz/ Gifts gifts/Particle: https://jsfiddle.net/8Observer8/Ltzt31vk/ gifts/Printf: https://jsfiddle.net/8Observer8/qsw7jtec/ gifts/SpecularCube: https://jsfiddle.net/8Observer8/z4xj9rbv/ gifts/TextTexture: https://jsfiddle.net/8Observer8/qt7q2kuf/ gifts/ThreeDUI: https://jsfiddle.net/8Observer8/zdw1f2st/ gifts/Wave: https://jsfiddle.net/8Observer8/eL9odthz/ gifts/WorldCoordinateSystem: https://jsfiddle.net/8Observer8/6utj3hnk/ appendix/CoordinateSystem: https://jsfiddle.net/8Observer8/dzz056jt/ Appendix appendix/CoordinateSystem_viewVolume: https://jsfiddle.net/8Observer8/apxLww1q/ appendix/LoadShaderFromFiles: https://jsfiddle.net/8Observer8/wdn9ubhj/
  20. [WEBGL] 3D Solitaire

    Wanted to show you a game i've just finished! Nothing unusual — just a classic klondike solitaire. Little bit too enthusiastic description from famobi catalog: Immerse yourself in this classic solitaire card game featuring stunning 3D graphics! Set in a mysterious ancient temple, your task is to move all cards onto the four foundation piles, sorted by suit and rank in ascending order from Ace to King. On the field, cards can only be sorted in descending order alternating colors. Choose between two card designs, a 1 and 3 card mode and the position of your deck for your convenience. Can you achieve a high score? Here's the link: https://play.famobi.com/3d-solitaire
  21. WebGL filter texture overlapping

    I use a custom filter in pixi.js for blur https://github.com/louisatome/pixi.js/tree/dev-atomeV4/src/filters/triangleblur 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
  22. 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: https://playcanv.as/b/Rhlm9CMz/ 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.
  23. 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.
  24. 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?