WebGL でのテクスチャの使用

// // テクスチャを初期化して画像を読み込みます。 // 画像の読み込みが完了したら、テクスチャにコピーします。 // function loadTexture(gl, url) { const texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); // 画像はインターネットでダウンロードする必要があるため、 // 準備ができるまで少し時間がかかることがあります。 // それまではテクスチャにピクセルを 1 つだけ入れて、すぐに // 使用できるようにしておきます。画像のダウンロードが完了 // したら、画像のコンテンツでテクスチャを更新します。 const level = 0; const internalFormat = gl.RGBA; const width = 1; const height = 1; const border = 0; const srcFormat = gl.RGBA; const srcType = gl.UNSIGNED_BYTE; const pixel = new Uint8Array([0, 0, 255, 255]); // 不透明の青 gl.texImage2D( gl.TEXTURE_2D, level, internalFormat, width, height, border, srcFormat, srcType, pixel, ); const image = new Image(); image.onload = () => { gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D( gl.TEXTURE_2D, level, internalFormat, srcFormat, srcType, image, ); // WebGL1 は画像の大きさが 2 のべき乗であるかどうかで // 要求されるものが異なるので、画像の両方の軸が 2 の // べき乗かどうかを調べます。 if (isPowerOf2(image.width) && isPowerOf2(image.height)) { // 2 のべき乗なので、 mips を作成します。 gl.generateMipmap(gl.TEXTURE_2D); } else { // 2 のべき乗ではないので、 mips をオフにして、 // エッジにクランプするようにラッピングを設定します。 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); } }; image.src = url; return texture; } function isPowerOf2(value) { return (value & (value - 1)) === 0; } 

// gl.LINEAR の代わりに gl.NEAREST も可能。ミップマップは不可 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); // S 座標のラッピング（繰り返し）を禁止 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); // T 座標のラッピング（繰り返し）を禁止 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 

// テクスチャの読み込み const texture = loadTexture(gl, "cubetexture.png"); // 画像ピクセルを WebGL が期待する下から上への順序に反転させる gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 

function initTextureBuffer(gl) { const textureCoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, textureCoordBuffer); const textureCoordinates = [ // 前面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // 背面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // 上面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // 下面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // 右面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, // 左面 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0, ]; gl.bufferData( gl.ARRAY_BUFFER, new Float32Array(textureCoordinates), gl.STATIC_DRAW, ); return textureCoordBuffer; } 

const textureCoordBuffer = initTextureBuffer(gl); 

return { position: positionBuffer, textureCoord: textureCoordBuffer, indices: indexBuffer, }; 

const vsSource = ` attribute vec4 aVertexPosition; attribute vec2 aTextureCoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; varying highp vec2 vTextureCoord; void main(void) { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; vTextureCoord = aTextureCoord; } `; 

const fsSource = ` varying highp vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vTextureCoord); } `; 

const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"), textureCoord: gl.getAttribLocation(shaderProgram, "aTextureCoord"), }, uniformLocations: { projectionMatrix: gl.getUniformLocation(shaderProgram, "uProjectionMatrix"), modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"), uSampler: gl.getUniformLocation(shaderProgram, "uSampler"), }, }; 

// テクスチャ座標をバッファーから取り出す方法を webgl に伝える。 function setTextureAttribute(gl, buffers, programInfo) { const num = 2; // すべての座標は 2 つの値からなる const type = gl.FLOAT; // バッファー内のデータは 32 ビット浮動小数点数 const normalize = false; // 正規化なし const stride = 0; // あるセットから次のセットまで、何バイトで移動するか const offset = 0; // バッファ内の何バイトから開始するか gl.bindBuffer(gl.ARRAY_BUFFER, buffers.textureCoord); gl.vertexAttribPointer( programInfo.attribLocations.textureCoord, num, type, normalize, stride, offset, ); gl.enableVertexAttribArray(programInfo.attribLocations.textureCoord); } 

setTextureAttribute(gl, buffers, programInfo); 

// テクスチャユニット 0 に影響を与えたいことを WebGL に伝える gl.activeTexture(gl.TEXTURE0); // テクスチャをテクスチャユニット 0 にバインドする gl.bindTexture(gl.TEXTURE_2D, texture); // テクスチャをテクスチャユニット 0 にバインドすることをシェーダーに伝える gl.uniform1i(programInfo.uniformLocations.uSampler, 0); 

function drawScene(gl, programInfo, buffers, texture, cubeRotation) { // … } 

drawScene(gl, programInfo, buffers, texture, cubeRotation);