# Need help about GLTF / shaders / normals

**URL:** <https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185>\
**Category:** CesiumJS\
**Created:** [June 2, 2016, 2:22pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185 "2016-06-02T14:22:14Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kredik](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/kredik/32/14000_2.png) [@kredik](https://community.cesium.com/u/kredik)\
**Post date:** [June 2, 2016, 2:22pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185/1 "2016-06-02T14:22:14Z")

</div>

Hi All,

I’m trying to specify a simple shader set for displaying buildings - loaded from gltf file - to get something like in Cesium buildings demos (gray buildings).

[![](https://lh3.googleusercontent.com/-aEGLRqgRgnc/V1BAxXOSeHI/AAAAAAAAAsQ/m087toEdkMcT28tf8sECrIS2Nx0ceymhQCLcB/s320/_gray.PNG)](https://lh3.googleusercontent.com/-aEGLRqgRgnc/V1BAxXOSeHI/AAAAAAAAAsQ/m087toEdkMcT28tf8sECrIS2Nx0ceymhQCLcB/s1600/_gray.PNG)

I have tried to used same shaders as in Cesium demo (extracted from a gltb file), but result is very different… and I see two possibilities : either I failed in adapting the shaders (normals in these gltb file seems encoded on two values), or my normals are wrong.

Here is the code of my shaders after adaptation :

precision highp float;

uniform vec4 u\_ambient;

uniform vec4 u\_diffuse;

uniform vec4 u\_emission;

uniform vec4 u\_specular;

uniform float u\_shininess;

varying vec3 v\_normal;

varying vec3 v\_positionEC;

void main(void) {

vec3 normal = normalize(v\_normal);

vec4 color = vec4(0., 0., 0., 0.);

float diffuseIntensity = 0.0;

float specularIntensity = 0.0;

vec4 diffuse = vec4(0., 0., 0., 1.);

vec4 emission;

vec4 ambient;

vec4 specular;

diffuse = u\_diffuse;

ambient = diffuse \* 0.5;

emission = u\_emission;

specular = u\_specular;

vec3 normalizedpositionToEyeEC = normalize(-v\_positionEC);

diffuseIntensity = czm\_getLambertDiffuse(czm\_sunDirectionEC, normal);

specularIntensity = czm\_getSpecular(czm\_sunDirectionEC, normalizedpositionToEyeEC, normal, u\_shininess) +

```
 0.25 * czm_getSpecular(czm_moonDirectionEC, normalizedpositionToEyeEC, normal, u_shininess);

```

color.xyz += ambient.xyz;

color.xyz += diffuse.xyz \* diffuseIntensity;

color.xyz += specular.xyz \* specularIntensity;

color.xyz += emission.xyz;

color = vec4(color.rgb \* diffuse.a, diffuse.a);

gl\_FragColor = color;

}

precision highp float;

uniform vec4 u\_ambient;

uniform vec4 u\_diffuse;

uniform vec4 u\_emission;

uniform vec4 u\_specular;

uniform float u\_shininess;

varying vec3 v\_normal;

varying vec3 v\_positionEC;

void main(void) {

vec3 normal = normalize(v\_normal);

vec4 color = vec4(0., 0., 0., 0.);

float diffuseIntensity = 0.0;

float specularIntensity = 0.0;

vec4 diffuse = vec4(0., 0., 0., 1.);

vec4 emission;

vec4 ambient;

vec4 specular;

diffuse = u\_diffuse;

ambient = diffuse \* 0.5;

emission = u\_emission;

specular = u\_specular;

vec3 normalizedpositionToEyeEC = normalize(-v\_positionEC);

diffuseIntensity = czm\_getLambertDiffuse(czm\_sunDirectionEC, normal);

specularIntensity = czm\_getSpecular(czm\_sunDirectionEC, normalizedpositionToEyeEC, normal, u\_shininess) +

```
 0.25 * czm_getSpecular(czm_moonDirectionEC, normalizedpositionToEyeEC, normal, u_shininess);

```

color.xyz += ambient.xyz;

color.xyz += diffuse.xyz \* diffuseIntensity;

color.xyz += specular.xyz \* specularIntensity;

color.xyz += emission.xyz;

color = vec4(color.rgb \* diffuse.a, diffuse.a);

gl\_FragColor = color;

}

Note that the GLTF file use the CESIUM\_RTC extension.

I saved my model as OBJ and normals seem good (in MeshLAB) :

[![](https://lh3.googleusercontent.com/-p4mPZzOLYVM/V1A_ChX3h9I/AAAAAAAAAsA/TzfOggVLngQ_sWkq6veJrRnX16XG7pFxQCLcB/s1600/_normals.PNG)](https://lh3.googleusercontent.com/-p4mPZzOLYVM/V1A_ChX3h9I/AAAAAAAAAsA/TzfOggVLngQ_sWkq6veJrRnX16XG7pFxQCLcB/s1600/_normals.PNG)

But display in cesium is…not what I expected :

[![](https://lh3.googleusercontent.com/-QtgZZZhzKGU/V1A_cp86bJI/AAAAAAAAAsE/CHh77Og1yXonvn3Hm2K4Utp_r7fqgkh-QCLcB/s1600/_inCesium.PNG)](https://lh3.googleusercontent.com/-QtgZZZhzKGU/V1A_cp86bJI/AAAAAAAAAsE/CHh77Og1yXonvn3Hm2K4Utp_r7fqgkh-QCLcB/s1600/_inCesium.PNG)

I would like to check if normals are good in the GLTF file & after loadig in Cesium.

I’m wondering if it is possible to use Cesium.createTangentSpaceDebugPrimitive on a gltf model loaded with something like :

```
var model = scene.primitives.add(Cesium.Model.fromGltf({

    url : 'http://xxxx'

}));

```

Any help appreciated,

Fred.

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [June 2, 2016, 3:46pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185/2 "2016-06-02T15:46:28Z")

</div>

Hi Fred,

It looks like the problem is with your normals. It’s hard to tell from the picture you posted, but make sure all normals are normalized (have a unit length)

Also, for corners, you need a separate normal vector for each face. Otherwise the shader tries to round out the corners. Here is an example of a box model that we use for testing. You can see that each corner is duplicated so there is a normal for each face.

[![](https://lh3.googleusercontent.com/-ZOv5d4xu5f4/V1BT-eZiENI/AAAAAAAAHNE/FuRgT1n1kdoWJF4dkbQCrHlL85LoP0s2wCLcB/s320/boxnormals.jpg)](https://lh3.googleusercontent.com/-ZOv5d4xu5f4/V1BT-eZiENI/AAAAAAAAHNE/FuRgT1n1kdoWJF4dkbQCrHlL85LoP0s2wCLcB/s1600/boxnormals.jpg)

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![kredik](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/kredik/32/14000_2.png) [@kredik](https://community.cesium.com/u/kredik)\
**Post date:** [June 2, 2016, 5:37pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185/3 "2016-06-02T17:37:14Z")

</div>

Hi Hannah,

thanks - I think the problem is definitively with the normals as they were calculated before I warp coordinates from cartographic system to ECEF - and normals are not warped.

I will try to convert them to.

Just a clarification : I have one normal for each triangle - but no normals for vertices; do you confirm that this is what is expected ?

Kr,

Fred.

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [June 2, 2016, 7:04pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185/4 "2016-06-02T19:04:32Z")

</div>

Hi Fred,

Having a normal for each triangle is probably okay. I would guess the obj to gltf converter will put it in the correct format.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![kredik](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/kredik/32/14000_2.png) [@kredik](https://community.cesium.com/u/kredik)\
**Post date:** [June 3, 2016, 6:17pm UTC](https://community.cesium.com/t/need-help-about-gltf-shaders-normals/4185/5 "2016-06-03T18:17:06Z")

</div>

Hi,

I have triple checked my normals - OBJ version of my object (in ECEF system) displays fine with MeshLab and osgviewer.

If I reverse my normals ( to check that face winding is correct ), I got black face which is the expected behaviour in osgviewer for exemple.

At this point… I’m blocked. Maybe the problem comes from the shaders - my experience with GLSL is more than low.

I have just tried to copy and adapt shaders used in some buildings demos by analysis of gltb files - see at the end of history.

Maybe a shader gourou here could easily figure out if there is a problems in them.

Any help on how to :

- check normals of loaded GLTF files,

- writing basic shaders to display grey buildings,

- debug shaders

will be highly appreciated.

Thanks in advance;

Fred.