Auto merge of #8291 - ecoal95:webgl-drop, r=jdm

Add destructors to some WebGL objects, remove duplicated glutin dependency and try to enable the webgl reftests

The first commit allows to cleanup the gl resources of the webgl task earlier if they aren't being used.
Right now all resources were cleaned up when the context was destroyed, so I think this is
a slightly better approach.

The second commit bumps rust-offscreen-rendering-context to remove the duplicated glutin dependency.

The third one tries to reenable the webgl reftests.
Since the errored builds are deleted, It's the only way I can try to troubleshoot it.

<!-- Reviewable:start -->
[<img src="https://reviewable.io/review_button.png" height=40 alt="Review on Reviewable"/>](https://reviewable.io/reviews/servo/servo/8291)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2015-11-02 18:52:33 +05:30
commit 3282174a99
31 changed files with 162 additions and 81 deletions

View file

@ -4078,6 +4078,78 @@
],
"url": "/_mozilla/mozilla/canvas/drawimage_html_image_9.html"
}
],
"mozilla/webgl/clearcolor.html": [
{
"path": "mozilla/webgl/clearcolor.html",
"references": [
[
"/_mozilla/mozilla/webgl/clearcolor_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/clearcolor.html"
}
],
"mozilla/webgl/tex_image_2d_canvas_no_context.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas_no_context.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context.html"
}
],
"mozilla/webgl/tex_image_2d_canvas2d.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas2d.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas2d.html"
}
],
"mozilla/webgl/tex_image_2d_canvas.html": [
{
"path": "mozilla/webgl/tex_image_2d_canvas.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_canvas_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas.html"
}
],
"mozilla/webgl/tex_image_2d_simple.html": [
{
"path": "mozilla/webgl/tex_image_2d_simple.html",
"references": [
[
"/_mozilla/mozilla/webgl/tex_image_2d_simple_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/tex_image_2d_simple.html"
}
],
"mozilla/webgl/draw_arrays_simple.html": [
{
"path": "mozilla/webgl/draw_arrays_simple.html",
"references": [
[
"/_mozilla/mozilla/webgl/draw_arrays_simple_ref.html",
"=="
]
],
"url": "/_mozilla/mozilla/webgl/draw_arrays_simple.html"
}
]
},
"testharness": {

View file

@ -0,0 +1,4 @@
[clearcolor.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,4 @@
[draw_arrays_simple.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,4 @@
[tex_image_2d_canvas.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,4 @@
[tex_image_2d_canvas2d.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,4 @@
[tex_image_2d_canvas_no_context.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,4 @@
[tex_image_2d_simple.html]
type: testharness
disabled:
if os == "linux": https://github.com/servo/servo/issues/7931

View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WebGL ClearColor Test</title>
</head>
<style>
html, body {
margin: 0;
}
</style>
<body>
<canvas id="canvas" width="640" height="480"></canvas>
<script type="text/javascript">
var gl = document.getElementById("canvas").getContext("webgl");
gl.clearColor(1.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL ClearColor Test</title>
</head>
<style>
html, body {
margin: 0;
}
#canvas {
width: 640px;
height: 480px;
background-color: red;
}
</style>
<body>
<div id="canvas"></canvas>
</body>
</html>

View file

@ -0,0 +1,70 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL drawArrays test</title>
<!--
This test should generate a 256x256 green square
on a 512x512 canvas
-->
<style>
html, body { margin: 0 }
</style>
<canvas id="c" width="512" height="512"></canvas>
<script id="vertex_shader" type="x-shader/x-vertex">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
</script>
<script id="fragment_shader" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(0, 1, 0, 1); // green
}
</script>
<script>
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);
gl.linkProgram(program);
gl.useProgram(program);
// Get the position from the fragment shader
var position = gl.getAttribLocation(program, "a_position");
// Square as two triangles
var square_data = new Float32Array([
-0.5, 0.5, // top left
0.5, 0.5, // top right
-0.5, -0.5, // bottom left
-0.5, -0.5, // bottom left
0.5, 0.5, // top right
0.5, -0.5 // 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);
gl.drawArrays(gl.TRIANGLES, 0, square_data.length);
</script>

View file

@ -0,0 +1,16 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL drawArrays test</title>
<style>
html, body { margin: 0 }
div {
position: absolute;
left: 128px;
top: 128px;
width: 256px;
height: 256px;
/* Totally green */
background-color: rgb(0, 255, 0);
}
</style>
<div></div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB

View 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>

View 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>

View 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
with a 128x128 white square embedded in the
middle
-->
<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>
// When passed a canvas with size but without context as a texture the
// source should be considered a white bitmap with the given size
var canvas_without_context = document.createElement('canvas');
canvas_without_context.width = canvas_without_context.height = 256;
var gl = document.getElementById('c').getContext('webgl');
// Clear with a non-white color
gl.clearColor(1, 0, 0, 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([
-0.5, 0.5, // top left
0.5, 0.5, // top right
-0.5, -0.5, // bottom left
-0.5, -0.5, // bottom left
0.5, 0.5, // top right
0.5, -0.5 // 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, canvas_without_context);
gl.drawArrays(gl.TRIANGLES, 0, 6);
console.log(gl.getError() == gl.NO_ERROR);
</script>
</html>

View file

@ -0,0 +1,26 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 red square
with a 128x128 white square embedded in the
middle
-->
<style>
html, body { margin: 0 }
.a {
width: 256px;
height: 256px;
background: red;
position: relative;
}
.b {
width: 128px;
height: 128px;
background: white;
position: absolute;
top: 64px;
left: 64px;
}
</style>
<div class="a"><div class="b"></div></div>

View 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>

View file

@ -0,0 +1,114 @@
<!doctype html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 rust logo
-->
<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>
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);
// Load the texture and draw
var image = new Image();
image.width = image.height = 256;
// Base-64 to allow the reftest to finish
image.src = "img/rust-logo-256x256.png";
image.onload = function () {
var tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);
console.log(gl.getError() == gl.NO_ERROR);
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, image);
gl.drawArrays(gl.TRIANGLES, 0, 6);
document.documentElement.classList.remove("reftest-wait");
}
</script>
</html>

View file

@ -0,0 +1,10 @@
<!doctype html>
<meta charset="utf-8">
<title>WebGL texture test</title>
<!--
This test should show a 256x256 rust logo
-->
<style>
html, body { margin: 0 }
</style>
<img src="img/rust-logo-256x256.png">