Search the Community

Hi there, I'm trying to run babylon on an Angular 5 application, but the quality of the rendering is very low (see image below). This is what I've done: Install babylon through npm: npm i --save babylonjs Then I had some warning during compiling process. It couldn't find cannon, earcut and oimo, so I added them through npm too. Then I created my scene (following the relevant code): init(canvasId: string, canvasWidth: number) { const canvas = <HTMLCanvasElement>document.getElementById(canvasId); this.engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true }); this.createScene(canvas); } createScene(canvas: HTMLCanvasElement): void { this.scene = new BABYLON.Scene(this.engine); this.scene.clearColor = new BABYLON.Color4(0.5, 0.5, 0.5, 1); this.camera = new BABYLON.ArcRotateCamera('Camera', Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), this.scene); this.camera.attachControl(canvas, true); // Create default pipeline and enable dof with Medium blur level this.renderingPipeline = new BABYLON.DefaultRenderingPipeline('default', true, this.scene, [this.scene.activeCamera]); this.renderingPipeline.samples = 4; this.renderingPipeline.fxaaEnabled = true; // Add lights to the scene const light1 = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(1, 1, 0), this.scene); const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(0, 1, -1), this.scene); const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', { diameter: 2 }, this.scene); this.animate(); } private animate(): void { // run the render loop this.engine.runRenderLoop(() => { this.scene.render(); }); // the canvas/window resize event handler window.addEventListener('resize', () => { this.engine.resize(); }); } Everything runs without error, but the render quality is very bad. How is this possible? Are there any specific steps to do when working with Angular? Unfortunately same code works fine in PG, so I did not create one as the problem seems to be related to angular.

Hi all, I know this issue maybe repeated and seems to be very common but I searched first and did not find anything concrete. I am doing some test and playing around with pixijs. I created an stage 320x180 and I am rendering an sprite of 27x27 in a autodetected renderer (WEBGL always is selected) I am in a macos retina resolution (devicepixerate 4) the problem is I can not achieve having the sprite pixelated even setting antialias false in the renderer. I tested the same without pixijs but native canvas 2d context using drawImage and I could get what I wanted using some hacks like after every drawImage set context.imagesmoothingenabled to false and I have CSS file to canvas image-rendering: pixelated. With those I am having exactly what I want, but of course I would like to obtain the same using pixijs and WEBGL. Is it possible? Disable at all antialias in a WEBGL context? How we can deal with this to render pixel arts properly? example using native canvas 2d context drawImage example using PixiJS webgl renderer Cheers.

I'm working on a game that switches through various states for the menu, main game and game-over screens. for the most part I'm happy for antialiasing to be used on my sprites and particularly my text, as forcing a crisp pixelated render on the whole game can lead to some of the text & sprites looking a little janky. I'm instantiating my game pretty simply: `MY.game = new Phaser.Game(800, 600, Phaser.AUTO, 'game');` I'm not setting any scale modes or special rendering prior to playing the game. In the Game Over state I'm loading a small pixel image I created, and adding some bitmapText to the top of the screen. I'm scaling the pixel image up by a factor of 6, and the bitmap text is set at 32px. On both of these, I set `smoothed = false`, because I wanted both the text and the sprite to appear pixel-perfect, and because I use FF by default (which uses WebGL by default), it will usually smooth out sprites unless explicitly told otherwise. It looks like this: var gameOverText = this.game.add.bitmapText(0, 0, 'FFF', 'GAME OVER', 32); gameOverText.anchor.setTo(0.5); gameOverText.x = Math.floor(this.game.width / 2); gameOverText.smoothed = false; var skull = this.game.add.sprite(0, 0, 'atlas-sprite', 'skull'); skull.scale.setTo(6); skull.anchor.setTo(0.5); skull.x = Math.floor(this.game.width / 2); skull.y = Math.floor(this.game.height / 2); skull.smoothed = false; Here's where it gets weird: if I jump straight from my BootState (which is always loaded before everything else) to my GameOver state, it works perfectly - text and sprite look nice and crisp. However, if I actually go through the game (so, go from BootState to GameState to GameOver state), it doesn't work at all - text is blurry and the sprite looks awful. I've managed to narrow it down to the point at which I start adding sprites: // this.levelData is a previously-loaded JSON map this.parallax = this.add.group(); this.levelData.parallax.clips.forEach(function(element) { var parallax = this.parallax.create(element.x, element.y, 'atlas-sprite', element.name); }, this); (it's worth noting that these loops create sprites way outside of the camera's viewport, as the game is scrolling) If I add `this.state.start('GameOverState')` and return out of the function prior to this loop, my text & sprite in the GameOver state remain perfectly pixelated; if I move `this.state.start('GameOverState')` to after that first loop (or at any point after this), it's as if all of the smoothing arguments are ignored. I've tried a LOT of different methods to try to fix this, but nothing is working. I figured it might be something to do with the world bounds, or the camera position, or the game antialiasing, but nothing seems to work. Any ideas on why this might be happening and how to get around it?

Hi All, As we know that with WebGL1.0, MSAA won't work if we do any post processing stuff. We must use FXAA instead. However FXAA can lead to jaggy edges, In WebGL 2.0, multisample render buffer is supported. So my question is whether it is supported now in Babylon? If not do we have plan to support it in the near future? Thanks

I have been messing around trying to get Anti-aliasing working for a few days now. I was using a very large image, over 2000px wide and had scaled it to about 200px. It was constantly aliased no matter what I tried. By chance I changed the scale and brought it up to .5 and immediately things started looking better. Is this normal?

Hello all! I'm currently playing around with pixi.js and i have used to these things with normal canvas. I think this might have been asked many times, but how do i disable that image anti-aliasing from pixi.js? In normal canvas i could use context.imageSmoothingEnabled= false, but i think that this doesn't help here? - I have tried to set canvas css to image-rendering: pixelated; - i tried PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST; but it doesn't help. - I also used antialising: disabled at the autoDetectRender -function. Anybody have any idea how to make it work? Or can you even disable it?

The Example. Hello every body. I have a Canvas with red background. On it I have rows of boxes, which go exactly after each other. Each box begins exactly where previous box ends, and they all have same skew. So there should not be any gap between edges, but as you can see in the example there are gaps. Does anybody knows why is this happening, and how to get rid of it. console.clear(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var world = { centerY: canvas.height / 2, centerX: canvas.width / 2 } var rowCount = 14; var box = { width: 20, height: 20, skew: 10 } function drawBox(x, y, id) { ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + box.width, y); ctx.lineTo(x + box.width + box.skew, y - 20); ctx.lineTo(x + box.skew, y - box.height); ctx.lineTo(x, y); ctx.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) } #canvas { background-color: red; width: 800px; height: 600px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html>

Hi to everybody, i'm testing phaser (v2.6.2) writing some simple codes, during the last one i've noticed a strange behaviour, check the jsfiddle: https://jsfiddle.net/7863Lx90/2/ Only initializing with Phaser.WEBGL or AUTO if you move with the arrows the sprite to the left (or top) border the sprite become smoothed, why this happens? Thank you very much for your help. Update 1: if someone needs more info please ask, thank you. Best regards

Hi guys, I'm making a pixel-art game so I don't want anti-aliasing on. Here's my code for toggling fullscreen when F11 is pressed: private toggleFS(): boolean { if (this.game_.scale.isFullScreen) { this.game_.scale.stopFullScreen(); this.game_.stage.smoothed = false; } else { this.game_.scale.fullScreenScaleMode = Phaser.ScaleManager.EXACT_FIT; this.game_.scale.startFullScreen(false); this.game_.stage.smoothed = false; } return true; } The fullscreen functionality works perfectly, except when I escape from fullscreen it sometimes turns on anti-aliasing. this.game_.stage.smoothed = false; doesn't seem to do anything at this point in the code. Does anyone have any suggestions? Thanks

We recently moved to Pixi.js v3 and we discovered that all the render textures were being rendered without anti-aliasing. All other Sprites and BitmapText object were just fine, and did look like they still had anti-aliasing. Has Pixi v3 explicitly disabled anti-aliasing for RenderTextures? Or is this a bug? See My JSFiddle Test Case Note: the Red Text is the RenderTexture.

Hi there, I didn't want to hassle Temechon personally with this so i thought i'd ask in general: I have some aliasing on my GUIText objects, is there a way around this?

In the game creation it is possible, by the 7th parameter, to choose to use antialiasing or not, but is there a way to control the level of it? In my game, disabling it ensures 60fps at all times, but having it on puts me down to about 40fps. It definitely looks a lot nicer, but it also seem to be very expensive, on my system at least. Considering the major difference from on/off I suspect antialiasing is at more than 2x, but I am unable to confirm this. What I am looking for is somewhere in between, where it still looks alright and the performance difference is not as major as now. Where do I control this stuff? Also, questions that has to do with rendering stuff, should I rather ask them in the PIXI forum from now on? That is good to know.