Merge branch 'issue/atmosphere-internal-precision'

Author: shotamatsuda

packages/atmosphere/src/PrecomputedTexturesLoader.ts

@@ -1,8 +1,11 @@
 import {
+  FloatType,
+  HalfFloatType,
   LinearFilter,
   Loader,
   type Data3DTexture,
-  type DataTexture
+  type DataTexture,
+  type WebGLRenderer
 } from 'three'
 import { EXRLoader } from 'three-stdlib'
 import join from 'url-join'
@@ -11,6 +14,7 @@ import {
   createData3DTextureLoader,
   createDataTextureLoader,
   EXR3DLoader,
+  Float16Array,
   parseFloat16Array
 } from '@takram/three-geospatial'
 
@@ -37,6 +41,15 @@ export interface PrecomputedTextures {
 
 export class PrecomputedTexturesLoader extends Loader<PrecomputedTextures> {
   format: 'binary' | 'exr' = 'exr'
+  type: typeof FloatType | typeof HalfFloatType = HalfFloatType
+
+  setTypeFromRenderer(renderer: WebGLRenderer): this {
+    this.type =
+      renderer.getContext().getExtension('OES_texture_float_linear') == null
+        ? HalfFloatType
+        : FloatType
+    return this
+  }
 
   override load(
     url: string,
@@ -57,6 +70,16 @@ export class PrecomputedTexturesLoader extends Loader<PrecomputedTextures> {
         texture => {
           texture.minFilter = LinearFilter
           texture.magFilter = LinearFilter
+
+          // Using a half-float buffer introduces artifacts seemingly due to
+          // insufficient precision in linear interpolation.
+          texture.type = this.type
+          if (this.type === FloatType) {
+            texture.image.data = new Float32Array(
+              new Float16Array(texture.image.data.buffer)
+            )
+          }
+
           result[`${name}Texture`] = texture
           if (
             result.irradianceTexture != null &&

packages/atmosphere/src/r3f/Atmosphere.tsx

@@ -1,3 +1,4 @@
+import { useThree } from '@react-three/fiber'
 import {
   createContext,
   forwardRef,
@@ -92,12 +93,14 @@ export const Atmosphere = /*#__PURE__*/ forwardRef<
     shadowLength: null
   })
 
+  const gl = useThree(({ gl }) => gl)
   const [textures, setTextures] = useState(
     typeof texturesProp !== 'string' ? texturesProp : undefined
   )
   useEffect(() => {
     if (typeof texturesProp === 'string') {
       const loader = new PrecomputedTexturesLoader()
+      loader.setTypeFromRenderer(gl)
       ;(async () => {
         setTextures(await loader.loadAsync(texturesProp))
       })().catch(error => {
@@ -106,7 +109,7 @@ export const Atmosphere = /*#__PURE__*/ forwardRef<
     } else {
       setTextures(texturesProp)
     }
-  }, [texturesProp])
+  }, [texturesProp, gl])
 
   const context = useMemo(
     () => ({

storybook/src/atmosphere/Atmosphere-Vanilla.tsx

@@ -161,7 +161,9 @@ function init(): void {
   )
 
   // Load precomputed textures.
-  new PrecomputedTexturesLoader().load('atmosphere', onPrecomputedTexturesLoad)
+  new PrecomputedTexturesLoader()
+    .setTypeFromRenderer(renderer)
+    .load('atmosphere', onPrecomputedTexturesLoad)
 
   container.appendChild(renderer.domElement)
   window.addEventListener('resize', onWindowResize)

storybook/src/clouds/Clouds-Vanilla.tsx

@@ -150,7 +150,9 @@ function init(): void {
   )
 
   // Load precomputed textures.
-  new PrecomputedTexturesLoader().load('atmosphere', onPrecomputedTexturesLoad)
+  new PrecomputedTexturesLoader()
+    .setTypeFromRenderer(renderer)
+    .load('atmosphere', onPrecomputedTexturesLoad)
 
   // Load textures for the clouds.
   new TextureLoader().load('clouds/local_weather.png', onLocalWeatherLoad)