<p>I have trouble understanding the following Javascript code.</p>

<p>It calculates, given a mesh described by its vertices <code>vs</code> and indices <code>ind</code>, the normals for each vertex. The mesh faces are a triangle list, and are oriented counterclockwise.</p>

<pre class="lang-js prettyprint-override"><code>utilsObject.prototype.calculateNormals = function(vs, ind) {
    var x = 0;
    var y = 1;
    var z = 2;
    var ns = [];
    // for each vertex, initialize normal x, normal y, normal z
    for (var i = 0; i &lt; vs.length; i++) {
        ns[i] = 0.0;
    }
    // we work on triads of vertices to calculate normals so
    // i = i+3 (i = indices index)
    for (var i = 0; i &lt; ind.length; i = i + 3) {
        var v1 = [];
        var v2 = [];
        var normal = [];
        // p1 - p0
        v1[x] = vs[3 * ind[i + 1] + x] - vs[3 * ind[i] + x];
        v1[y] = vs[3 * ind[i + 1] + y] - vs[3 * ind[i] + y];
        v1[z] = vs[3 * ind[i + 1] + z] - vs[3 * ind[i] + z];
        // p0 - p1
        v2[x] = vs[3 * ind[i + 2] + x] - vs[3 * ind[i + 1] + x];
        v2[y] = vs[3 * ind[i + 2] + y] - vs[3 * ind[i + 1] + y];
        v2[z] = vs[3 * ind[i + 2] + z] - vs[3 * ind[i + 1] + z];
        // cross product by Sarrus Rule
        normal[x] = v1[y] * v2[z] - v1[z] * v2[y];
        normal[y] = v1[z] * v2[x] - v1[x] * v2[z];
        normal[z] = v1[x] * v2[y] - v1[y] * v2[x];
        // update the normals of that triangle: sum of vectors
        for (j = 0; j &lt; 3; j++) {
            ns[3 * ind[i + j] + x] = ns[3 * ind[i + j] + x] + normal[x];
            ns[3 * ind[i + j] + y] = ns[3 * ind[i + j] + y] + normal[y];
            ns[3 * ind[i + j] + z] = ns[3 * ind[i + j] + z] + normal[z];
        }
    }
}
</code></pre>

<p>How does this function work? For example, could you explain the use of indices in the instruction:</p>

<pre class="lang-js prettyprint-override"><code>v1[x] = vs[3*ind[i+1]+x] - vs[3*ind[i]+x];
</code></pre>

<p>Rather than a high-level explanation, I am interested in the logic of the implementation details.</p>

CC BY-SA 3.0
2017-01-10T19:13:09.497Z
What is it that you don't understand or want to do? This is hard to read because it's javascript without any sane abstractions... but at its core, it's only a cross product to compute the normal and addition to average the normals on shared vertices.
Olivier
CC BY-SA 3.0
2017-01-10T19:32:03.820Z
Seconded. I don't see a question so have no idea what it is you are asking about.
Alan Wolfe
CC BY-SA 3.0
2017-01-10T19:33:58.750Z
Never mind the first line and that is Javascript.  I know what the code does. I know how to calculate normal in theory.  But in practice, in the code, I do not understand the index management mechanism. I miss the sense of what is done.
Nick
CC BY-SA 3.0
2017-01-11T00:07:38.680Z
Ok, I can't write an answer anymore but as best I can tell, `vs` is a vertex array and `ns` a corresponding normal array. Both are raw float arrays so they are indexed with `i*3+0` (`i*3+x` in the code) for x component of vector number i, `i*3+1` for y, `i*3+2` for z. `ind` is an indirection array which contains vertex (and thus normal too) indices. It defines the triangle strips (the topology) within the arbitrary set of vertices. `v1` and `v2` are two edges of the triangle.
Olivier
CC BY-SA 3.0
2017-01-11T06:51:39.927Z
I have tried to reword the question to make it clearer. Feel free to edit or revert changes if I changed the intended meaning.
Julien Guertault
<shader><computational-geometry><webgl>
How does this function calculate normals of a mesh?
Nick
# How does this function calculate normals of a mesh?

(Asked by: username_0 on 2017-01-10)

I have trouble understanding the following Javascript code.

It calculates, given a mesh described by its vertices `vs` and indices `ind`, the normals for each vertex. The mesh faces are a triangle list, and are oriented counterclockwise.

```js
utilsObject.prototype.calculateNormals = function(vs, ind) {
    var x = 0;
    var y = 1;
    var z = 2;
    var ns = [];
    // for each vertex, initialize normal x, normal y, normal z
    for (var i = 0; i < vs.length; i++) {
        ns[i] = 0.0;
    }
    // we work on triads of vertices to calculate normals so
    // i = i+3 (i = indices index)
    for (var i = 0; i < ind.length; i = i + 3) {
        var v1 = [];
        var v2 = [];
        var normal = [];
        // p1 - p0
        v1[x] = vs[3 * ind[i + 1] + x] - vs[3 * ind[i] + x];
        v1[y] = vs[3 * ind[i + 1] + y] - vs[3 * ind[i] + y];
        v1[z] = vs[3 * ind[i + 1] + z] - vs[3 * ind[i] + z];
        // p0 - p1
        v2[x] = vs[3 * ind[i + 2] + x] - vs[3 * ind[i + 1] + x];
        v2[y] = vs[3 * ind[i + 2] + y] - vs[3 * ind[i + 1] + y];
        v2[z] = vs[3 * ind[i + 2] + z] - vs[3 * ind[i + 1] + z];
        // cross product by Sarrus Rule
        normal[x] = v1[y] * v2[z] - v1[z] * v2[y];
        normal[y] = v1[z] * v2[x] - v1[x] * v2[z];
        normal[z] = v1[x] * v2[y] - v1[y] * v2[x];
        // update the normals of that triangle: sum of vectors
        for (j = 0; j < 3; j++) {
            ns[3 * ind[i + j] + x] = ns[3 * ind[i + j] + x] + normal[x];
            ns[3 * ind[i + j] + y] = ns[3 * ind[i + j] + y] + normal[y];
            ns[3 * ind[i + j] + z] = ns[3 * ind[i + j] + z] + normal[z];
        }
    }
}

```

How does this function work? For example, could you explain the use of indices in the instruction:

```js
v1[x] = vs[3*ind[i+1]+x] - vs[3*ind[i]+x];

```

Rather than a high-level explanation, I am interested in the logic of the implementation details.

**Tags:** shader, computational-geometry, webgl

> **Comments:**
> **username_1**: What is it that you don't understand or want to do? This is hard to read because it's javascript without any sane abstractions... but at its core, it's only a cross product to compute the normal and addition to average the normals on shared vertices.  
> **username_2**: Seconded. I don't see a question so have no idea what it is you are asking about.  
> **username_0**: Never mind the first line and that is Javascript.  I know what the code does. I know how to calculate normal in theory.  But in practice, in the code, I do not understand the index management mechanism. I miss the sense of what is done.  
> **username_1**: Ok, I can't write an answer anymore but as best I can tell, `vs` is a vertex array and `ns` a corresponding normal array. Both are raw float arrays so they are indexed with `i*3+0` (`i*3+x` in the code) for x component of vector number i, `i*3+1` for y, `i*3+2` for z. `ind` is an indirection array which contains vertex (and thus normal too) indices. It defines the triangle strips (the topology) within the arbitrary set of vertices. `v1` and `v2` are two edges of the triangle.  
> **username_3**: I have tried to reword the question to make it clearer. Feel free to edit or revert changes if I changed the intended meaning.  

---

## 0 answers

