mirror of
https://github.com/servo/servo.git
synced 2025-10-01 00:59:15 +01:00
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:
commit
3282174a99
31 changed files with 162 additions and 81 deletions
|
@ -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": {
|
||||
|
|
4
tests/wpt/mozilla/meta/mozilla/webgl/clearcolor.html.ini
Normal file
4
tests/wpt/mozilla/meta/mozilla/webgl/clearcolor.html.ini
Normal file
|
@ -0,0 +1,4 @@
|
|||
[clearcolor.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
|
@ -0,0 +1,4 @@
|
|||
[draw_arrays_simple.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
|
@ -0,0 +1,4 @@
|
|||
[tex_image_2d_canvas.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
|
@ -0,0 +1,4 @@
|
|||
[tex_image_2d_canvas2d.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
|
@ -0,0 +1,4 @@
|
|||
[tex_image_2d_canvas_no_context.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
|
@ -0,0 +1,4 @@
|
|||
[tex_image_2d_simple.html]
|
||||
type: testharness
|
||||
disabled:
|
||||
if os == "linux": https://github.com/servo/servo/issues/7931
|
25
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor.html
Normal file
25
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor.html
Normal 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>
|
20
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor_ref.html
Normal file
20
tests/wpt/mozilla/tests/mozilla/webgl/clearcolor_ref.html
Normal 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>
|
|
@ -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>
|
|
@ -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>
|
BIN
tests/wpt/mozilla/tests/mozilla/webgl/img/rust-logo-256x256.png
Normal file
BIN
tests/wpt/mozilla/tests/mozilla/webgl/img/rust-logo-256x256.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 36 KiB |
111
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas.html
Normal file
111
tests/wpt/mozilla/tests/mozilla/webgl/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/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_canvas2d.html
Normal file
111
tests/wpt/mozilla/tests/mozilla/webgl/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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
114
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_simple.html
Normal file
114
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_simple.html
Normal 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>
|
|
@ -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">
|
Loading…
Add table
Add a link
Reference in a new issue