jahow Posted January 9, 2015 Share Posted January 9, 2015 Hi, First of all thank you for Babylon.JS, it is a wonderful library and a pleasure to code with it I am working on a game project and I need to display textures with a 'nearest neighbour' sampling mode (pixelated effect). Babylon.JS theoretically offers this possibility, but I could not manage to get it working. Here is a playground illustrating my modest struggle: http://www.babylonjs-playground.com/#1IKIXK#2 Left cube's texture is created with the NEAREST_SAMPLINGMODE parameter, while the right one uses TRILINEAR_SAMPLINGMODE. In my browser (Chrome v38), there is absolutely no visible difference. I have seen a couple of threads about this on the forum but nothing that provides a real solution. Hopefully this thread will be able to do that. Of course there is always the possibility to multiply the size of the texture using a nearest neighbour interpolation with an image manipulation software, but I'd prefer not as it adds steps in the workflow and prevents doing big texture atlases. Thank you very much in advance Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 9, 2015 Share Posted January 9, 2015 Hello and welcome, for some reasons, even if babylon.js asks for gl.NEAREST, the results is filtered on small texture Quote Link to comment Share on other sites More sharing options...
jahow Posted January 11, 2015 Author Share Posted January 11, 2015 That confirms what I saw in BJS source code. Which is all the more surprising... I also thought this may be due to the fact that since the same texture is used in both cases, BJS reuses the first instead of creating a new one, copying the sampling mode along the way. I did a new playground to check it and nothing changed :http://www.babylonjs-playground.com/#1IKIXK#3 Also tried with other browsers and still nothing. I guess I'll try to dig deeper in the webGL code, and I'll post here if I find the solution. Thanks Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 11, 2015 Share Posted January 11, 2015 I fixed the reuse but still the same issue with the filter jahow 1 Quote Link to comment Share on other sites More sharing options...
jahow Posted January 15, 2015 Author Share Posted January 15, 2015 It's me again. I could not find a fix, although I've looked everywhere and into every WebGL call with WebGL Inspector. I also compared BJS's source with a working example of a 'NEAREST' sampling mode, namely this one.My observations:- although the textures I use have a magnification filter set to gl.NEAREST (checked in the WebGL inspector), they will still appear blurred- BJS's custom shaders are not responsible either; using a ShaderMaterial with a basic shader still displays the texture blurred- I compared all the gl state flags with the ones in the working example, and I couldn't find any notable difference- using mip-maps or not doesn't change a thingIn the end I can't even tell if the problem lies in BabylonJS or WebGL. This is starting to drive me nuts. I desperately need this feature working Surely someone around here must have a small idea on what can be the problem? Also I could not find any project made with BabylonJS that uses the 'NEAREST' sampling mode. But there must be one somewhere, I mean there are new minecraft clones at least every week! (OK maybe not that much anymore) Sorry for the useless post, I just though I'd try my luck one last time here. Thanks! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 15, 2015 Share Posted January 15, 2015 Did you try with bigger textures? Quote Link to comment Share on other sites More sharing options...
jahow Posted January 16, 2015 Author Share Posted January 16, 2015 You mean scaled up textures in Photoshop ? I tried and the result looks nice, except there's always seams because the texture is still filtered. Example : Normal texture: Scaled up texture: What I'm aiming for: Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 16, 2015 Share Posted January 16, 2015 Crap! Quote Link to comment Share on other sites More sharing options...
Xeonzinc Posted January 17, 2015 Share Posted January 17, 2015 I think I've figured out this issue after quite a bit of digging through the BABYLON source code. Babylon draws image textures to a canvas to resize them before they are passed to the WebGL, but the canvas they are being drawn to has imageSmoothing enabled. Therefore it's this smoothed image which is getting passed to WebGL so it is actually performing its NEAREST_SAMPLINGMODE correctly (just on a pre-smoothed texture). So to fix this (as can be viewed here with a slightly hacked version of babylon): http://54.213.159.7/mongtest/test_samplebab.html The canvas context needs to following settings applied (every browser seems to use a different property):this._workingContext.imageSmoothingEnabled = false;this._workingContext.mozImageSmoothingEnabled = false;this._workingContext.oImageSmoothingEnabled = false;this._workingContext.webkitImageSmoothingEnabled = false;this._workingContext.msImageSmoothingEnabled=false; This seems to need to be done just before drawImage functions (or I just implemented it badly) I'll leave it to Deltakosh in his wisdom to implement the fix without causing any unintended consequences jahow 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 17, 2015 Share Posted January 17, 2015 Oh yes well done!!!! To avoid using the canvas you just have to use a power of two texture like (512x512 or 32x32) In the meantime I will configure the canvas to disable image smoothing when nearest filter is used jahow 1 Quote Link to comment Share on other sites More sharing options...
jahow Posted January 19, 2015 Author Share Posted January 19, 2015 Wow Xeonzinc, excellent find! But sadly, the problem persists with power of two (PoT) textures. The playground I made earlier still shows the issue, since the grass texture on the right is 1024x1024 pixels. Also the textures I use on my project all have PoT sizes. I'll keep looking, there must be an explanation. Soon I'll know BJS source by heart Thanks guys! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 19, 2015 Share Posted January 19, 2015 I fixed the issue. Now even PoT textures should be ok jahow 1 Quote Link to comment Share on other sites More sharing options...
jahow Posted January 21, 2015 Author Share Posted January 21, 2015 Hey DK, Thanks for taking the time to look into this issue. I hate to be a bringer of bad news but the rendering on the playground (which I believe uses the most up-to-date codebase) still behaves the same way: Reminder: left texture (link) is not PoT, right texture (link) is PoT. I feel like I'm boring everyone around here with this stuff... and I'd love to be able to help, but really, I couldn't find anything so far (still looking though). Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 21, 2015 Share Posted January 21, 2015 If the texture is PoT it should be transfered directly to WebGL so that's strange:( Quote Link to comment Share on other sites More sharing options...
jahow Posted January 23, 2015 Author Share Posted January 23, 2015 I found something. Not really an answer to why?, but a culprit: anisotropic filtering. The 'nearest neighbor' appearance works well when it's disabled ( texture1.anisotropicFilteringLevel = 1 )http://www.babylonjs-playground.com/#1IKIXK#5 As to why it gives this weird blurred render when activated... no idea. Also the render is the same for any filtering value, from 2 to 16. I guess I'll disable the filtering for now. Also I'll try to document the ability to disable it, if I have the time & find how to do it! For the record, I've attached the rendering I'm having now. Still have some work on seams & aliasing... ugh pixelated textures reduce texturing work but what a hassle to make it look nice! Wingnut 1 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 23, 2015 Share Posted January 23, 2015 Good news!! Happy that you manage to make it! Quote Link to comment Share on other sites More sharing options...
fenomas Posted February 25, 2015 Share Posted February 25, 2015 I've just noticed that this bug is platform specific. On mac, sampling mode works correctly regardless of anisotropic filtering (I tested chrome/safari/FF). It seems to be only on windows that sampling mode is ignored (I tried chrome/IE). So if BJS internals do anything differently for win/mac, that might be the source of the bug. It would be great if this could be fixed... minecraft-style scenery looks pretty terrible when there's no anisotropic filtering! Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted February 25, 2015 Share Posted February 25, 2015 BJS is the same everywhere Quote Link to comment Share on other sites More sharing options...
fenomas Posted February 26, 2015 Share Posted February 26, 2015 Hmm. Does BJS have an issues list where I can add info and track? Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted February 26, 2015 Share Posted February 26, 2015 We use the forum for that. Quote Link to comment Share on other sites More sharing options...
fenomas Posted February 28, 2015 Share Posted February 28, 2015 We use the forum for that. Egads! So the only way to find a list of open issues is to read every thread? Why not use an issues list (e.g. the one built into github)? It's a lot easier for people to contribute bug fixes if they know what bugs need fixing.. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 2, 2015 Share Posted March 2, 2015 This is fair BUT....Most of the times people find bugs which are just bad understanding or bugs on their side. But I'm open to improvements You can use the issue tracker of github Quote Link to comment Share on other sites More sharing options...
fenomas Posted March 3, 2015 Share Posted March 3, 2015 Sure, it's unavoidable that some bug reports are wrong. But forum threads often meander over several topics, so it's impossible to know if something is a bug without reading several whole threads. I imagine you keep your own bug/feature backlogs, but if we can't see them we can't help fix them! But I'm open to improvements You can use the issue tracker of github That would be ideal, but it's disabled (on the GH project settings page). Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted March 3, 2015 Share Posted March 3, 2015 Reopened Quote Link to comment Share on other sites More sharing options...
fenomas Posted March 4, 2015 Share Posted March 4, 2015 Thanks! Hopefully it's more useful than bother. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.