Tomm Huth

Members
  • Content count

    12
  • Joined

  • Last visited

  1. Orthographic camera and SSAO

    @Luaacro If you're asking me, it's a semi random number. If i reduce it to 500 (works with my scene) ssao effect does kick in. New question tho: Because SSAO introduces alot of aliasing, how would you combine this with a FXAA? Is that even possible? I've tried camera.attachPostProcess(new FxaaPostProcess("d", undefined, camera)) const ssao = new SSAORenderingPipeline('ssaopipeline', scene, 1, [camera]); I get You're trying to reuse a post process not defined as reusable.
  2. Orthographic camera and SSAO

    @Luaacro sorry about that! https://playground.babylonjs.com/#KAQYTH Uncomment the camera.mode line to see the difference
  3. How to create good friction ?

    @RaananW where has these two settings gone now? I can't find it reference anywhere?
  4. What's next?

    @brianzinn you're totally right. Also I don't understand how plugins could possibly work in a npm workflow, if they all require a global export. Building your own version is really only a viable solution as long as you don't use NPM. I did manage to get my own build working, but ended up having to strip out the extra Oimo plugin (500kb extra for no reason if using Cannonjs), and also fixing a problem with the export at the bottom: (function universalModuleDefinition(root, factory) { var f = factory(); if (root && root["BABYLON"]) { return; } var globalObject = (typeof global !== 'undefined') ? global : ((typeof window !== 'undefined') ? window : this); globalObject["BABYLON"] = f; if (typeof exports === 'object' && typeof module === 'object') module.exports = f; else if (typeof define === 'function' && define.amd) define(["BABYLON"], factory); else if (typeof exports === 'object') exports["BABYLON"] = f; else { root["BABYLON"] = f; } })(this, function () { return BABYLON; }); For some reason Heroku chokes on this, complaining it can't find BABYLON export ERROR in ./node_modules/babylonjs/dist/preview release/babylon.max.js Module not found: Error: Can't resolve 'BABYLON' in '/tmp/build_2f05ec3c0854af6ba703385c4238bd5e/tommhuth-stacky-4c50f39/node_modules/babylonjs/dist/preview release' This is not a problem for me locally, and Heroku could not find a reason why this should happen. The solution to get this to work was to simply: module.exports = BABYLON For a pretty simple game (http://stacky-game.herokuapp.com/) i saved around 3mb unminified by building my own version -- on the web EVERY KB counts. The downside is that I have to manually edit the generated file and commit generated code to my repo :/ There's lots of great stuff in Babylonjs, so there is no reason why it can't also be more in line with a modern JS workflow.
  5. Orthographic camera and SSAO

    @Luaacro i'll see if i can't cock something up
  6. What's next?

    @Wingnut That sounds promising, but how does that fit in with a Webpack workflow? It seems to me Babylonjs is still very much aimed at having it exposed as a global variable, but considering the potential complexity of a game, and where JS is headed in general, it makes very much sense for Babylon to jump on the ES6 modules bandwagon -- TypeScript added support for ES6 modules back in version 1.5. That could also make plugins easier: CannonJS is already playing along nicely with modules and Webpack. Using import/export syntax, Webpack can do tree shaking automagically, I believe, too. I realize of course that this would be a fairly substantial rewrite, but it does not need to be much more than a restructure of code, dropping the namespace, and exporting and importing the right stuff (famous last words). As BabylonJS is great stuff already, is would be cool to see it take it even one step further.
  7. What's next?

    I would love to see more modularization of the code, right now you end up with everything regardless of what you actually use. Not everyone needs VR, physics or audio etc. Their own NPM modules? Or someway to do proper tree shaking? Any reduction of the resulting bundle would be great (we’re on the web after all).
  8. Orthographic camera and SSAO

    Would be totally cool if that would be possible for orthographic as well! Maybe the documentation should mention this?
  9. I was playing around with SSAO, but could not get it to work with an orthographic camera. Is this not possible? Any workarounds? Any feedback appreciated
  10. Low fps even with very simple scene

    seems like this might have been a passing thing, everyhthing runs nicely now. @max123 aha! thanks
  11. Low fps even with very simple scene

    I'll see if I can duplicate it on the playground within the day.
  12. Hi, I'm a total noob at Babylonjs, but I'm playing around with remaking a previous raw Threejs project in Babylonjs. It's a physics based stacking game, and is really very simple (nothing but boxes), but I still seem to get really bad framerates. The thing is, when I made this in Threejs I had no such problems. I’m using 3.1.0-beta3 (which seems to be the default through NPM). I’ve tried switching to the previous release but that gives me the error TypeError: Cannot assign to read only property 'RGBA16F' of object '#<WebGL2RenderingContext>'. I’ve also played around with anti-aliasing and adaptToDeviceRatio on/off but that seems to make little difference. Also SceneOptimizerOptions causes a bug in CSG for me, where it errors out on finding position of null of my mesh. My project consists of 2 files, scene.js and app.js (sorry about the formatting, why isn't here a code tag) // app.js import { Vector3, Animation, MeshBuilder, CSG, PhysicsImpostor, StandardMaterial, Color3 } from "babylonjs" import { scene } from "./scene" const stack = [] function makeGround() { var ground = MeshBuilder.CreateBox('ground1', { height: 40, depth: 35, width: 35, subdivisions: 1 }, scene) ground.position.y = -22.5 ground.physicsImpostor = new PhysicsImpostor(ground, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(ground) } function makeBox() { let top = stack[stack.length - 1] var boundingBx = top.getBoundingInfo() let boundingBox = boundingBx.boundingBox var box = MeshBuilder.CreateBox('box1', { height: 5, depth: boundingBox.extendSize.z * 2, width: boundingBox.extendSize.x * 2, subdivisions: 1 }, scene) box.position = boundingBx.boundingBox.centerWorld.clone() box.position.y = (stack.length - 1) * 5 box.material = new StandardMaterial("xx", scene) box.material.diffuseColor = new Color3(Math.random(), Math.random(), Math.random()) box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function makeFirstBox() { var box = MeshBuilder.CreateBox('box1', { height: 5, depth: 35, width: 35, subdivisions: 1 }, scene) box.position.y = 0 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) stack.push(box) animateBox(box) } function animateBox(box) { let lefty = (stack.length - 1) % 2 == 0 let prop = lefty ? "x" : "z" var animation = new Animation("anm", "position." + prop, 60, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE) var keys = [ { frame: 0, value: 60 }, { frame: 200, value: -60 }, { frame: 400, value: 60 } ] animation.setKeys(keys) box.animations = [animation] box.animation = scene.beginAnimation(box, 0, 400, true) } function match() { let top = stack[stack.length - 1] top.animation.stop() top.position.y -= 5 let a = CSG.FromMesh(top) let b = CSG.FromMesh(stack[stack.length - 2]) let intersection = a.intersect(b) let subtraction = a.subtract(b) if (!intersection.polygons.length) { top.physicsImpostor.setMass(5) top.position.y += 5 console.log("Missed - game over!") } else { let box = intersection.toMesh("s", top.material, scene, false) let leftover = subtraction.toMesh("ss", top.material, scene, false) box.position.y += 5 box.physicsImpostor = new PhysicsImpostor(box, PhysicsImpostor.BoxImpostor, { mass: 0 }) leftover.position.y += 5 leftover.physicsImpostor = new PhysicsImpostor(leftover, PhysicsImpostor.BoxImpostor, { mass: 5 }) stack.splice(stack.length - 1, 1) stack.push(box) top.dispose() makeBox() } } document.addEventListener("click", () => { match() }) makeGround() makeFirstBox() // scene.js import { Engine, FreeCamera, Scene, CannonJSPlugin, HemisphericLight, Vector3, Camera, Color3, PointLight } from "babylonjs" const frustumSize = 100 const aspect = window.innerWidth / window.innerHeight const canvas = document.getElementById("app") const engine = new Engine(canvas, false, { deterministicLockstep: true, lockstepMaxSteps: 4 }, false) const scene = new Scene(engine) const camera = new FreeCamera("camera", new Vector3(-45, 45, -45), scene) const light = new HemisphericLight('light1', new Vector3(0, -1, 0), scene) const physEngine = new CannonJSPlugin(false) physEngine.setTimeStep(1/60) scene.enablePhysics(new Vector3(0, -9.81, 0), physEngine) scene.gravity = new Vector3(0, -9.81, 0) camera.mode = Camera.ORTHOGRAPHIC_CAMERA camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 camera.setTarget(Vector3.Zero()) light.groundColor = new Color3(0, .5, 0) light.diffuse = Color3.White() light.intensity = .4; engine.runRenderLoop(() => scene.render()) window.addEventListener('resize', () => { const aspect = window.innerWidth / window.innerHeight camera.orthoTop = frustumSize / 2 camera.orthoBottom = frustumSize / - 2 camera.orthoLeft = frustumSize * aspect / - 2 camera.orthoRight = frustumSize * aspect / 2 engine.resize() }) export { scene, camera }