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. 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?
  2. 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!
  3. 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 ?
  4. 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?
  5. 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
  6. 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
  7. 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/
  8. [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
  9. 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
  10. 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.
  11. 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.
  12. 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?
  13. Instanced particles with dynamic refraction and heat distortion effects. More showcase videos can be found here.
  14. 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
  15. 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).
  16. 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.
  17. 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 https://phaser.io/tutorials/advanced-rendering-tutorial/part7 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...
  18. www.dogfightx.com 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!
  19. 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: https://github.com/playcanvas/playcanvas-ar Here's a little video: We tweeted about it here: https://twitter.com/playcanvas/status/913212518956384256 Please help us spread the word with a retweet if you like what you see! And let us know what you think!
  20. 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.
  21. Hello everyone! I'm making fluid simulation effect, i found a demo: http://jeeliz.com/demos/water/ 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!
  22. 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: http://imgur.com/a/5bQxM First one crisp (Canvas), second one pixelated (WebGL). The size of the texture is 1528x1528 and my screen resolution is 1920x1080.
  23. 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". http://webglreport.com/
  24. 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) { this.game.cache.getBitmapFont('Open').base.textureIndex = enabled.length + 1; } }
  25. 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. https://www.babylonjs-playground.com/#FZZV7K#23 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. https://www.babylonjs-playground.com/#FZZV7K#24