1

WebGL 3D シーンで背景画像のみを描画しようとするコードを作成しました。コードの関連部分は次のとおりです。

<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec2 vTexCoord;

uniform sampler2D uSampler;

void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying highp vec2 vTexCoord;

void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTexCoord = aTextureCoord;
}
</script>

<script>
var VBack = [
    -24.0,  0.0, 0.0,
     24.0,  0.0, 0.0,
     24.0, 48.0, 0.0,
    -24.0, 48.0, 0.0
    ];

var vTBack = [
    0.0, 0.0,
    1.0, 0.0,
    1.0, 1.0,
    0.0, 1.0
    ];

var VBuffer;
var vTBuffer;

function initMatrix() {
    orthoMatrix = makeOrtho(-24.0, 24.0, 0.0, 48.0, 20.0, -20.0);    // From glUtils.js
    mvMatrix = Matrix.I(4);
    ...
}   

function handleBkTex(tex) {
    GL.bindTexture(GL.TEXTURE_2D, tex);
    GL.pixelStorei(GL.UNPACK_FLIP_Y_WEBGL, true);
    GL.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, GL.RGBA, GL.UNSIGNED_BYTE, tex.Img);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MAG_FILTER, GL.NEAREST);
    GL.texParameteri(GL.TEXTURE_2D, GL.TEXTURE_MIN_FILTER, GL.NEAREST);
    GL.bindTexture(GL.TEXTURE_2D, null);
}

function initBkgnd() {
    backTex = GL.createTexture();
    backTex.Img = new Image();
    backTex.Img.onload = function() {
        handleBkTex(backTex);
    }
    backTex.Img.src = "Bkgnd.jpg";
}

function drawBkgnd() {
    GL.bindBuffer(GL.ARRAY_BUFFER, VBuffer);
    GL.vertexAttribPointer(vertexPositionAttribute, 3, GL.FLOAT, false, 0, 0);

    GL.bindBuffer(GL.ARRAY_BUFFER, vTBuffer);
    GL.vertexAttribPointer(texCoordAttribute, 2, GL.FLOAT, false, 0, 0);

    GL.activeTexture(GL.TEXTURE0);
    GL.bindTexture(GL.TEXTURE_2D, backTex);
    GL.uniform1i(GL.getUniformLocation(shaderProgram, "uSampler"), 0);

    GL.drawArrays(GL.TRIANGLE_STRIP, 0, 4);
}


function start() {
    var canvas = document.getElementById("glcanvas");
    initWebGL(canvas);

    if (GL) {
        initShaders();
        initBuffers();
        initMatrix();
        initBkgnd();
        drawBkgnd();
    }
}

キャンバスのサイズは512 x 512で、画像のサイズと同じです。しかし、キャンバスに正しい画像が表示されません。これを正しく行う方法は？

4

2 に答える 2

1

コードにいくつかの小さなエラーが見つかりました。ここにそれらがあります：

  • WebGL シーンは常に再描画する必要があります。したがって、関数はordrawBkgnd()を使用して繰り返し呼び出す必要があります。setInterval()requestAnimationFrame()

  • drawArrays()withを使用しGL_TRIANGLE_STRIPて長方形を正しく描画するには、頂点の順序を次のようにする必要があります。

    *2        *3


*0        *1

    または同等の注文。

    *3        *2


*0        *1

    したがって、頂点の順序を次のVBackように変更する必要があります。

    var VBack = [
    -24.0,  0.0, 0.0,
     24.0,  0.0, 0.0,
    -24.0, 48.0, 0.0
     24.0, 48.0, 0.0,
];

    また、頂点の順序vTBackもそれに応じて変更する必要があります。

于 2013-10-09T03:51:23.373 に答える