WebGL 텍스처를 RGBA 값으로 생성합니다.

Question

this 대답을 기반으로이 작업을 시도했습니다. 이것은 내 코드입니다.

<canvas id='canvas' width='500' height='500' style='border: solid 1px black'></canvas> 

<script> 
     var canvas = document.getElementById("canvas"); 
     var gl = canvas.getContext("webgl"); 
     var texture = gl.createTexture(); 
     var data = new Uint8Array([128, 128, 0, 1]); 
     var texture = gl.createTexture(); 
     gl.bindTexture(gl.TEXTURE_2D, texture); 
     gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 
     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, texture); 
</script> 

그러나 내가 볼 수있는 것은 검은 색 외곽선이있는 흰색 상자입니다. 내가 뭘 잘못하고 있니?

감사합니다.

Answer 1

거기에있는 코드는 텍스처를 생성하고 GPU 메모리에로드합니다. 그래서 실제로 캔버스에 아무것도 그리지 않고 있습니다.

화면에서 텍스처를 얻으려면 더 많은 것들이 필요합니다. 여기에 나머지 코드가 추가됩니다

// helper function for loading shader sources 
 
function loadShaderSource(gl, id) { 
 
    var script = document.getElementById(id); 
 
    var source = ""; 
 

 
    var child = script.firstChild; 
 
    while (child) { 
 
    if (child.nodeType == child.TEXT_NODE) { 
 
     source += child.textContent; 
 
    } 
 

 
    child = child.nextSibling; 
 
    } 
 

 
    return source; 
 
} 
 

 
// setup an OpenGL context 
 
var canvas = document.getElementById("canvas"); 
 
var gl = canvas.getContext("webgl"); 
 

 
// build the vertex shader 
 
var vertexShaderSource = loadShaderSource(gl, "shader-vertex"); 
 
var vertexShader = gl.createShader(gl.VERTEX_SHADER); 
 
gl.shaderSource(vertexShader, vertexShaderSource); 
 
gl.compileShader(vertexShader); 
 

 
// build the fragment shader 
 
var fragmentShaderSource = loadShaderSource(gl, "shader-fragment"); 
 
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 
 
gl.shaderSource(fragmentShader, fragmentShaderSource); 
 
gl.compileShader(fragmentShader); 
 

 
// build a shader program from the vertex and fragment shader 
 
var shaderProgram = gl.createProgram(); 
 
gl.attachShader(shaderProgram, vertexShader); 
 
gl.attachShader(shaderProgram, fragmentShader); 
 
gl.linkProgram(shaderProgram); 
 
gl.useProgram(shaderProgram); 
 

 
// define vertex positions 
 
var vertexPositions = new Float32Array([ 
 
    1.0, 1.0, 0, // a 
 
    -1.0, 1.0, 0, // b b----a 
 
    1.0, -1.0, 0, // c | | 
 
    -1.0, 1.0, 0, // b | | 
 
    -1.0, -1.0, 0, // d d----c 
 
    1.0, -1.0, 0 // c 
 
]); 
 

 
// send the vertex positions to the GPU 
 
var vertexBuffer = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
 
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW); 
 

 

 
// define vertex texcoords 
 
var vertexTexcoords = new Float32Array([ 
 
    1.0, 0.0, // a 
 
    0.0, 0.0, // b 
 
    1.0, 1.0, // c 
 
    0.0, 0.0, // b 
 
    0.0, 1.0, // d 
 
    1.0, 1.0 // c 
 
]); 
 

 
// send the vertex texcoords to the GPU 
 
var texcoordBuffer = gl.createBuffer(); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); 
 
gl.bufferData(gl.ARRAY_BUFFER, vertexTexcoords, gl.STATIC_DRAW); 
 

 
// wire up the shader program to the vertex position data 
 
var positionAttribute = gl.getAttribLocation(shaderProgram, "position"); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); 
 
gl.enableVertexAttribArray(positionAttribute); 
 
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0); 
 

 
// wire up the shader program to the vertex texcoord data 
 
var texcoordAttribute = gl.getAttribLocation(shaderProgram, "texcoord"); 
 
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer); 
 
gl.enableVertexAttribArray(texcoordAttribute); 
 
gl.vertexAttribPointer(texcoordAttribute, 2, gl.FLOAT, false, 0, 0); 
 

 
// generate and send texture data to the GPU 
 
var textureData = new Uint8Array([128, 128, 0, 255]); 
 
var texture = gl.createTexture(); 
 
gl.bindTexture(gl.TEXTURE_2D, texture); 
 
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, textureData); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
 

 
// wire up the shader program to the texture data 
 
var imageUniform = gl.getUniformLocation(shaderProgram, "image") 
 
gl.uniform1i(imageUniform, 0); 
 

 
// tell the GPU to draw 
 
gl.drawArrays(gl.TRIANGLES, 0, 6);

<canvas id='canvas' width='300' height='200' style='border: solid 1px black'></canvas> 
 

 
    <script id="shader-vertex" type="x-shader/x-vertex"> 
 
     attribute vec3 position; 
 
     attribute vec2 texcoord; 
 
     varying highp vec2 uv; 
 

 
     void main() { 
 
     gl_Position = vec4(position, 1); 
 
     uv = texcoord; 
 
     } 
 
    </script> 
 

 
    <script id="shader-fragment" type="x-shader/x-fragment"> 
 
     varying highp vec2 uv; 
 
     uniform sampler2D image; 
 

 
     void main() { 
 
     gl_FragColor = texture2D(image, uv); 
 
     } 
 
    </script>

나는 그것이 내가 몇 가지 가이드를 읽어 보시기 바랍니다 grok 수하는 정보의 톤입니다 알고 있습니다. 시작하기 좋은 곳은 MDN: Getting started with WebGL 일 수 있습니다.