Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webgl: Implement the pending texImage2D overload, and add more validation #10443

Merged
merged 12 commits into from Apr 22, 2016

webgl: Add test for Texture2d's ArrayBufferView overload

  • Loading branch information
emilio committed Apr 19, 2016
commit 5eb59935e3dcd1be1ebb41c8fadf449473bc28c4
@@ -5803,6 +5803,18 @@
"url": "/_mozilla/mozilla/webgl/draw_arrays_simple.html"
}
],
"mozilla/webgl/tex_image_2d_abv.html": [
{
"path": "mozilla/webgl/tex_image_2d_abv.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_abv_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_abv.html"
}
],
"mozilla/webgl/tex_image_2d_canvas.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas.html",
@@ -12465,6 +12477,18 @@
"url": "/_mozilla/mozilla/webgl/draw_arrays_simple.html"
}
],
"mozilla/webgl/tex_image_2d_abv.html": [
{
"path": "mozilla/webgl/tex_image_2d_abv.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_abv_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_abv.html"
}
],
"mozilla/webgl/tex_image_2d_canvas.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas.html",
@@ -0,0 +1,106 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL: texImage2D with Array Buffer View</title>
<link rel="match" href="tex_image_2d_abv_ref.html">
<style>html, body { margin: 0; padding: 0; }</style>
<!-- This reftest should show a 512x512px red square -->
<canvas id="c" width="512" height="512"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
precision mediump float;
attribute vec2 a_texCoord;
attribute vec2 a_position;
varying vec2 v_texCoord;

void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
</script>

<script id="fragment_shader" type="x-shader/x-fragment">
precision mediump float;
uniform sampler2D u_image;
varying vec2 v_texCoord;
void main() {
gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
<script>
var gl = document.getElementById('c').getContext('webgl');

// Clear black
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT);

// Create the program
var vertex_shader = gl.createShader(gl.VERTEX_SHADER),
fragment_shader = gl.createShader(gl.FRAGMENT_SHADER),
program = gl.createProgram();

gl.shaderSource(vertex_shader,
document.getElementById('vertex_shader').textContent);
gl.shaderSource(fragment_shader,
document.getElementById('fragment_shader').textContent);
gl.compileShader(vertex_shader);
gl.compileShader(fragment_shader);
gl.attachShader(program, vertex_shader);
gl.attachShader(program, fragment_shader);
console.log(gl.getShaderInfoLog(vertex_shader));
console.log(gl.getShaderInfoLog(fragment_shader));
gl.linkProgram(program);
gl.useProgram(program);

// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
var tex_position = gl.getAttribLocation(program, "a_texCoord");

var texture_coordinates = new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0
]);

var texture_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer);
gl.bufferData(gl.ARRAY_BUFFER, texture_coordinates, gl.STATIC_DRAW);
gl.enableVertexAttribArray(tex_position);
gl.vertexAttribPointer(tex_position, 2, gl.FLOAT, false, 0, 0);

var square_data = new Float32Array([
-1.0, 1.0, // top left
1.0, 1.0, // top right
-1.0, -1.0, // bottom left
-1.0, -1.0, // bottom left
1.0, 1.0, // top right
1.0, -1.0 // bottom right
]);

// Create a buffer for the square with the square
// vertex data
var square_buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, square_buffer);
gl.bufferData(gl.ARRAY_BUFFER, square_data, gl.STATIC_DRAW);

gl.enableVertexAttribArray(position);
gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);

// Load the texture and draw
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
console.log(gl.getError() == gl.NO_ERROR);


// Create a 1x1 red texture, but repeated.
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0,
gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255]));
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
console.log(gl.getError() == gl.NO_ERROR);

gl.drawArrays(gl.TRIANGLES, 0, 6);
</script>
@@ -0,0 +1,13 @@
<!doctype html>
<meta charset="utf-8">
<title>ref: WebGL: texImage2D with Array Buffer View</title>
<style>
html, body { margin: 0; padding: 0; }
div {
width: 512px;
height: 512px;
background: red;
}
</style>
<!-- This reftest should show a 512x512px red square -->
<div></div>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.