Is cel shading supported?

[yorke]

Hi all. I'd like to know if BJS supports cel (toon) shading? Didn't find anything about that.

My scene is exported from Blender, the goal would be to apply cel shading on all meshes. Lurking the code i saw that there's a mesh.convertToFlatShadedMesh() function, but nothing similar about cel shading. Any ideas?

Tnx, cheers

[adam]

You can use the shader here:

http://cyos.babylonjs.com/

[yorke]

Many tnx for your link adam. Shader's code is clear, but it's not clear to me how to apply the shader on materials exported form blender. If I apply this code:

        var amigaMaterial = new BABYLON.ShaderMaterial(...custom vertex and pixel shader )

        scene.materials[n] = amigaMaterial;

every material in the scene would be overwitten (I think), so it would loose what i've defined in blender for that material (texture, diffuseColor etc).

On the opposite, I'd like every material to preserve its original properties and change only the shader. Is it possible to achieve this in some way or I have to create every time a new ShaderMaterial and "manually" append the properties from the original material to it?

Tnx in advance

[Raggar]

Couldn't you just run a function for every mesh that needs the cell shader, and do something like:

      mesh.material.subMaterials[1] = createCellShader(mesh.material.subMaterials[1]);

      var createCellShader = function(material){
      var cMaterial = new BABYLON.ShaderMaterial(...custom vertex and pixel shader );
      if(material){
         if(material.diffuseColor){
            cMaterial.diffuseColor = material.diffuseColor; 
         } 
         if(material.diffuseTexture){
            cMaterial.diffuseTexture = material.diffuseTexture; 
         }    
      }
         return cMaterial;    

      }

Or did you have something else in mind?

 

 

[yorke]

Thank you raggar. That could be a nice solution, i'll give a try

[yorke]

Up. I tried to mix cel shader from the link posted by adam with raggar's code but meshes are now rendered totally black, here is what I did:

<script type="application/vertexShader" id="vertexShaderCode">

[...]

<script type="application/fragmentShader" id="fragmentShaderCode">

[...]


mesh.material.subMaterials[0]=createCellShader(mesh.material.subMaterials[0].clone("CLONEMAT"),scene);

[...]

function createCellShader (material,scene)
{
      var cMaterial = new BABYLON.ShaderMaterial
      (
            "amiga", scene,
        {
            vertexElement: "vertexShaderCode",
            fragmentElement: "fragmentShaderCode",
        },
        {
            attributes: ["position", "normal", "uv"],
            uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]            
        }            
      );

      if(material)
      {
         if(material.diffuseColor)
            cMaterial.diffuseColor = material.diffuseColor;

         if(material.diffuseTexture)
            cMaterial.diffuseTexture = material.diffuseTexture;
      }

      return cMaterial;    
}

Any ideas? I also tried to change light position in shaders but nothing changed. I don't know how to investigate this

[Raggar]

I haven't had the pleasure to play with the shaderMaterial yet, si I really can't tell.

Can you manually apply the texture and color to the shader, without the black effect?

And I don't think cloning of materials is supported. You'll have to create a new material, using something along the lines of the same function you are using now.

[NasimiAsl]

sample from CustomMaterial

http://www.babylonjs-playground.com/#0GG6MR#10

http://www.babylonjs-playground.com/#0GG6MR#11

http://www.babylonjs-playground.com/#0GG6MR#12

[Dad72]

Is that what you think it is possible to make all the scene (everything including the 3d objects) with Cell Shading Nasimi?

[NasimiAsl]

like post process?

[Dad72]

Yes, that would be cool this possibility

[julien-moreau]

Hey @yorke

cell shading is now available in materials library http://doc.babylonjs.com/extensions/cell

And it supports shadows

[Dad72]

I receive: Line 14:13 - BABYLON.CellMaterial is not a constructor

It may not be available in the Playground

[julien-moreau]

Oups =S

it should be deployed soon

[yorke]

Woah tnx Luaacro, awesome! I like BJS's community reactivity

I'm experiencing the same error posted by dad72 on the PG, will this feature be avalaible in BJS v3 stable release?

[Sebavan]

This has just been deployed (it was only on Master but not deployed to the PG).