mirror of
https://github.com/servo/servo.git
synced 2025-08-07 14:35:33 +01:00
webgl: Add tests for canvas texturing
This commit is contained in:
Emilio Cobos Álvarez
parent
e2b7a01055
commit
5d7d745ab4
4 changed files with 235 additions and 0 deletions
|
|
@ -402,6 +402,8 @@ prefs:"layout.viewport.enabled" == viewport_rule.html viewport_rule_ref.html
|
||||||
|
|
||||||
== webgl-context/clearcolor.html webgl-context/clearcolor_ref.html
|
== webgl-context/clearcolor.html webgl-context/clearcolor_ref.html
|
||||||
== webgl-context/draw_arrays_simple.html webgl-context/draw_arrays_simple_ref.html
|
== webgl-context/draw_arrays_simple.html webgl-context/draw_arrays_simple_ref.html
|
||||||
|
== webgl-context/tex_image_2d_canvas.html webgl-context/tex_image_2d_canvas_ref.html
|
||||||
|
== webgl-context/tex_image_2d_canvas2d.html webgl-context/tex_image_2d_canvas_ref.html
|
||||||
== webgl-context/tex_image_2d_simple.html webgl-context/tex_image_2d_simple_ref.html
|
== webgl-context/tex_image_2d_simple.html webgl-context/tex_image_2d_simple_ref.html
|
||||||
|
|
||||||
flaky_macos == white_space_intrinsic_sizes_a.html white_space_intrinsic_sizes_ref.html
|
flaky_macos == white_space_intrinsic_sizes_a.html white_space_intrinsic_sizes_ref.html
|
||||||
|
|
|
||||||
111
tests/ref/webgl-context/tex_image_2d_canvas.html
Normal file
111
tests/ref/webgl-context/tex_image_2d_canvas.html
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>WebGL texture test</title>
|
||||||
|
<!--
|
||||||
|
This test should show a 256x256 red square
|
||||||
|
-->
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0 }
|
||||||
|
</style>
|
||||||
|
<canvas id="c" width="256" height="256"></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>
|
||||||
|
// We paint an offscreen red square and pass it as a texture to the on-screen canvas
|
||||||
|
var first_context = document.createElement('canvas').getContext('webgl');
|
||||||
|
|
||||||
|
first_context.canvas.width = first_context.canvas.height = 256;
|
||||||
|
first_context.clearColor(1, 0, 0, 1);
|
||||||
|
first_context.clear(first_context.COLOR_BUFFER_BIT);
|
||||||
|
|
||||||
|
var gl = document.getElementById('c').getContext('webgl');
|
||||||
|
|
||||||
|
// Clear white
|
||||||
|
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);
|
||||||
|
|
||||||
|
// pass the first canvas as texture
|
||||||
|
var tex = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, first_context.canvas);
|
||||||
|
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||||
|
console.log(gl.getError() == gl.NO_ERROR);
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
111
tests/ref/webgl-context/tex_image_2d_canvas2d.html
Normal file
111
tests/ref/webgl-context/tex_image_2d_canvas2d.html
Normal file
|
|
@ -0,0 +1,111 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>WebGL texture test</title>
|
||||||
|
<!--
|
||||||
|
This test should show a 256x256 red square
|
||||||
|
-->
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0 }
|
||||||
|
</style>
|
||||||
|
<canvas id="c" width="256" height="256"></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>
|
||||||
|
// We paint an offscreen red square with a 2d canvas and pass it as a texture to the on-screen canvas
|
||||||
|
var first_context = document.createElement('canvas').getContext('2d');
|
||||||
|
|
||||||
|
first_context.canvas.width = first_context.canvas.height = 256;
|
||||||
|
first_context.fillStyle = "red";
|
||||||
|
first_context.fillRect(0, 0, 256, 256);
|
||||||
|
|
||||||
|
var gl = document.getElementById('c').getContext('webgl');
|
||||||
|
|
||||||
|
// Clear white
|
||||||
|
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);
|
||||||
|
|
||||||
|
// pass the first canvas as texture
|
||||||
|
var tex = gl.createTexture();
|
||||||
|
gl.bindTexture(gl.TEXTURE_2D, tex);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
||||||
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
||||||
|
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, first_context.canvas);
|
||||||
|
|
||||||
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
||||||
|
console.log(gl.getError() == gl.NO_ERROR);
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
11
tests/ref/webgl-context/tex_image_2d_canvas_ref.html
Normal file
11
tests/ref/webgl-context/tex_image_2d_canvas_ref.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>WebGL texture test</title>
|
||||||
|
<!--
|
||||||
|
This test should show a 256x256 red square
|
||||||
|
-->
|
||||||
|
<style>
|
||||||
|
html, body { margin: 0 }
|
||||||
|
div { width: 256px; height: 256px; background: red; }
|
||||||
|
</style>
|
||||||
|
<div></div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue