Search the Community

Showing results for tags 'rendering'.



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

  1. Can't render anything.

    So it's been a while since i played with pixi.js, there has been new version etc. I have used version 4.4.0 last time. Has lots of things changed? Anyhow, here is my jsfiddle: https://jsfiddle.net/hp4yn6kz/2/ As you can see, you cant see any text in the canvas. I also tried with texture atlas, but it renders nothing. Did i do something wrong? This worked before.
  2. Performance problems on switching tabs

    Hello guys, I have some big problems with the performance by switching tabs and the rendering progress. Maybe some of you can help me. (Sry for my english I give my best.) The game about I'm talking is to find under: https://dsbmg.de/slotdemo/app.html It's a slotmachine I build. The big problem is, that some users would like to play the game in more than one tab and some tabs are in background sometimes. Thats why I done the following. The backend is a php file which is doing the whole math and connecting to the database to save player-data for each bet and other things. Then there is a webworker as middleware which communicates with the backend and the frontend builded with phaser. If a user switch the tab, a javascript code recognize the visibiltychange event and then send the new state to the middleware. The middleware itself take this event and switch internal from visible to none-visible and sending a break to the frontend that kills the tweens if there are some. After that point the middleware just "taking" to the backend with a delay, like the slot would be rendering, but without doing anything. (in autoplay mode) After switching the tab back to the front from the background, the visibiltychange event sending a message from the frontend to the middleware which switches the intern state to visible and the next game starting rendering again. But at that point the tweens and updates are not running well. They make a lot of problems which I can't figure out. Do anyone of you have an idea what I can do better? Have you any idea what I can do to get a better performance? If the slot is just running in one tab (background or front) there seems to be no such problems, just if you open another tab with the game. Hope you can help me to build a better engine for the slot.
  3. Run without rendering (for online game)

    hi everyone I want to make a online game, so I need to run the game at the same time in local (browser) and on a server (nodejs), on the server, all the code must be executed, except the canvas rendering. any clue where to start? PD: the biggest problem I see is that the objects that leave the screen, by default are no longer evaluated.
  4. Shadow Blur Problem

    Hi. I'm trying to get softer shadows in my scene using a blur exponential shadow map. When enabled, the shadow generator seems to incorrectly affect one of my meshes. Here's my scene with a default shadow generator (blur disabled): Looking good. You can see the hard shadows from the tree, cast onto the clouds in the bottom left corner. And here's with blur enabled: The shadows look softer on the clouds, but the tree mesh got significantly darker. Here's my code: // light & shadows var lightPos = new BABYLON.Vector3(160, 80, 160); var dirLight = new BABYLON.DirectionalLight("dir01", lightPos.negate(), scene); dirLight.position = lightPos; var shadowGenerator = new BABYLON.ShadowGenerator(1024, dirLight); // shadowGenerator.useBlurExponentialShadowMap = true; // materials var treeMat = new BABYLON.StandardMaterial("treeMat", scene); var cloudMat = new BABYLON.StandardMaterial("cloudMat", scene); var atlasTex = new BABYLON.Texture("textures/Website_Atlas.jpg", scene); treeMat.diffuseTexture = atlasTex; cloudMat.diffuseTexture = atlasTex; // meshes var finishedLoadingMeshes = function (task) { task.loadedMeshes.forEach(function (mesh) { switch (task.name) { case 'treeMeshTask': mesh.material = treeMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); break; case 'cloudMeshTask': mesh.material = cloudMat; mesh.receiveShadows = true; shadowGenerator.getShadowMap().renderList.push(mesh); // create cloud rings... break; } }); }; var treeMeshTask = assetsManager.addMeshTask("treeMeshTask", "", "meshes/tree/", "Website_Tree.gltf"); treeMeshTask.onSuccess = finishedLoadingMeshes; var cloudMeshTask = assetsManager.addMeshTask("cloudMeshTask", "", "meshes/clouds/", "Website_Cloud.gltf"); cloudMeshTask.onSuccess = finishedLoadingMeshes; Has anyone had this problem before? I searched the forum and couldn't find any similar issues.
  5. Controlling rendering of sprites

    Hello everyone, I have a case where I have lots of sprites on screen and each sprite has a Phaser.Text attached to it. Right now, I'm rendering in this order : renderSprite -> renderText, renderNextSprite -> renderNextText, thus having to flush the context every time I draw the text since it's not using a common sprite atlas. What I'd like to do is : renderAllSprites -> renderAllTexts So my question is, is there a way to tell Phaser not render any of these objects, and in the render() function of my current state, call what to render manually ? I'm opened to other suggestions, but please bear in mind that I cannot switch to bitmap fonts due to the fact that I need to support many languages. Thanks.
  6. Hi, has anyone noticed that rendering is looking blured if game is left in background tab or computer is locked for some time ? or its just my computer? (chrome, safari on macbook) After refresh of the page its back to normal.
  7. Hello, when I make 3D models I usually make a texture atlas to reduce number of DrawCalls. Is that the case for PIXI? Do we need to make an atlas for PIXI or maybe PIXI renderer handles multiple graphics efficiently? If not is there a good tutorial out there?
  8. Just a quick question; how to not freeze the render loop when doing "heavy" operations? Example: In my game, I have a stage that is composed of squares. The player can move around the stage but so can the enemies. The enemies are using a pathfinding system that uses navigation mesh. This navigation mesh is created dynamically when the game runs. Player can destroy the tiles of the stage. The tile destruction triggers the recalculation of the navmesh. The recalculation itself is a pretty heavy operation that freezes the whole game for a second or so. What I'm pretty much asking is if there is an async functionality for heavy functions/operations that are triggered from the render loop. Or what is the best way to handle these situations?
  9. Issue with Text rendering

    Hi, I am new to Phaser and trying to develop a game that includes some light weighted animations so that the game always covers the whole screen available. To achieve this I am using a background image larger then the canvas size and scaling down the game components to fit into the screen, Initially i included some text inside these game components which was getting pixelated when scaling down the component by 50%, so I have decided to keep text elements out of the components and replacing them by lowering the font size. The issue seems resolved but when the game goes fullscreen and restored back to default size the text again is getting blurred. Anybody ever encountered any such issue? What could be the possible reason for this behavior. I am attaching the screenshot of the text in both the situation. Whenever the screen is resized, I destroy the current text element and redraw it using the new font-size. After restoring screen from fullscreen mode. Default screen on initial load.
  10. Hi, new to Phaser. I am having a little difficulty understanding the concepts of the Stage vs the World, which one controls what is rendered, and why they apparently don't match my Game dimensions. I am using Phaser 2.6.2. I create a Game with width 607 and height 1080 (16:9 portrait, would be pixel-perfect in fullscreen), and in my boot script I set scale mode to SHOW_ALL and set pageAlignHorizontally to true. In my first level, I set the game.stage.backgroundColor, and I create a group of buttons, and I set the buttonGroup.alignIn(this.game.world.bounds, Phaser.BOTTOM_CENTER). As expected, I see what appears to be the correctly sized rectangle, scaled down slightly to fit within my non-fullscreen browser window, with a row of buttons at the bottom. However, I noticed that there seems to be an "edge" in my game where rendering stops. I added a debug rectangle set to the bounds of my button group, and I didn't see it. I then set the y value to be bounds.y -100, to push it "up", and this is what I see: You can't see the pointer, but you can see the pointer debug location, the y value is 919, and the pointer is a the bottom edge of the visible part of the green debug rectangle (that should be the height of the buttons). And you can also see that rendering is getting cut off on the right, before the right edge of the Game (as seen by the background color). But yet - the buttons are still visible, and they are below the point where the rendering seems to be getting cut off? I then did some logging, and found out that the bounds of the World and the Stage do not match the dimensions of the Game (these are numbers for game.world.getBounds() and game.stage.getBounds()): world x: -156 world y: 0.5 world height: 75 world width: 920 stage x: -156 stage y: 0 stage height: 920 stage width: 920 Now, the 920 height of the Stage seems to match where the rendering is getting cut off at y = 920 in the screenshot. The World numbers make no sense to me at all, and I can't figure out what corresponds to the right side edge of the rendering. I was under the impression that without explicitly resizing the World, it would be the same dimensions as my Game? So my questions are: What is causing the rendering to cut off where it is? Does the World bounds define what gets rendered, or does the Stage bounds define what gets rendered? Why aren't my Stage and World dimensions the same as my Game, considering I did not explicitly size or resize either one? Why are the buttons still visible even though they appear below the line where rendering is getting cut off? If the Stage bounds do not match the dimensions of my Game, why did game.stage.backgroundColor appear to correctly color in the the background of what I expected the Game dimensions to be? Bonus question: The answer here: Says that you can put UI elements in the Stage.. should I be adding my buttons to the Stage? How exactly do you do that? I had added them by adding a group to the Game, then adding the Button objects to the group. Does that mean they live in the World? Or the Stage?
  11. Hey everyone, I have a very simple 2D "minigame" that looks like this (please don't mind the uglyness) : So very simple, only one sprite and a couple of shapes. But my computer (macbook pro) often starts heating up while running the task. So I ran a memory audit (around 700ko increase per minute, that are due to me storing a lot of stuff) and also ran a CPU profile with devtools. Here are the results of the CPU profile: I was wondering if those results seemed ok to you ? @Nockawa Or do you think I might be doing something wrong in the code? (too large to share) When I look at the engine.fps I am at around 60fps, so perfect on that side. The game will be used by around 300 people all over the US with all sort of computers, mine is a high end macbook pro of last year (with of course a shity gpu but still pretty common for macs): 2.2Ghz i7 - 16Gb ddr3 - Intel iris pro 1536 mb - Mac/OS sierra using Chrome Canari Thanks !
  12. Hi everyone. Developing for few month on babylon now, I'm currently facing an issue. I wish i could display edges of a mesh through an other one. For example, i'm a super hooman and wanna see meshes through a wall, just by their edges. I don't want to make a transparent wall by the way, this is not the purpose for multiple reasons. It appears to me that the edges rendering is done by the mesh (by its AbstractMesh inheritance) itself and block the way i want to simulate this behavior. I'm a little bit confused, even on my method and the way to do it, have you ever facing this behavior and how did you make it ? Thanks.
  13. PBR Environment Impact

    Hello, Just a tiny Playground to demo the impact of the environment texture on rabbit: http://www.babylonjs-playground.com/#1P98HI#59 The environment (HDRCubeTexture) and only the environment is swapped every 5 seconds. Please note that the first load may be time consuming to download. Hope that can help to better understand the impact in the pbr material (even on fully white rabbits bottom row). CU,
  14. I'm making a game that uses pixel art, I'm designing it so that the user can choose to display the game at various screen sizes while maintaining the correct aspect ratio, doubling the number of pixels, 1x, 2x, 3x etc. I've set the game to use crisp rendering: Phaser.Canvas.setImageRenderingCrisp(game.canvas); And set the game scale mode to SHOW_ALL to maintain the aspect ratio when resizing: game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; I've also set the PIXI scale mode: PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; (I tried setting Phaser.Canvas.setSmoothingEnabled(game.context, false); but it gave me an error, never mind) However the game still looks smoothed when resizing the window in Safari on macOS Sierra, I tested it in chrome and the pixels are crisp as expected. I tried adding these CSS rules to my internal stylesheet: image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Safari */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: optimize-contrast; image-rendering: pixelated; /* Awesome future-browsers */ -ms-interpolation-mode: nearest-neighbor; /* IE */ Again, to no avail. Does anyone know of a work-around for Safari? Thanks. This is for Phaser 2.6.1
  15. Rendering tiled map

    Hi there. I'm new to PIXI.js - started few days ago by reading whole step-by-step guide on the official github. Basically I tried to render my tiled map and got stuck. To specify my problem: I've got an image "tileset.png" that stores tiles (each 32x32 pixels, the whole image is 128x32 which probably doesn't matter). I've got an JSON file that stores information about each tile (coordinates where to take each tile from - x, y, width, height, and also some other properties). I've got a regular two-dimensional array that simulates the map. For example: var map = [ [2, 2, 2, 2, 2, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 0, 0, 0, 0, 2], [2, 2, 2, 2, 2, 2], ]; I'll skip the init and assignments. Now I consider the main problem to be my approach (which I also consider very convenient and easy) - in a double "for" loop I read the map array and I add each tile to the stage. The code for that looks something like this: var texture = loader.resources["tileset"].texture; var s; for rows for cols // I frame the texture to get the tile I'm interested in // for example air (x: 0, y: 0) or the ground (x: 64, y: 0) texture.frame = new PIXI.Rectangle( 64, 0, 32, 32 ); // create sprite out of the framed texture s = new PIXI.Sprite( texture ); // add the sprite to the stage stage.addChild( s ); // Anakin vs Luke texture.frame = new PIXI.Rectangle( 32, 0, 32, 32 ); Now the struggle begins under "Anakin vs Luke" comment. The line is there just for explanations. It basically affects EVERY sprite in the stage. The result is that EVERY tile in the stage has the same sprite as the last tile. I get that it's caused by the sprites having all the same reference to the texture (which then I change, by framing, and affect them all in result). I also get that it's most likely an invalid approach. Here come the questions: 1. Is this approach any near to any solution to render the map? I want the map to be rendered using ONLY one image with my array and my json file. 2. If not, can it be easily done without any other libraries?
  16. I have utility functions and lot of them are just drawing to game.add.graphics object. Some of them have rather complex behavior, like calculating some values to see if something should be drawn or not. The problem is these function can accept large number of different values so I should be testing them. An example function: drawShelve: function (dataObject) { var halfHeight = this.roundNumber((dataObject.frameHeight / 2), frnConst.BETTER_PRECISION), halfRearHeight = this.roundNumber((dataObject.rearHeight / 2), frnConst.BETTER_PRECISION), grObject = null, shelve = { graphicsObj: dataObject.graphicsObj, borderSize: constGr.DEFAULT_GRAPHICS_BORDER_SIZE, borderColor: dataObject.borderColor, borderAlpha: 1, areaColor: dataObject.areaColor, frontColor: dataObject.frontColor, thickness: dataObject.thickness, polygon: { pt1: {x: 0, y: 0}, cp1: {x: 0, y: 0}, pt2: {x: 0, y: 0}, pt3: {x: 0, y: 0}, cp2: {x: 0, y: 0}, pt4: {x: 0, y: 0}, pt5: {x: 0, y: 0} } }; // draw top corner shelves if (dataObject.shiftY >= this.roundNumber(dataObject.y + dataObject.halfCupboardDepth, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY < this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve = {/* some code */}; grObject = this.drawShelveWithArea(shelve); // draw rectangle instead of full shelve when exact half is hit with a Y coordinate } else if (dataObject.shiftY === this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS)) { grObject = /* draw rect code here */; // draw bottom corner shelves } else if (dataObject.shiftY > this.roundNumber(halfHeight + dataObject.y, frnConst.NUM_OF_FLOAT_DIGITS) && dataObject.shiftY <= this.roundNumber(dataObject.y + halfHeight + halfRearHeight, frnConst.NUM_OF_FLOAT_DIGITS)) { shelve.polygon = {/* some code here */}; grObject = this.drawShelveWithArea(shelve); } return grObject; } As you can see, there is if block and then two else-if blocks. All conditions are calculated and I must test if the shelve is drawn or not for different values, i.e not null. I set QUnit and added game object where can i draw with HEADLESS mode, but from the following picture I still see canvas added to my test page. How can i test without adding game object at all? Is it possible to utilize functions like: shelveWithArea.beginFill(dataObject.areaColor, 1); shelveWithArea.moveTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.bezierCurveTo(polygon.pt3.x, polygon.pt3.y, polygon.cp2.x, polygon.cp2.y, polygon.pt4.x, polygon.pt4.y); shelveWithArea.lineTo(polygon.pt5.x, polygon.pt5.y); shelveWithArea.lineTo(polygon.pt3.x, polygon.pt3.y); shelveWithArea.endFill(); Without a need of Phaser.Game object?
  17. Hey Everybody! I have a rigged and animated character that is rendering funny. Eyes, teeth, tongue,etc are all showing through the main mesh of the head. How can I fix this?
  18. Hello, I'm currently working with flat shaded meshes and point lights in my Babylon.JS scene and the light is reflecting in a not-flat-shaded way. Playground demo: http://babylonjs-playground.com/#BRSMM#0 My own screenshot: http://prnt.sc/bx9h3o My target is to have one "flat color" per face and no light beam reflections which fade over distance. Is my target even possible with point lights or do I have to use other lights like the hemispheric light? Thanks for every answer, Simon
  19. Ascii Art Rendering

    Hello, I am really proud to announce the most useless but still fun feature of BJS: an ASCII ART POST PROCESS. This is part of the procedural texture library. All the documentation is available here with its playground: http://doc.babylonjs.com/extensions/AsciiArtPostProcess And just beacuse we can, please find an example of using PBR Ascii Art: http://babylonjs-playground.com/#QJS2W#17 Hope you ll enjoy it.
  20. I'm making a game that need to run on web desktop and mobile devices. At first we were using rendering Auto but we noticed that it was slow on ios. It reached 30fps top on iphone 5. We noticed that auto seem to always choose webgl on ios. On android and desktop it worked perfect. Now we switched to rendering canvas and it works at 60fps on the iphone 5 but we noticed some big, sporadic, slowdowns on Android and desktop. What is the best approach for multiplatform games? Do I need to detect the os of the device? How is this done?
  21. Hello, Two new features have been added to the standard material (in the 2.5 in progress version): Color Grading (convert final color to a different one through a lookup table texture): http://www.babylonjs-playground.com/#17VHYI#2 (you can see the scene going from day to sunset by modifying the LUT texture intensity over time) Color Curves (famous curves used in image edition tools): http://www.babylonjs-playground.com/#17VHYI#3 (you can see the impact of Hue modification over time) For more info, they work as the PBR Material respective features: http://doc.babylonjs.com/overviews/Physically_Based_Rendering_Master#camera-controls-color-grading-and-color-curves
  22. Hi there, Im having some issues with performance when i render thousands of sprites. Currently having issues with loading around 20k sprites, but eventually plan on having more (maybe even up to 60k) around the map. I did some research and found this is a somewhat common issue but cannot get a clear and concise answer. I ran some chrome profiles on my game to see whats holding me back: here are my results. To be honest, I don't really understand what that information means other than 20k sprites is too much. (I have a fairly decent computer and its slightly choppy at 20k trees, at say 60k its very choppy) Also, when I say choppy, I mean like it looks choppy, my movement is still fine (to make the point that its not like the game loop thats lagging). Essentially I have 20k trees being placed around a very large map that's being rendered with a tileSprite. However, it's not the map size that is holding me back since the performance I get is very dependent on the number of tree sprites. The tree's have no physics enabled on them and are just rendered and placed in a group then never touched again. Here is a snippet from my create function and how i render the trees. for(var i = 0; i<20000; i++){ treeX = Math.round(Math.random()*(mapSize-1)); treeY = Math.round(Math.random()*(mapSize-1)); temp = position(treeX, treeY); createTree = game.add.sprite(temp[0],temp[1], 'tree2'); treeGroup.add(createTree); } The position function I called in the loop just gets the pixel location of the tree's based on a tile, as shown below: var position = function(col, row){ column = (33*col+1); rowFin = (33*row+1); return [column, rowFin]; }; Any ideas as to how i can beef up my performance? Any way I could not render the tree's until they are in view? (Kill then revive when seen?) Any tips are greatly appreciated! Side note (if its useful), right now all I have is the tileSprite background, 20k trees, and movable player sprite. Edit: Would creating a chunk system be a good idea? If so anyone have any idea where to start with the best way to make one?
  23. Yo! I've started developing a game and I've been learning a hell of a lot about WebGL for lighting and shadows, and I'm hoping to implement some sort of lighting pipeline, following a technique like this: http://ahamnett.blogspot.co.uk/2013/05/2d-shadows-shader.html This means I'll need to process textures in a fragment shader, and then process scene using the resulting bitmap in another shader. Just to test, I tried rendering a part of a game world to a render texture. This worked fine without any shaders (Phaser/PIXI filters) applied. The render texture is displayed using a Sprite on the right hand side, just so I could see the result. Cool. However, if I add filters to what I'm rendering, the perspective gets all messed up. For example, my lighting fragment shader: So instead of scratching my head over this, having done quite a bit of Googling the past couple of days, I thought I'd ask for help here. Is there a way to render to a render texture with shaders applied correctly? Is there a typical approach to setting up a pipeline like this? Essentially I'm looking to perform transformations as described in the above article so I can start casting some sweet shadows, but I can't quite see how yet. The perspective is fine if I apply shaders to the stage instead, but of course then I have no shader processing for the resulting render texture:
  24. Occlusion Culling

    Hello All, I am working in a pretty big, closed environment and was looking around for ways to optimize performance. I am using babylon 2.0 and saw a few things while looking around documentation which might help me such as LOD, SceneOptimizer, octrees and shadow maps. All of these optimization techniques are great, but it looks like babylon only does frustum culling (at least by default) because whenever an object is caught in the camera's field of view the frame rate drops considerably (from 50-60 to 5-15) even if the object is behind another object and can't be seen. If occlusion culling is not possible with babylon at the moment, could anyone throw other optimization techniques my way? Right now, I haven't really optimized the scene at all, but am not sure whether the things I mentioned above will be enough to give me at least 40 frames when looking in the direction of a lot of "hidden" objects since they will still be rendered. Any help would be greatly appreciated.
  25. Hello guys, I would like to make a debugger such one of these: -http://www.paulallenrenton.com/individual-projects/webgl-deferred-renderer -http://codeflow.org/entries/2012/aug/25/webgl-deferred-irradiance-volumes/#debugging I am trying to use multiple rendering target with this webgl extension => (https://www.khronos.org/registry/webgl/extensions/WEBGL_draw_buffers/), so when I am rendering my scene I would like in my fragment shader to write something like this: #extension GL_EXT_draw_buffers : require precision highp float; uniform sampler2D positionSampler; uniform sampler2D normalSampler; uniform sampler2D depthSampler; uniform sampler2D stuffSampler; varying vec2 vUV2; void main(void) { gl_FragData[0] = texture2D(positionSampler, vUV2); gl_FragData[1] = texture2D(normalSampler, vUV2); gl_FragData[2] = texture2D(depthSampler, vUV2); gl_FragData[3] = texture2D(stuffSampler, vUV2); } with each gl_FragData writing in a webgl texture associated. I didn't find a lots resources about it on the internet... I am working with babylon.js, any example or help would be great. Thanks !