flyingbee

Members
  • Content Count

    6
  • Joined

  • Last visited

About flyingbee

  • Rank
    Newbie

Profile Information

  • Gender
    Male
  • Location
    Phoenix, Arizona, US

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. flyingbee

    Image gets darkened after resizing the object

    Hi @Wingnut@gryff, Sorry for my late response. I have been working hard on something else recently.... but i am keeping an eye on this thread. Thanks for all your reply. While I know so little about BJS by now, I played with the yaymaneuver() in playground #18 and #19, it is interesting. so I simplified the code a little bit just to narrow down the cause of the lighting difference. Now it looks like a pill in the playground I created: https://www.babylonjs-playground.com/#WB2I9E. It looks like other than yaymaneuver(), the lighting is also affected by this function: bakeCurrentTransformIntoVertices, if we commented out this function, shadow comes with or without yaymaneuver....here yaymaneuver just applies a world metrics to the vertices of the object, even it doesn't make a difference if i commented it out myVertexData.transform(mesh.getWorldMatrix())...which makes me wondering what "bakeCurrentTransformIntoVertices" is doing, but i think i am still too new to BJS to understand that....I will dig more into that and share you with any of my finding....This is really interesting...I was recently frustrated with an lighting/normal issue of an object imported from blender, the normal seemed inverted when the object was imported to BJS, it turned all transparently dark, but after i used bakeCurrentTransformIntoVertices, the surface got shiny just as what it appeared in blender....thanks for your sharing @Wingnut, i think I have to figure that out sooner or later. Thanks @gryff for sharing your approach...the Chirstmas scene you made is so amazing! I like the snow and the smoke from the chimney. I am also trying to create a beautiful scene like that so I am trying to learn how to do modelling in blender and do some coding in BJS for the roaming, controlling...I am just kind of slow in that Sometimes when i get stuck, I might stop and think if i should give up....but eventually i end up continuing on and start learning from you guys...Just slow lol, but I will keep learning and share with you any of my findings and progress. Thanks all you guys! Talk to you soon!
  2. flyingbee

    Image gets darkened after resizing the object

    Hi @Wingnut, Thanks for your detail explanation! I read the doc Facet Normals, which reminded me of the computer graphics lesson I learned in college and enlightened me a lot. So here is my learning, please help to correct me if any part is wrong So when we exported the textured object made from Blender with "use flat shading" checked, the normals of the textured facet (4 of them) are at right angle facing the point light, Regardless of specular and ambient lighting, the final color of each point on the facet would be calculated as below: point_color = max(n, l, 0) * diffuse_material(r, g, b) * diffuse_light(r, g, where "n" is the normal of the vertex, and "l" is the normal of the light to the vertex. So when we use flat shading, all the points on the textured facet have the same normal after interpolation, which is perpendicular to the facet, and hence produces the maximum value from max(n, l, 0), so that's why we are seeing a much brighter surface using flat shading, since flat shading treats each facet individually while rendering the object. See the effect below (i disabled ambient and specular lighting): (As we can see, the lighting got equally rendered across the textured facet, since every vertex has the same normal, at right angle) However, if we don't use flat shading in Blender and export the object to BJS, BJS will render the object using "Normals and Minimum Vertices" method mentioned in Facet Normals, which calculates the normal of the vertex by averaging the normals of all the shared facets (not sure it it Phong shading?) And when we flatten the cube (object.scaling.y gets smaller and smaller), the 4 normals of the textured facet will be affected…so the thinner of the cube, the further those normals will be facing away from the light, which makes the y component of the normal smaller and smaller, and consequentially, the interpolated normals of the points on the facet gets smaller y component. And the final result is that, it produces way too small value from max(n, l, 0) and we ended up seeing that darkened image! See the effect below (disabled ambient and specular lighting either): So what makes me keep learning is that whether we want to use “flat shading” or other shading methods when it comes to realistic rendering. This is so interesting especially when we can directly see the result. I will dig into more of that. Lastly, do you mind me asking one more thing...so if we want to develop a 3D roaming system (roaming inside / outside of a building) using BJS, do we often leverage other tools like Blender, 3ds Max and etc. for the modeling and animation instead of creating a complicated scene purely in BJS? Thanks @Wingut! and all of you!
  3. flyingbee

    Image gets darkened after resizing the object

    Hi @gryff, I tried your solution and it is working perfectly!! You are awesome!!! So I installed Blender Exporter v.5.3 and tried the flat shading option. Now the lighting and shadowing of the objects rendered in the webpage is almost identical with that rendered in Blender. That's just amazing! I also checked the .blend files, so it seems that the indices, normal and positions of the object got changed after we use the flat shading property, which would affect the lighting, is it correct? So based on my understanding, if we want to apply texture onto a flat surface (e.g. a wall or a floor), we want to check this option, otherwise, Blender would render the surface as a 3D object which would cause some lighting issue when it is exported to Babylonjs? Thank you @gryff! I appreciate your help and all of you! I will do some more experiment on that and keep learning more about Blender modeling and Babylonjs. Have a good night
  4. flyingbee

    Image gets darkened after resizing the object

    Thanks @gryff for looking into this for me! Yep, I am using version 4.6.1 of the Blender exporter, looks like this is the latest version, but still get that result. So everything looks good in Blender but it is a different result in Babylonjs I used the default camera and point light in Blender, added a monkey, resized the cube and textured it, and finally exported it to Babylonjs. I uploaded .blend file here https://github.com/babylonbee/babylonbee.github.io/blob/master/Espilit/home.blend (also in attached files). Thanks @gryff for taking a look !! home.blend
  5. flyingbee

    Image gets darkened after resizing the object

    Hi @Wingnut and @gryff, Thank you very much for all your help! After getting frustrated with this issue, your detailed answers just encouraged me a lot. Sorry it took me a while to mange to upload my project to GitHub. @Wingnut Thanks for doing the same experiment for me, the textured effect is exactly what i am trying to achieve. So I tried to put my code in BabylonJS playground, but it looks like i need to populate the createScene() function by creating scene from scratch, instead of importing a scene from blender.....sorry i still have not figured out how to use BABYLON.SceneLoader.Load() in BabylonJS playground to load an existing scene, if it is possible to do that, can you please let me know how? ~ So I created a new GitHub account and uploaded my simple project there. The webpage with that flattened cube which refuses to be lightened properly is served here: https://babylonbee.github.io/ In the runRenderLoop function, I increase the scaling.y value by 0.001 to make the cube fatter and fatter each time, so we can easily see how the cube gets rendered as it resizes. So when the cube reaches its full size (scaling.y == 1), we can see that the texture gets rendered perfectly with the point light effect. Also, as we can see, the textured face is getting closer to the light as it resizes, which makes me wondering if it is just of matter of position...but even I tried to put the flattened cube closer, it still cannot be rendered properly....so that's something that frustrated me these days....So all the source files is here: https://github.com/babylonbee/babylonbee.github.io.git Thanks @gryff and @Wingnut if you can take a look!!!!!!! I might have more questions to bug you @gryff i just like blender lol @Wingnut sorry i forgot to check...so im using Babylonjs 2.5, i imported this script in my project http://cdn.babylonjs.com/2-5/babylon.max.js, so it is version 2.5, i guess? I download the latest exporter from the GH here: https://github.com/BabylonJS/Babylon.js/tree/master/Exporters/Blender My blender version is 2.78. It is also the latest version. I will do some more experiment to see if i can figure out the cause of this issue by any change :-) Have a great day~
  6. Hi folks, I am a beginner for babylon.js and blender. So I imported a cube with one face textured from blender to babylon js using BABYLON.SceneLoader.Load. The scene has the default point light in blender and the HemisphericLight I created using babylon.js. Everything looks good (please see the 2.jpg in the attachment), but after I resize the cube to make the cube flat (using cube.scaling.y = 0.1), the lower part of the textured face will be always shadowed, no matter how i adjust the light or how to move the cube (please see the 1.jpg). I already made the scene as simple as possible to narrow down the cause of the issue, but I still cannot figure out why the lighting cannot be rendered properly. So any help will be much appreciated!