1

回転する長方形を描きました。また、テクスチャを設定しましたが、非常に醜い（非常に低い解像度）ように見えます。

長方形の頂点の表は次のとおりです。

1.0,  1.0,  0.0,
-1.0,  1.0,  0.0,
1.0, -1.0,  0.0,
-1.0, -1.0,  0.0

これは、上記の長方形をマッピングするテクスチャの座標です。

0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,

テクスチャのサイズは 512x512 です (大きすぎます!!! 正確なサイズに問題はありません)。

完全なソース コードは次の場所にあります。

http://pastebin.com/qXJFNe1c

それが私のせいであることははっきりと理解していますが、正確にどこに問題があるのか​​ わかりません。

PS 私は、そのような問題は WebGL とは強く関係していないと思います。純粋な OpenGL 開発者の中には、私にアドバイスをくれる人もいると思います。

ライブでテストしたい場合は、次の方法で確認できます。

http://goo.gl/YpXyPl

4

1 に答える 1

2

テストするとき[.WebGLRenderingContext]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete' 77.246.234.123:8893/plane/:1、しかし、少なくともテクスチャをレンダリングするので、それは別のことかもしれません。

また、ビューポートは 300 x 150 のようです。キャンバス レンダリングの幅/高さが、html ページ内の幅/高さと一致しません。これを試して：

function updateCanvasSize(canvas)
{
    if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight)
    {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
        //might want to update the projection matrix to fix the new aspect ratio too
    }
}

そして、描画または更新機能で（これがパフォーマンスに影響を与えるとは思えません）...

var canvas = document.getElementById("canvas-main"); //or store "canvas" globally
updateCanvasSize(canvas);

webGLStart が呼び出された時点で、何らかの理由でキャンバスが実際には 300x150 であるため、正しくないキャンバス サイズが発生します。1. 実際には固定サイズのレンダー ターゲットが必要な場合 (キャンバスの幅/高さをピクセル単位で指定し、すべて問題ありません)、または 2. ウィンドウ全体を占めるようにしたい場合。処理する必要があります (js にはおそらく、ポーリングの代わりに使用できるサイズ変更イベントがあります)。

于 2013-09-18T11:00:26.610 に答える