Missing Example

[Jeroenvan_Onzen1]

Hi,

We are having issues with Three.js in combination with a global view. This could be related to the following issue: 

Precision issues

In global scenes, the precision of 32-bit floating point arithmetic is not sufficient for visualizations that go beyond global scale (i.e. country scale to city scale). When zooming the view beyond a certain scale, geometries will appear to wobble or jitter, and generally appear displaced. The same applies to local scenes where geometries are far away from the origin of the coordinate system.

described in here:

externalRenderers | API Reference | ArcGIS API for JavaScript 4.5 

There is no WebGL example, neither a Threejs example (preferable). In my opinion this is a real lack of documentation (as for me, it is not obvious how to do it).

Could I please get an example.

With regards,

[ReneRubalcava]

I don't know if it helps with your wobble issues, but here is the Three.js sample in the SDK

ArcGIS API for JavaScript Sandbox 

[Jeroenvan_Onzen1]

Thanks for your answer, but this sample does not contain any code regarding this precision issue.

I really appreciate your help though.

[ThomasSolow]

If you can replicate the issue you're running into in a sample I'd be happy to to take a look at it and see if I can help.

I'm not sure where to begin though.  I assume you're asking for a sample of this, from the docs:

• Pick a local origin position, approximately at the center of your data.
• Subtract the local origin position from all positional data (vertex data, uniforms, etc.) before passing it into WebGL.
• Also subtract the local origin from the translational part of the view transformation matrix.

My feeling is that the first two bullets are fairly straightforward: pick a point at roughly the center of your data, transform it into rende coordinates, and subtract it from every vertex that you plan to use to create Three.js geometries.

I'm not completely sure about the third bullet, but I guess that you're meant to subtract your local origin, in render coordinates, from elements 13, 14, and 15 (ie the last three elements) in the view transformation matrix, which is the output of externalRenderers.renderCoordinateTransformAt.

[TobiasMansfield-Williams]

Hi,

I'm not aware of an SDK sample that uses Three.js and local origins, but the other external renderer sample in the SDK does use local origins (Extend the SceneView WebGL engine | ArcGIS API for JavaScript 4.5 ). I’d also recommend looking at this file from one of the dev summit presentations this year that uses local origins with Three.js.

In the first example, the sample picks a point in render coordinates that is close to the geometry being rendered (done in the first few lines of 'initData') and subtracts this from the vertex positions before they are uploaded to the GPU (search for 'Subtract local origin coordinates' in the sample). By also subtracting the local origin translation from the view transformation matrix before rendering that specific geometry (done in 'render' in the sample), the vertices are rendered in the correct position while avoiding precision issues.

In the second example the local origin (named ‘dragOriginTransform’) is being updated and applied to the geometry in ‘updateDrag’, and subtracted from the view matrix in ‘updateCamera’.