brianzinn

Members
  • Content count

    511
  • Joined

  • Last visited

  • Days Won

    3

Everything posted by brianzinn

  1. brianzinn

    Redux, a global scene and scene recreation

    To answer your question, all of your scene state needs to be in the reducer and you need a way to restore/hydrate a scene from that state. I maintain the whole scene in the reducer, so I can even do/undo. I have a 3D level builder that maintains dual state - in Redux and also in the BabylonJS scene. That is not ideal as they can get out of sync with bugs, but since I need to be able to save state then go backwards maintaining the state only outside of the reducer did not make sense for my scenario and I did not want the reducer to need access to objects in my scene, so my objects generate state to be able to restore themselves as well. Sort of follows the memento design pattern. Even though my BabylonJS game that uses Redux is a turn-based game - the fact that physics is involved meant with this design a reliance on two-way communication. That's why I needed a redux middleware to intercept redux events in my BabylonJS scene. I like to think of it more as an Event Sourced system where the state of changes can be restored into a scene. Like hydrating a series of events in CQRS view model.
  2. brianzinn

    GearVR and Occulus Go

    I would consider both of those real VR devices, even a Cardboard; I have a GearVR, too. If you build something that works on those devices, my experience is that it will only work better on full headsets. What I have found is that the GearVR even on a Samsung S8, is much lower resolution and power than a full headset, so I tend to need to rethink and improve my design. It is a paradigm shift from traditional Web development. When you drop into VR you lose all the HTML and Full Screen GUI, so everything needs to be in the scene itself.
  3. brianzinn

    GearVR and Occulus Go

    My interpretation of Gaze is that it's really only needed for the Google Cardboard (although can be useful for other devices). The idea is that by looking for an extended period of time (gazing) at something that you want an action to occur (ie: staring at a button -> click button). The Google Cardboard does have a physical button, but the fallback VR experience does not AFAIK have a pointer down handler on that part of the screen, so there's no built-in way for the cardboard to interact. There is a lot of new gaze code in the VR Experience Helper, so I need to revisit it to give you a proper answer. Best thing is to make a scene and try in a VR device - most of the mechanics will become much clearer. Cheers.
  4. brianzinn

    Using the GearVR controllers

    Just my interpretation, but I would say that Cardboard is not webVR. To me WebVR (and WebXR) are standards. When you connect a VR Device supporting the standard that extra information is available in supported browsers. When you have a full headset the browser + graphics card redirect the scene to the headset, but otherwise BabylonJS does the best it can, which is to split the screen and post process the distortion for a realistic effect. Once you are in a VR scene, you have a start position and facing direction. The direction you point the controller is used for navigation and interaction. The scene itself is the same as a regular scene without VR. Somebody else will need to chime in on all the cameras. All good questions - it is overwhelming to get started!
  5. brianzinn

    GearVR and Occulus Go

    Is there something specific that the WebVR Experience Helper does not solve (https://doc.babylonjs.com/how_to/webvr_helper)? If you enable that then it will target those (and other WebVR) devices. The code is included in BabylonJS without any extensions, but if you want the controller meshes packaged for offline that requires extra configuration, if that's what you mean by packaging.
  6. brianzinn

    Using the GearVR controllers

    If you dig a bit into the VR Experience Helper, you will notice that it does require a pointer down event (click on button) to enable WebVR. It's not enough to be using a VR device (with the Experience Helper) that you will automatically get the VR immersive experience, so that is maybe one difference for the toolkit that you need to add. I may be wrong, but I think that is required for the fallback mechanism on device orientation for full screen (ie: Google Cardboard) and perhaps just good netiquette for connected WebVR devices? The identifier of the WebVR device itself is used by BabylonJS to create device specific experiences. So, once you add the VR Experience Helper then it works for all supported devices and browsers ie: for Gear VR you can use Oculus or Samsung browsers (https://webvr.info/).
  7. brianzinn

    GUI 2d shapes

    I deleted this part: System.register([], function (exports_1, context_1) { "use strict"; var ButtonRing; var __moduleName = context_1 && context_1.id; return { setters: [], execute: function () { left your class in the middle. then deleted this part: exports_1("ButtonRing", ButtonRing); } }; }); I would suspect that you need to change the width to force the draw to enter the if (processMeasure(...)): https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/control.ts#L917 You will probably want to dig through the inherited methods a bit, if you want to work with the controls with more understanding. You could probably update the if statement with your own processMeasure method that calls the super method and also checks arcStart and arcEnd? Changing those new properties should force a redraw!
  8. brianzinn

    GUI 2d shapes

    Works after deleting a bit of unneeded code, must be something else in your calling code in your application. I think you need to update your code to have arcEnd change the amount of red. https://www.babylonjs-playground.com/#SCJ6SZ#3
  9. brianzinn

    GUI 2d shapes

    I think what WingNut is saying is that if you are calling on your instance "buttonRing.value = " (which is the property setter) in your render loop that it will mark the control as dirty and force a redraw. If you copy the javascript that is generated in your project into a PG then we can definitely be more helpful! Might require a tweak to what class is being extended, as the original code you started with.
  10. brianzinn

    GUI 2d shapes

    If you import ButtonRing just do new ButtonRing() - assuming you have something like: import { ButtonRing } from './ButtonRing'; Remove the module declaration "module BABYLON.GUI". Note that you are not using "export default class", so you need the squiggly braces in your named import. Looks close what you have there.
  11. brianzinn

    Updating Uniforms Doesn't Update Mesh

    Did you try this.material.markDirty() or this.material.markAsDirty( BABYLON.Material.TextureDirtyFlag)?
  12. brianzinn

    Using the GearVR controllers

    You are right - it was added (https://github.com/BabylonJS/Babylon.js/commit/85decdfccc5d3aa99ea294fa4e8228c59b95b1fc) in 3.3. You can swap out the controller mesh itself quite easily with MODEL_BASE_URL and MODEL_FILENAME public static properties. You can grab the controllers in a-Frame - see link from davrous. Also, there are controllers in the unity toolkit, but can't find link right now - they were also low-poly. Double check licensing on those projects. edit: OculusGo is set to use the GearVR controller and I don't have one to check that button indexes are the same. (https://github.com/BabylonJS/Babylon.js/blob/1c3c25a72ec2785089d2b64c08d0e2d404a53b1a/src/Gamepad/Controllers/babylon.poseEnabledController.ts#L92)
  13. brianzinn

    BJS Bloat and the Multi-Test JS line

    You could pass in the property you wanted to avoid dereferencing null/undefined, but it would be quite slow. Would be cool if the typescript compiler had an inline annotation like in C. This is not tested at all. called like: hasSubstance(rigParent, 'customRenderTargets') @inline('no such annotation') hasSubstance(obj: any, prop: String) { if (!obj) { return false; } if (obj[string] === undefined || !Array.isArray(obj[string])) { // otherwise do a falsey test return false; } return obj[string].length > 0; } Fun thought experiment. Sounds like speed wins over readability/code reuse! I had some similar thoughts when looking at some duplicate code in VR rigs as the inline code seems harder to maintain. edit: the above code is maybe even harder to maintain, as it won't refactor or give compile errors when ie: property is renamed. edit2: wonder about using generics and lambda as function need only be called if obj is non-null and defined -- hasSubstance(obj: T, (a: T) => a.customRenderTargets... :)
  14. brianzinn

    GUI 2d shapes

    Here is some inspiration - you don't need the module declaration, but follow how the class is defined for syntax (get/set/constructor/private _, public/etc): https://github.com/BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/colorpicker.ts
  15. brianzinn

    GUI 2d shapes

    I would say that you need to do more like: export default class ButtonRing extends GUI.Control { // typescript code in here } You have pasted in generated code, which is normally OK as TypeScript is a superset of JavaScript. I don't have time right now to convert over what you wrote. The properties get/set are generated as: Object.defineProperty´╗┐(ButtonRing.prototype, "arcStart", { ... }) Try one function at a time. the following from your code is just a regular class function. ie: _draw(parentMeasure, context) { ... }, but you can optionally add type. ButtonRing.prototype._draw = function (parentMeasure, context) { // console.log('draw'); context.save(); //... }
  16. brianzinn

    GUI 2d shapes

    no ideas - how about posting your first 23 lines?
  17. brianzinn

    GUI 2d shapes

    Looks like you are missing imports in progress.ts for Babylon and GUI. ie: don't forget at the top: import * as BABYLON from 'babylonjs'; import * as GUI from 'babylonjs-gui'; edit. see: https://doc.babylonjs.com/features/npm_support
  18. brianzinn

    GUI 2d shapes

    Yes, except import as a local file instead of module. ie: import ProgressBar from './ProgressBar';
  19. brianzinn

    GUI 2d shapes

    If you're already building in TypeScript then just add a .ts file to your project and you can reference it. It should build and bundle into your page automatically.
  20. brianzinn

    GUI 2d shapes

    Anything with an underscore prefix is OK to use, I believe there are no guarantees it will be in a future versions. One of the great things about BabylonJS is that the team strives for backwards compatibility, but I'm pretty sure that does not include "._". So, like wingnut said - use them and have fun. If you want to do something and need to use "._" then maybe something is missing that needs to be added, so feel free to ask. Don't add it to current Babylon.js file, because then when you get a newer version of BabylonJS it will be overwritten. Add a new script tag or inline script to your page and include all of your code When you're ready to make your own page outside of the playground check this out. You don't need to use TypeScript at all for your own pages: https://doc.babylonjs.com/babylon101/first
  21. brianzinn

    GUI 2d shapes

    I do realize you said 2D, but here is a 3D that I was working on: https://www.babylonjs-playground.com/#AVXVIQ#2 Would be easy to make appear 2D just flatten out what's there. The interesting part of the code and what would fix your PG is here: let pivotMatrix = BABYLON.Matrix.Translation(progressBarLength, 0, 0); colouredProgressBar.setPivotMatrix(pivotMatrix); let preTransformMatrix = BABYLON.Matrix.Translation(progressBarLength / 2, 0, 0); colouredProgressBar.setPreTransformMatrix(preTransformMatrix); Here is your 2D playground perhaps more what you're after in 2D (scaling.x = % complete): http://www.babylonjs-playground.com/#F84J26#1
  22. brianzinn

    obj loader - loading material

    I've ran into this before as well. The comment that it's loaded syncronously (Calls synchronously the MTL file attached to this ob) was what confused me last time I checked - I found it to be async. https://github.com/BabylonJS/Babylon.js/blob/master/src/Tools/babylon.tools.ts#L634 Check here as well: https://github.com/BabylonJS/Babylon.js/blob/master/loaders/src/OBJ/babylon.objFileLoader.ts#L860 Notice the onSuccess() just attaches the material and if I recall correctly the onSucess() you are working with is just that the OBJ file loaded, where material is async. I don't see a way to wire into material loading except manually checking in a loop (2 seconds is not a guarantee on a slower connection) or updating the loader itself to trigger (additional) events. One easy solution is to switch from OBJ... I'm using OBJ files, but not MTL materials. Other standards include material in original file. edit: If you want to work on the loader to delay onSuccess until materials are loaded, it could be added as an option. ie: { onSuccessWithMaterials: true }, which defaults to false. I think you need to get importMesh(...) to not return until materials are loaded, probably not done as it could block for a while.
  23. Have you seen this thread? http://www.html5gamedevs.com/topic/14975-drawtext-and-keep-ratio-without-stretching-in-3d-text/ I would try to switch to GUI. I'm not recommending this, but here is a way to center text without stretching: var planeTexture = new BABYLON.DynamicTexture('dynamicBABYLON.Texture', 512, this.scene, true); // remove typing if you are using JavaScript let textureContext: CanvasRenderingContext2D = planeTexture.getContext(); // needed for measuring textureContext.font = 'bold 200px verdana'; let size = planeTexture.getSize(); textureContext.save(); textureContext.fillStyle = '#BBBBBB'; textureContext.fillRect(0, 0, size.width, size.height); let textSize = textureContext.measureText(text); textureContext.fillStyle = 'Black'; textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height + 20) / 2); textureContext.restore(); planeTexture.update();
  24. brianzinn

    Babylon Scene With Pure Nodejs Canvas

    Good points and I don't think you need to support Canvas+. Looks to be not compatible with BabylonJS: https://forums.cocoon.io/t/babylonjs-canvas-isnt-work/7066 That would match also the 2.1 update by JC Palmer "Allow Engine to run for CocoonJS with standard html": http://doc.babylonjs.com/whats-new cocoon/cordoba is HTML5 to Native development - if you are, as I am imagining, working on a Unity exporter then I think only standard web pages would suffice, as Unity already provides Native apps? Your project is really interesting to follow!
  25. brianzinn

    Babylon Scene With Pure Nodejs Canvas

    May have been myself that said that about Canvas+, although not sure how popular that is: https://docs.cocoon.io/article/canvas-engine/#Unsupported_features Another thing about HTML elements is they don't work in VR, but there are lots of scenarios where it absolutely makes sense for using HTML elements. "it depends" seems to be how many answers start when it comes to software.