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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.