<p dir="auto">This week <a href="https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/VAEv-MUFGC8" rel="nofollow">Chrome announced their intent to ship WebGL 2.0</a> so I guess it's about time to start adding support!</p>
<p dir="auto">There are already some PRs that add support to <code class="notranslate">WebGLRenderer</code> for some of the new features but, somehow, it didn't feel it was good idea to make <code class="notranslate">WebGLRenderer</code> support both <code class="notranslate">webgl</code> and <code class="notranslate">webgl2</code>.</p>
<p dir="auto">Say hello to <code class="notranslate">WebGL2Renderer</code>!  <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mrdoob/three.js/commit/2ff9d410753b72a5e43b211dc3be26f0f0ab8a0e/hovercard" href="https://github.com/mrdoob/three.js/commit/2ff9d410753b72a5e43b211dc3be26f0f0ab8a0e"><tt>2ff9d41</tt></a> <g-emoji class="g-emoji" alias="wave" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f44b.png">👋</g-emoji></p>
<p dir="auto">A new renderer not only will save us from tons of conditionals but also will give us the chance of cleaning things up; starting with only supporting <code class="notranslate">BufferGeometry</code> <g-emoji class="g-emoji" alias="v" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/270c.png">✌️</g-emoji></p>
<p dir="auto">Sorry for all the people which PRs didn't got merged because of my indecision! <g-emoji class="g-emoji" alias="pensive" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f614.png">😔</g-emoji></p>
<p dir="auto">This is about the way you manage smoothing groups in OBJLoader <a href="https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/OBJLoader.js#L583-L602">(your remark about it)</a> and more generally about BufferGeometry Groups rendering.</p>
<blockquote>
<p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/todo/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/todo">@todo</a> Handle files that have varying smooth values for a set of faces inside one geometry but does not define a usemtl for each face set</p>
</blockquote>
<p dir="auto">IMO :<br>
1- This case is a 'standart' case and g/s/usemtl should generate bufferGeometry groups (BTW can we add a name to a group ?)<br>
2- Actually this parameter set the material.flatShading (true/false), but it does not do the job</p>
<p dir="auto">In 3DSMax the smoothing group integer is a kind of faces group index which indicates that the faces are not 'merged' with neighbour faces with a different index.<br>
An example here (look at the bottom teapot) :<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/00700dac574ea0db7aa264ac2f92acbe63e2d0bc416ab9e2c7b4f2731aaa9af6/687474703a2f2f77696b692e706f6c79636f756e742e636f6d2f772f696d616765732f662f66632f536d6f6f7468696e675f67726f7570732e6a7067"><img src="https://camo.githubusercontent.com/00700dac574ea0db7aa264ac2f92acbe63e2d0bc416ab9e2c7b4f2731aaa9af6/687474703a2f2f77696b692e706f6c79636f756e742e636f6d2f772f696d616765732f662f66632f536d6f6f7468696e675f67726f7570732e6a7067" alt="Image" data-canonical-src="http://wiki.polycount.com/w/images/f/fc/Smoothing_groups.jpg" style="max-width: 100%;"></a></p>
<p dir="auto">I don't know how that could be reproduced ... but, if I come back to bufferGeometry Groups, I think that the result could be approached if the limit between group stays visible even if material.flatShading = false, ie <strong>by displaying the edges between non-coplanar faces of a different group</strong>.</p>
<p dir="auto">For example this cube contains groups referencing the same material :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="groups: […]
0: Object { start: 0, count: 6, materialIndex: 0 }
1: Object { start: 6, count: 6, materialIndex: 0 }
2: Object { start: 12, count: 6, materialIndex: 0 }
3: Object { start: 18, count: 6, materialIndex: 0 }
4: Object { start: 24, count: 6, materialIndex: 0 }
5: Object { start: 30, count: 6, materialIndex: 0 }"><pre class="notranslate"><code class="notranslate">groups: […]
0: Object { start: 0, count: 6, materialIndex: 0 }
1: Object { start: 6, count: 6, materialIndex: 0 }
2: Object { start: 12, count: 6, materialIndex: 0 }
3: Object { start: 18, count: 6, materialIndex: 0 }
4: Object { start: 24, count: 6, materialIndex: 0 }
5: Object { start: 30, count: 6, materialIndex: 0 }
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4399390/36672709-982e4738-1b00-11e8-8a05-668a45b58163.png"><img src="https://user-images.githubusercontent.com/4399390/36672709-982e4738-1b00-11e8-8a05-668a45b58163.png" alt="image" style="max-width: 100%;"></a><br>
For me it reproduces the <code class="notranslate">Cube with group names</code> example of <a href="http://paulbourke.net/dataformats/obj/" rel="nofollow">obj specs</a> (middle of page) :</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    v 0.000000 2.000000 2.000000
    ...
    # 8 vertices

    g front cube
    f 1 2 3 4
    g back cube
    f 8 7 6 5
    g right cube
    f 4 3 7 8
    g top cube
    f 5 1 4 8
    g left cube
    f 5 6 2 1
    g bottom cube
    f 2 6 7 3
    # 6 elements"><pre class="notranslate"><code class="notranslate">    v 0.000000 2.000000 2.000000
    ...
    # 8 vertices

    g front cube
    f 1 2 3 4
    g back cube
    f 8 7 6 5
    g right cube
    f 4 3 7 8
    g top cube
    f 5 1 4 8
    g left cube
    f 5 6 2 1
    g bottom cube
    f 2 6 7 3
    # 6 elements
</code></pre></div>
<p dir="auto">But I expected the render below (which is <code class="notranslate">flatShading = true</code>) ..<br>
OR<br>
The following obj should be rendered as <code class="notranslate">flatShading = true</code> material even if it's <code class="notranslate">false</code> ?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    v 0.000000 2.000000 2.000000
    ...
    # 8 vertices

    s 1
    f 1 2 3 4
    s 2
    f 8 7 6 5
    s 3
    f 4 3 7 8
    s 4
    f 5 1 4 8
    s 5
    f 5 6 2 1
    s 6
    f 2 6 7 3
    # 6 elements"><pre class="notranslate"><code class="notranslate">    v 0.000000 2.000000 2.000000
    ...
    # 8 vertices

    s 1
    f 1 2 3 4
    s 2
    f 8 7 6 5
    s 3
    f 4 3 7 8
    s 4
    f 5 1 4 8
    s 5
    f 5 6 2 1
    s 6
    f 2 6 7 3
    # 6 elements
</code></pre></div>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/4399390/36673287-8efc110c-1b02-11e8-941e-804ff7dbb801.png"><img src="https://user-images.githubusercontent.com/4399390/36673287-8efc110c-1b02-11e8-941e-804ff7dbb801.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">This way we could manage smoothed portions of the mesh and 'flat' limit between faces groups ?</p>