Search the Community
Showing results for tags 'filtering'.
-
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
-
Hi guys, trying to wrap my head around how shadows are working inside of BJS, and have a few questions. First off, I have this scene here: http://client.elementxcreative.com/public/bjs/fog_test/index.html You can move around the scene with the mouse/arrow keys. You can see the shadows looked a bit jacked up. Not only are the shadows low rez looking (despite having the resolution cranked up in BJS) but there is weird self shadowing on the objects themselves? Attached below is an image of the scene I'm exporting from Unity, what I'm expecting shadows to look closer to. It's just a single directional light. I'm manually fiddling with the filtering options on the BJS to try and get closer to this, but I'm not having much luck. Attached is code were using: var engine, scene; var mouseX,mouseY,dx,dz; var cameraTarget = new BABYLON.Vector3(0,0,0); var renderPlane, renderTarget; var DEBUG = true; var showstats = false; // Get the canvas element from our HTML above var canvas = document.querySelector("#render"); // var stats = document.querySelector("#stats"); // Load the BABYLON 3D engine engine = new BABYLON.Engine(canvas, true); engine.enableOfflineSupport = false; //this stops the manifest errors in the console BABYLON.SceneLoader.Load("assets/","fog_test.unity.babylon",engine,function(newScene){ scene = newScene; //CAMERA doCamera(newScene,canvas); // FOG doFog(newScene,canvas); // SHADOWS doShadows(newScene); // RENDER LOOP engine.runRenderLoop(function(){ newScene.render(); update(); }); }); function doShadows(newScene){ for (var i = 0; i < newScene.lights.length; i++){ var shadowGenerator = new BABYLON.ShadowGenerator(8192, newScene.lights[i]); newScene.meshes.forEach(function(mesh) { shadowGenerator.getShadowMap().renderList.push(mesh); shadowGenerator.bias = 0.0000001; //shadowGenerator.useVarianceShadowMap = true; shadowGenerator.usePoissonSampling = true; }); }; newScene.meshes.forEach(function(mesh) { mesh.receiveShadows = true; }); } function doCamera(newScene,canvas){ //new camera var newCamera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(0, 0, 0), newScene); newCamera.position = newScene.cameras[0].position; newCamera.rotation = newScene.cameras[0].rotation; newCamera.target = newScene.cameras[0].target; newCamera.fov = newScene.cameras[0].fov; newCamera.inertia = newScene.cameras[0].inertia; newCamera.mode = newScene.cameras[0].mode; newCamera.speed = 0.1; newCamera.attachControl(canvas,false); newScene.activeCamera = newCamera; //newScene.activeCamera.wheelPrecision = 90; //newScene.activeCamera.minZ = .01; // Define z key to rotate object z axis left newScene.actionManager = new BABYLON.ActionManager(newScene); newScene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { if (evt.sourceEvent.keyCode == 90) { console.log("z key pressed"); newScene.meshes.forEach(function(mesh) { //mesh.rotation = new BABYLON.Vector3(0, 0, 1); mesh.rotate(BABYLON.Axis.Z, 0.06, BABYLON.Space.Local) }); } })); // Define x key to rotate object z axis right newScene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnKeyDownTrigger, function (evt) { if (evt.sourceEvent.keyCode == 88) { console.log("x key pressed"); newScene.meshes.forEach(function(mesh) { mesh.rotate(BABYLON.Axis.Z, -0.06, BABYLON.Space.Local) }); } })); } function doFog(newScene,canvas){ newScene.meshes.forEach(function(mesh) { mesh.applyFog = true; // allow all meshes to be effected by fog }); // newScene.fogMode = 2; // newScene.fogColor = new BABYLON.Color3(1, 1, 0.85); // newScene.fogDensity = .0075; } function update(){ if (renderPlane){ //console.log('hey'); var v1 = new BABYLON.Vector3(1,0,0); var v2 = scene.cameras[1].target.subtract(scene.cameras[1].position); var vec = math.cross([v1.x,v1.y,v1.z],[v2.x,v2.y,v2.z]); var w = math.sqrt(v1.lengthSquared()*v2.lengthSquared()) + math.dot([v1.x,v1.y,v1.z],[v2.x,v2.y,v2.z]); var q = new BABYLON.Quaternion(vec[0], vec[1], vec[2], w); // Quaternion q; // vector a = crossproduct(v1, v2) // q.xyz = a; // q.w = sqrt((v1.Length ^ 2) * (v2.Length ^ 2)) + dotproduct(v1, v2) renderPlane.rotation = q.toEulerAngles(); //console.log(q.toEulerAngles()); } } Any thoughts on what we could do to improve the shadows? thanks!
-
I may have missed this somewhere else, but was unable to find it. Sorry if that is the case. I would like to be able to scale sprites with nearest neighbor filtering so they do not become blurry. I have modified phaser.js to do this myself since the beginning, but with the frequent updates, I wanted to see if there was a way already built in. Thanks.