Как заставить WebGL отображать фиктивное изображение в этой реализации? - PullRequest
Новая
       14

Как заставить WebGL отображать фиктивное изображение в этой реализации?

0 голосов
/ 04 апреля 2020

Я получаю WebGL для инициализации и все, следующий код не выдает ошибки, но мое фиктивное изображение (abView) никогда не отображается в пространстве экрана, я могу только заставить пространство клипа работать. Вот мой код для отображения изображения. Используется исправленная версия Blazor.Extensions.Canvas.WebGL 

//Convert clip space to pixels
await GL.ViewportAsync(0, 0, 1280, 720);
//Fill viewport with red
await GL.ClearColorAsync(1.0f, 0.0f, 0.0f, 1.0f);
//await GL.ClearAsync(BufferBits.COLOR_BUFFER_BIT);

//Create texture holder
WebGLTexture glTex = await GL.CreateTextureAsync();

//Create image info
uint[] abView = new uint[64 * 64]; 


for(var i = 0; i < abView.Length; i++){ //Row
  abView[i] = (uint)255 << 24; // R
  abView[i] = abView[i] | (0 << 16); //G
  abView[i] = abView[i] | (255 << 8); //B
  abView[i] = abView[i] | 128; //A
}

//Load image info in memory
await GL.BindTextureAsync(TextureType.TEXTURE_2D, glTex);
await GL.TexImage2DAsync(Texture2DType.TEXTURE_2D, 0, PixelFormat.RGBA, 64, 64, 0, PixelFormat.RGBA, PixelType.UNSIGNED_BYTE, abView);
//abView is transformed into a Uint8Array through the Blazor extension, hence UNSIGNED_BYTE working

//Do not assume textures are a power of 2
await GL.TexParameterAsync(TextureType.TEXTURE_2D, TextureParameter.TEXTURE_WRAP_S, 33071);
await GL.TexParameterAsync(TextureType.TEXTURE_2D, TextureParameter.TEXTURE_WRAP_T, 33071);
await GL.TexParameterAsync(TextureType.TEXTURE_2D, TextureParameter.TEXTURE_MIN_FILTER, 9729);


//////Display image
await GL.UseProgramAsync(program);

//Vertex
await GL.BindBufferAsync(BufferType.ARRAY_BUFFER, texPositionBuffer);
await GL.EnableVertexAttribArrayAsync((uint)positionLocation);
await GL.VertexAttribPointerAsync((uint)positionLocation, 2, DataType.FLOAT, false, 0, 0);

//Fragment
await GL.BindBufferAsync(BufferType.ARRAY_BUFFER, texcoordBuffer);
await GL.EnableVertexAttribArrayAsync((uint)texcoordLocation);
await GL.VertexAttribPointerAsync((uint)texcoordLocation, 2, DataType.FLOAT, false, 0, 0);

//The render target's matrix
float[] matrix = await M4.Computations.Orthographic(0, 1280, 720, 0, -1, 1);
matrix = await M4.Computations.Translate(matrix, 20, 20, 0);
matrix = await M4.Computations.Scale(matrix, 64, 64, 0);

await GL.UniformMatrixAsync(matrixLocation, false, matrix);

//The texture's matrix
var texMatrix = await M4.Computations.Translation(0,0,0);
texMatrix = await M4.Computations.Scale(texMatrix, 1, 1, 0);

await GL.UniformMatrixAsync(textureMatrixLocation, false, texMatrix);


await GL.BeginBatchAsync();

//Clear canvas
await GL.ClearAsync(BufferBits.COLOR_BUFFER_BIT);

//Draw from point 0?
await GL.UniformAsync(textureLocation, 0);

//Finally, draw triangles as the image
await GL.DrawArraysAsync(Primitive.TRIANGLES, 0, 6);
await GL.EndBatchAsync();

Вот вершинный шейдер: 

attribute vec4 positionLocation;

attribute vec2 texcoordLocation;

uniform mat4 matrixLocation;
uniform mat4 textureMatrixLocation;

varying vec2 v_texcoord;

void main(void) {
gl_Position = matrixLocation * positionLocation;
v_texcoord = (textureMatrixLocation * vec4(texcoordLocation, 0, 1)).xy;
}

И фрагментный шейдер: 

precision mediump float;

varying vec2 v_texcoord;

uniform sampler2D textureLocation;

void main(void) {
gl_FragColor = texture2D(textureLocation, v_texcoord);
}

Это мои данные вершины: 

  texPositionBuffer = await GL.CreateBufferAsync(); //bound to positionLocation
  await GL.BindBufferAsync(BufferType.ARRAY_BUFFER, texPositionBuffer);
  float[] positions = {0F, 0F, 0F, 1F, 1F, 0F, 1F, 0F, 0F, 1F, 1F, 1F};
  await GL.BufferDataAsync(BufferType.ARRAY_BUFFER, positions, BufferUsageHint.STATIC_DRAW);

  texcoordBuffer = await GL.CreateBufferAsync(); //bound to texcoordLocation
  await GL.BindBufferAsync(BufferType.ARRAY_BUFFER, texcoordBuffer);
  float[] texcoords = {0F, 0F, 0F, 1F, 1F, 0F, 1F, 0F, 0F, 1F, 1F, 1F};
  await GL.BufferDataAsync(BufferType.ARRAY_BUFFER, texcoords, BufferUsageHint.STATIC_DRAW);
...