Javascript CPU上でGLSL浮動小数点演算を再現する方法Uint8array

Question

Uint8array（3d x、y、z座標のリスト）にデータがあります。私はいくつかの浮動小数点演算を実行する必要があります。この3次元ベクトル上で（行列回転変換乗算）を行う。私は計算のためにhttp://glmatrix.net/ライブラリを使用しています。

データは、頂点データがこれまで8 [x,y,z,w,r,g,b,a]

のセットでフォーマットされてUint8Arrayとしてそれをパッケージ化し、サードパーティのAPIから来て、私はこのUint8arrayを渡して、GPU上でこの操作を実行されていると回転行列をGLSLに変換します。私はオフラインで実行されるCPUベースのスクリプトに操作を移しています。

更新もう1つの式です。オフラインスクリプトは、最終バッファをstdoutに、最終的にはUNIXの>オペレータを使用してファイルに書き込むnode.js CLIスクリプトです。私は最終的なアプリケーションでこれをロードし、arrayBufferをtypedArrayコンストラクタでラップします。

GLSLで実行すると、操作は次のようになります。

matrix * vec4(vert.x, vert.y, vert.z, 1.0)

と私の結果は次のようになります。私の現在のコードの試みがあるCPU上で今

：

const vertData = getVertDataUint8(); 
    const rotation = mat4.fromRotation(mat4.identity([]), -Math.PI/2, [1,0,0]); 
    var i = 0; 
    while(i<vertData.length){ 
    const rotatedVerts = vec4.transformMat4([], 
              vec4.clone([vertData[i],vertData[i+1],vertData[i+2], 1]), 
              rotation); 

    vertData[i] = rotatedVerts[0]; 
    vertData[i+1] = rotatedVerts[1]; 
    vertData[i+2] = rotatedVerts[2]; 
    i+=8; 
    } 

と私の結果は次のようになります。

私は、vertDataに値を再割り当てすると、特に負の値がintとしてキャストされていることに気付きました。例-10〜= 246

あなたはブラウザコンソールに再現することができ

：私はFloat32Arrayコンストラクタでそれをラップし、Float32Array.fromを使用してFloat32ArrayにUint8Arrayを変換しようとしたが、作るようです

var u = new Uint8Array(1) 
undefined 
u[0] = -10 
-10 
u[0] 
246 

同じ結果。

Answer 1

まず、頂点情報としてFloat32Arrayを使用することを検討してください。それ以外の場合、大きな問題が発生する可能性があります。または、少なくとも署名のないデータ形式を使用します。

今すぐあなたの問題：Uint8Array以来

は、それが唯一の正の8ビット値を保存します符号なしのデータフォーマットです。すべての負の値は正の値として解釈されます（10000000は符号付き整数として-128ですが、符号なしとしては128）

しかし、実際の問題は別のものです。 私はあなたがこのような頂点情報を保存していることを前提としたコードから：

[X1,Y1,Z1,...]または[X1,Y1,Z1,W1,...]

あなたのループがi+=8;以来8の段階での配列を反復処理します。 したがって、少なくとも2番目ごとの頂点はスクリプトでスキップされます。