<h5 dir="auto">Description of the problem</h5>
<p dir="auto"><code class="notranslate">BufferAttribute</code> can be shared among geometries (or even it can be referenced twice or more in one geometry). But <code class="notranslate">.toJSON()</code> creates the same data many times for such a shared buffer attribute. That leads to non-efficient serialized data and shared buffer attribute will become many duplicated buffer attributes through serialization.</p>
<p dir="auto">What do you think of adding <code class="notranslate">attribute</code> field to serialized json data like this?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    metadata: { ... },
    attribute: [
        {
            array: [ ... ],
            ....
        },
        {
            array: [ ... ],
            ....
        },
        {
            array: [ ... ],
            ....
        }
    ],
    geometry: [
        {
            data: {
                attributes: {
                    position: 0, // BufferAttribute doesn't have uuid so using index instead?
                    normal: 1,
                    uv: 2
                }
            },
            ....
        },
        {
            data: {
                attributes: {
                    position: 0,
                    normal: 1,
                    uv: 3
                }
            },
            ....
        }
    ]
    ....
}"><pre class="notranslate"><code class="notranslate">{
    metadata: { ... },
    attribute: [
        {
            array: [ ... ],
            ....
        },
        {
            array: [ ... ],
            ....
        },
        {
            array: [ ... ],
            ....
        }
    ],
    geometry: [
        {
            data: {
                attributes: {
                    position: 0, // BufferAttribute doesn't have uuid so using index instead?
                    normal: 1,
                    uv: 2
                }
            },
            ....
        },
        {
            data: {
                attributes: {
                    position: 0,
                    normal: 1,
                    uv: 3
                }
            },
            ....
        }
    ]
    ....
}
</code></pre></div>
<p dir="auto">Pros:</p>
<ul dir="auto">
<li>Efficient data in case attribute is shared</li>
<li>Reproduce the shared attribute even through serialization</li>
</ul>
<p dir="auto">Cons:</p>
<ul dir="auto">
<li>Break compatibility if there is any users who exported serialized json data to external file/storage.</li>
</ul>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r101</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> macOS</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> iOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>
<p dir="auto">I am trying to use the example at <a href="https://threejs.org/examples/?q=spline#webgl_geometry_spline_editor" rel="nofollow">https://threejs.org/examples/?q=spline#webgl_geometry_spline_editor</a> .<br>
It appears that I cannot reliably drag the control points. Sometimes while changing perspective, the dragging controls appear, but I can't get this to happen reliably.</p>
<p dir="auto">OS X 10.9<br>
Firefox 51.0.1<br>
Google Chrome 56.0.2924.87</p>