lucky de

showing only visible sides + flat shding

Recommended Posts

hey guys,

new to Babylon and i'm trying to figure out is there an easy function to disable rendering of any vertices not visible to the camera as well as to do flat shading?


e.g. this scene in blender
becomes very bizzare, i tried to do it with basic materials and just set it to shadeless but it renders it with shadow and for some reason it subdivide smooths all the polygons. I'm not sure why. 
Then when I disabled the fills and enabled rendering outlines it renders the backfaced ones. I tried to disable backface culling but it made no effect.

so in short
is there a way to render items as flat colours ignoring light data(or using it as a simple second colour e.g. toon shading)

and is there a way to only render only what's visible to the camera ignoring back sides?

Thanks so much for any useful info in advance

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test1</title>
    <style media="screen">
      html, body {
        overflow: hidden;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #renderCanvas {
        width: 100%;
        height: 100%;
        touch-action: none;
      }
    </style>
      <script
    src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
    crossorigin="anonymous"></script>
    <script src="js/babylon.js"></script>
   <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
    <script src="js/cannon.js"></script>
  </head>
  <body>
    <canvas id="renderCanvas"></canvas>

    <script type="text/javascript">
      if (BABYLON.Engine.isSupported()) {
          var canvas = document.getElementById("renderCanvas");
          var engine = new BABYLON.Engine(canvas, true);
          //prevents the error when looking for manifest file
          engine.enableOfflineSupport = false;

          BABYLON.SceneLoader.Load("", "testScene.babylon", engine, function (newScene) {
              // Wait for textures and shaders to be ready
              newScene.executeWhenReady(function () {
                  // Attach camera to canvas inputs
                  newScene.activeCamera.attachControl(canvas);
                  console.log(newScene.meshes)
                  var sceneObjects = [];
                  var sceneMaterial = new BABYLON.StandardMaterial("trans", newScene);
                  sceneMaterial.alpha = 0.3;
                  sceneMaterial.backFaceCulling = true;
                  for(var i=0;i<newScene.meshes.length;i++){
                    sceneObjects.push(newScene.meshes[i]);
                    //newScene.meshes[i].convertToFlatShadedMesh()
                    newScene.meshes[i].material = sceneMaterial;
                    newScene.meshes[i].enableEdgesRendering(.9999);
                    newScene.meshes[i].edgesWidth = 4.0;
                    newScene.meshes[i].edgesColor = new BABYLON.Color4(0, 0, 1, 1);
                  }
                  engine.runRenderLoop(function() {
                      newScene.render();
                  });
              });
          }, function (progress) {

          });
          window.addEventListener("resize", function () {
            engine.resize();
          });
      }





    </script>

  </body>
</html>

 

Screen Shot 2017-06-23 at 2.52.34 PM.png

Screen Shot 2017-06-23 at 2.51.03 PM.png

testScene.babylon

Share this post


Link to post
Share on other sites

Hello!

1. to render only what is visible: this is by default. But the edgesRenderer does not take it in account and will display ALL faces. You should instead try to use the outlines: https://www.babylonjs-playground.com/#E51MJ#31 

2. flat is easy: set material.disableLighting = true and set your color to material.emissiveColor

Share this post


Link to post
Share on other sites

 @lucky de : Hi, and welcome to the forum :)

You have a number of options in the babylon exporter that may be of use.

1. For the meshes that you do not want to illuminate - but them in a separate layer with no lights. Then with their materials add emission to their materials (Materials Tab->Shading->Emit > 0)

2. For those same meshes:  Meshes Tab->check the Use Flat Shading check box

3. Put all lights in a layer for the meshes you wish to illuminate but then Lights Tab-> check the This Layer Only checkbox. Now the layer with emission and flat shading will be ignored.

Hope that helps.

cheers, gryff :)

 

Share this post


Link to post
Share on other sites

Thanks so much for the tips and yeah they mostly worked! The use flat shading checkbox didn't do anything outside of blender though. It's weird, in blender flat shading is fine on import... not so much
attached the whole folder with the blender file. 
Ideally i'm just trying to setup a way to

model the objects up in blender but keep them as basic lineart and fills(the like in google skechup look)

control them in babylonjs and experiment from there :)

I'll keep looking up blender import tutorials maybe i just skipped a step

testscene.zip

Screen Shot 2017-06-23 at 4.57.20 PM.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.