Help us understand the problem. What is going on with this article?

Float16Array (パッケージ紹介, ESNext Stage 1)

More than 1 year has passed since last update.

イントロダクション

半精度浮動小数点数について

IEEE 754-2008 に半精度浮動小数点数 Half-precision floating-point format(以下 float16 とする)として 16bit の浮動小数点数が定義されています。主に機械学習やコンピュータグラフィックスにおいて、GPU との通信やメモリのコスト削減を目的に用いられています。
(参考: 半精度浮動小数点数 - Wikipedia)

JavaScript における扱い

WebGL では OES_texture_half_float, OES_texture_half_float_linear, EXT_color_buffer_half_float の Extension を用いることで float16 を扱うことができます。また WebGL 2.0 ではデフォルトで float16 を扱うことが出来ます。
(参考: Float16Array Topic content 0 - ES Discuss)

しかし残念なことに現状 JavaScript では float16 を扱える TypedArrayDataView のメソッドは存在しません。例えば XMLHttpRequestFetch API で直接バイナリを取得し、そのまま WebGL に渡すといったことは出来ますが、float16 の値を JavaScript で動的に変更したいときに number(64bit float)型との変換を自前で用意しなければなりません。

パッケージの紹介

というわけで、npm に float16 を扱えるパッケージを公開しました。
https://www.npmjs.com/package/@petamoriken/float16
https://github.com/petamoriken/float16/

使い方

README.md を読んでいただけるとわかると思いますが、Float16Array の他にも getFloat16, setFloat16, hfround が用意されています。基本的に ECMAScript の TypedArray, DataView, Math.fround と同じように使えると思います。

Float16Array の実装を見てもらえるとわかると思いますが、Proxy でラップされています。よって IE 11 では動きません。また WebGL にバイナリを渡す時に ArrayBufferUint16Array として渡す必要があります。

例えば OES_texture_half_float を用いて image: Float16Array を渡したい場合、以下のようにしなければなりません(WebGL でテクスチャを扱ったことがないので試せていません。すみません……)。

const ext = gl.getExtension("OES_texture_half_float");

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, ext.HALF_FLOAT_OES, new Uint16Array(image.buffer));

(参考: OES_texture_half_float Example - MDN

対応ブラウザ

babel-preset-env によって last 2 versions のブラウザをターゲットにビルドされるようになっています。ターゲット環境を広げたい場合は、リポジトリをクローンして各々で .babelrc を書き換えてビルドしてください(ただしここを変更しても IE 11 では動きません)。

どうしても IE 11 で使いたい場合は getFloat16, setFloat16, hfround のみを読み込むようにすれば動くと思われますが、このパッケージではサポート対象外とします。

ESNext Stage 1

喜ばしいことに ES Discuss の該当のトピックにこのパッケージを通知したところ、TC39 May 23, 2017 Meeting にて取り上げていただき、Stage 1 入りを果たしました。
(参考: May 23, 2017 Meeting Notes - rwaldron/tc39-notes

今後の展望としてはこのミーティングで挙げられた問題点や疑問点の解消、float16 が本当に JavaScript に必要なのかといった点で議論がなされると思いますので、もしよろしければフィードバックをいただければ幸いです。

関連リンク

float16 パッケージ
https://www.npmjs.com/package/@petamoriken/float16
https://github.com/petamoriken/float16/

半精度浮動小数点数 - Wikipedia
https://ja.wikipedia.org/wiki/%E5%8D%8A%E7%B2%BE%E5%BA%A6%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0

Float16Array - ES Discuss
https://esdiscuss.org/topic/float16array

TC39 May 23, 2017 Meeting Notes
https://github.com/rwaldron/tc39-notes/blob/master/es8/2017-05/may-23.md#16ig-float16-on-typedarrays-dataview-mathhfround-for-stage-1

実装に用いたアルゴリズム
ftp://ftp.fox-toolkit.org/pub/fasthalffloatconversion.pdf

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした