Search the Community
Showing results for tags 'aliasing'.
Found 6 results
-
Hi all. I am a very new user in Babylon (I started yesterday), and I already have a project running, but you can see some error in the .gltf model: https://alboenergy.com/ar/shampu-2.html My question: How can I eliminate the aliasing that appears in my model when it is loaded on phones and tablets? I will appreciate any help for this newbie. Thanks.
-
Hello, I'd like to know if there is a solution for eliminating the aliased output when using i.e. BABYLON.Camera.RIG_MODE_VR ? So far I understand the problem, it's the fact that the splitted output is done with a postprocess and therefore the postprocess for AA is lost??? Can the problem perhaps solved with another postprocess or other technique? Thanks in advance PS: I've found a playground where the aliasing proplem seems to be solved, but I can't figure out why ... oh I think the gridmaterial has its own AA-shader
-
Hey so I wanted to know how to decide a resolution to render to and then downscale the render; specifically get the user's screen width, *3 and then scale it down to /3 to get a subpixel effect, using 3 times more available pixels (also if probably causing artifacts). I don't even know if this method works so i would really know how to do this/a working method.
-
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 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!
-
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?
