brianzinn

Members
  • Content count

    679
  • Joined

  • Last visited

  • Days Won

    5

brianzinn last won the day on August 14

brianzinn had the most liked content!

3 Followers

About brianzinn

  • Rank
    Advanced Member

Profile Information

  • Location
    Vancouver, BC

Recent Profile Visitors

1,709 profile views
  1. That's really helpful - not just the code, but all the links and walking through the process. Thanks for sharing!
  2. brianzinn

    Is Babylonjs recommended for 2D projects?

    I know they are working on having it automatically remove the dead code with tree-shaking, but it's not there yet. You can follow this github issue to follow when it's ready: https://github.com/BabylonJS/Babylon.js/issues/3314 Having said that, it is modularized - the loaders, gui, materials, post-process, etc. are separate imports. I thought I remembered a page to generate a custom script and I think it's even linked from the NPM page! http://doc.babylonjs.com/how_to/how_to_start#custom-builds <-- this link should be fixed on the NPM page (https://doc.babylonjs.com/features/npm_support), but I'm not sure where it should point.
  3. brianzinn

    Rotation of an imported mesh

    I am not sure about the root cause, but if you animate a parent then it works, so maybe that helps? http://www.babylonjs-playground.com/#EEUVTY#5 ** edit: yours works if you set: cat.rotationQuaternion = null; Use one or the other - that's a gotcha that gets everybody! Use animation type: BABYLON.Animation.ANIMATIONTYPE_QUATERNION otherwise - if you need an example ask.
  4. brianzinn

    ShaderMaterial Questions

    You can get the gradient materials shader code here to blend the colours - I think that's what you meant - it's a smooth gradient: https://github.com/BabylonJS/Babylon.js/blob/master/materialsLibrary/src/gradient/gradient.fragment.fx I've written some of my own gradient shaders from scratch as well, they ended up something like this, but for a skybox, which you can do multiple steps - ie: an intermediate gradient. I think global height is the same, but it doesn't take camera height into account. global height Vertex shader followed by gradient shader: precision mediump float; // Attributes attribute vec3 position; attribute vec3 normal; attribute vec2 uv; // Uniforms uniform mat4 worldViewProjection; // Varying varying vec4 vPosition; varying vec3 vNormal; void main() { vec4 p = vec4( position, 1. ); vPosition = p; vNormal = normal; gl_Position = worldViewProjection * p; } precision mediump float; uniform mat4 worldView; varying vec4 vPosition; varying vec3 vNormal; // Offset position // uniform float step1; // uniform float step2; uniform float offset; // Colors uniform vec3 topColor; uniform vec3 middleColor; uniform vec3 bottomColor; void main(void) { float h = normalize(vPosition + offset).y; //gl_FragColor = vec4( mix(bottomColor, topColor, max(pow(max(h, 0.0), 1.2), 0.0)), 1.0 ); gl_FragColor = vec4( mix(bottomColor, topColor, h), 1.0 ); // float h = normalize(vPosition).y; // vec4 color = vec4(mix(bottomColor, middleColor, smoothstep(0.0, step1, h)), 1.0); // color = vec4(mix(middleColor, topColor, smoothstep(step2, 1.0, h)), 1.0); // gl_FragColor = color; } Hopefully that helps a bit. It's not your solution.
  5. brianzinn

    Button3D content

    That works perfectly @Sebavan - I could have sworn that I had tried that already and it had no effect.. doh.
  6. brianzinn

    Button3D content

    I'd love to see the CSS transforms for this https://www.babylonjs-playground.com/#HB4C01#8 The playgrounds are oversimplified to show the minimum code to reproduce, not necessarily what we are trying to build. I am working on VR experiences, which are only available on the canvas!
  7. There is a doc about integrating with React: https://doc.babylonjs.com/resources/babylonjs_and_reactjs Have you attached the the canvas from a ref (<canvas ref={this.onCanvas3d}>) using the lifecycle method componentDidMount? At the point for sure it is not too early in terms of the canvas being ready for WebGL to attach. I have not had any issues creating the engine and starting the engine.runRenderLoop(...) immediately at that point. I'm assuming you're not React Native - I haven't tried that! I realise you can't create a PG, but please post some code especially how you are using lifecycle hooks.
  8. brianzinn

    Button3D content

    I have been trying to get the Button3D (new in 3.3) to work like the 2D button, but it looks like there are effects from Material or Outline. I have been unable to disable them - maybe it's part of the utility layer? https://www.babylonjs-playground.com/#7AR2GJ I would like a button with the image showing clearly like this 2D one: https://www.babylonjs-playground.com/#7AR2GJ#1 I'd also like to hide the red coloring.
  9. brianzinn

    declarative React

    The next playground I was after was the 3D GUI: https://www.babylonjs-playground.com/#HB4C01#8 The only minor obstacle is that the React components load as child controls first. ie: The Holographic Button loads before the 3D panel, but the panel needs to be ready and the panel needs a GUI3DManager, so sort of a second pass was added for 3D GUI controls. I wanted to have the CylinderPanel with holographic buttons like the PG above and a Skybox where I could set the texture. I have clicking on the buttons changing the skybox texture - the texture files load slow over GH pages! The jsx/tsx Markup looks like this: <Scene id="sample-canvas"> <HemisphericLight name="light1" intensity={0.7} direction={Vector3.Up()} /> <Skybox texture={activeSkybox.texture} /> <ArcRotateCamera target={ Vector3.Zero() } radius={10} alpha={-Math.PI / 4} beta={(Math.PI / 2)}/> <GUI3DManager> <CylinderPanel margin={0.2}> { Array.from(new Array(60), (_, index) => index).map(number => { return ( <HolographicButton key={`btn-${number}`} name={`btn-name-${number}`} text={`btn-text-${number}`} onClick={this.next} /> ) }) } </CylinderPanel> </GUI3DManager> </Scene> https://brianzinn.github.io/create-react-app-babylonjs/withSkybox
  10. brianzinn

    Resize GUI Text according to its max width

    I think you need to use measureText: https://www.w3schools.com/tags/canvas_measuretext.asp Easiest way to get a 2D context is from a texture. edit: add pg: https://www.babylonjs-playground.com/#XCPP9Y#600
  11. There is an interface called ICullable, which has 2 methods for checking if it's in a frustum: https://github.com/BabylonJS/Babylon.js/blob/147b793e34a64889b32ab2148834fea3ba92db69/src/Culling/babylon.boundingInfo.ts#L25 Here is a PG that I made using meshes, so not a vertex. I just want to make sure this is not what you are looking for: https://playground.babylonjs.com/#050P3M Camera also has planes that you can use and also camera.isInFrustum() methods that take ICullable. Although completely inFrustum doesn't make sense for a Vector3, so could be same implementation for both, so I think you can work from those planes and view projection matrix. There must be a built-in method somebody can give you, but otherwise hopefully that is enough to get you going. I'm really busy right now or would dig into some math for ya!
  12. brianzinn

    cameraHelper type of thing?

    That's a great idea @babbleon! - I really cannot count know how many times I've had z-fighting issues where something is out of frustum near plane, so that near plane is really helpful (ie: move near/far plane or z-position/fov). This is linked from the page that I used to learn all the math, but would be a cool documentation PG with GUI sliders to demonstrate the utility of the camera helper: https://webglfundamentals.org/webgl/frustum-diagram.html main page(https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html)
  13. brianzinn

    cameraHelper type of thing?

    createDefaultCamera creates a camera helper - (http://doc.babylonjs.com/how_to/fast_build#accessing-the-camera ) Lots of room for new features with that part.
  14. brianzinn

    STLFileLoader swaps Y- and Z-Coordinates

    I'm pretty sure STL is right-handed, so possibly because BJS is left-handed? Also, welcome to the forum! Great question.
  15. brianzinn

    Using glTF extensions question

    The draco compression extension is used automatically, if you have a v2 model. The loader v1 or v2 is chosen based on the file version: https://doc.babylonjs.com/how_to/gltf#full-version You can read more about the decoder here: https://doc.babylonjs.com/api/classes/babylon.dracocompression Use BABYLON.DracoCompression.DecoderAvailable to determine if the decoder is available for the current session. I think that's only if you want to override, because an appropriate loader will be used based on the file extension. ie: you can force a gltf loader on a file missing an extension: https://github.com/BabylonJS/Babylon.js/blob/master/src/Loading/babylon.sceneLoader.ts#L251