mirror of
https://github.com/servo/servo.git
synced 2025-08-05 21:50:18 +01:00
webgl: finish, flush, detachShader, generateMipmap, Uniform1i
This commit is contained in:
Connor Brewster
parent
d0f692b2c5
commit
3fd7634f54
14 changed files with 634 additions and 12 deletions
BIN
tests/html/rust-power-of-two.png
Normal file
BIN
tests/html/rust-power-of-two.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
160
tests/html/test_webgl_texture_mipmaps.html
Normal file
160
tests/html/test_webgl_texture_mipmaps.html
Normal file
|
|
@ -0,0 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>WebGL Texture Mipmap</title>
|
||||
</head>
|
||||
<body>
|
||||
<div style="text-align: center">
|
||||
SE<canvas id="canvas" width="128" height="128"></canvas>VO
|
||||
</div>
|
||||
<script id="vertexshader" type="x-shader">
|
||||
attribute vec2 aVertexPosition;
|
||||
attribute vec2 aTextureCoord;
|
||||
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
uniform float uTime;
|
||||
|
||||
void main() {
|
||||
vTextureCoord = aTextureCoord;
|
||||
mat4 rotMat = mat4(sin(uTime), 0.0, 0.0, 0.0,
|
||||
0.0, sin(uTime), 0.0, 0.0,
|
||||
0.0, 0.0, 1.0, 0.0,
|
||||
0.0, 0.0, 0.0, 1.0);
|
||||
|
||||
gl_Position = rotMat * vec4(aVertexPosition, 0.0, 1.0);
|
||||
}
|
||||
</script>
|
||||
<script id="fragmentshader" type="x-shader">
|
||||
precision mediump float;
|
||||
varying vec2 vTextureCoord;
|
||||
|
||||
uniform sampler2D uSampler;
|
||||
|
||||
void main() {
|
||||
gl_FragColor = texture2D(uSampler, vTextureCoord);
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
|
||||
var canvas;
|
||||
function initWebGL()
|
||||
{
|
||||
canvas = document.getElementById("canvas");
|
||||
var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
|
||||
if (!gl) return null; // can't initialize WebGL
|
||||
return gl;
|
||||
}
|
||||
|
||||
var gl = initWebGL();
|
||||
|
||||
// Setup Shaders:
|
||||
var v = document.getElementById("vertexshader").firstChild.nodeValue;
|
||||
var f = document.getElementById("fragmentshader").firstChild.nodeValue;
|
||||
|
||||
var vs = gl.createShader(gl.VERTEX_SHADER);
|
||||
gl.shaderSource(vs, v);
|
||||
gl.compileShader(vs);
|
||||
|
||||
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS)) {
|
||||
console.log(gl.getShaderInfoLog(vs));
|
||||
}
|
||||
|
||||
var fs = gl.createShader(gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(fs, f);
|
||||
gl.compileShader(fs);
|
||||
|
||||
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS)) {
|
||||
console.log(gl.getShaderInfoLog(fs));
|
||||
}
|
||||
|
||||
program = gl.createProgram();
|
||||
gl.attachShader(program, vs);
|
||||
gl.attachShader(program, fs);
|
||||
gl.linkProgram(program);
|
||||
|
||||
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
||||
console.log(gl.getProgramInfoLog(program));
|
||||
}
|
||||
|
||||
gl.useProgram(program);
|
||||
|
||||
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
|
||||
gl.enableVertexAttribArray(program.aVertexPosition);
|
||||
|
||||
program.aTextureCoord = gl.getAttribLocation(program, "aTextureCoord");
|
||||
gl.enableVertexAttribArray(program.aTextureCoord);
|
||||
|
||||
var rustTexture = gl.createTexture();
|
||||
var rustImage = new Image();
|
||||
rustImage.onload = function() { handleTextureLoaded(rustImage, rustTexture); }
|
||||
rustImage.src = "rust-power-of-two.png";
|
||||
|
||||
|
||||
// Setup Geometry
|
||||
var vertices = new Float32Array([
|
||||
-1.0, -1.0,
|
||||
-1.0, 1.0,
|
||||
1.0, -1.0,
|
||||
1.0, 1.0 // Square-Coordinates
|
||||
]);
|
||||
|
||||
var textureCoords = new Float32Array([
|
||||
0.0, 0.0,
|
||||
0.0, 1.0,
|
||||
1.0, 0.0,
|
||||
1.0, 1.0
|
||||
]);
|
||||
|
||||
vbuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
|
||||
|
||||
uvbuffer = gl.createBuffer();
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, uvbuffer);
|
||||
gl.bufferData(gl.ARRAY_BUFFER, textureCoords, gl.STATIC_DRAW);
|
||||
|
||||
itemSize = 2; // we have 2 coordinates (x,y)
|
||||
numItems = vertices.length / itemSize; // number of vertices
|
||||
|
||||
// Viewport
|
||||
gl.viewport(0, 0, canvas.width, canvas.height);
|
||||
|
||||
program.time = gl.getUniformLocation(program, "uTime");
|
||||
|
||||
var start_time = new Date().getTime() / 1000;
|
||||
|
||||
setInterval(function () {
|
||||
gl.clearColor(1, 0, 0, 1);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
// Draw
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
|
||||
gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);
|
||||
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, uvbuffer);
|
||||
gl.vertexAttribPointer(program.aTextureCoord, 2, gl.FLOAT, false, 0, 0);
|
||||
|
||||
gl.activeTexture(gl.TEXTURE0);
|
||||
gl.bindTexture(gl.TEXTURE_2D, rustTexture);
|
||||
var dt = new Date().getTime() / 1000 - start_time;
|
||||
gl.uniform1f(program.time, dt);
|
||||
|
||||
gl.drawArrays(gl.TRIANGLE_STRIP, 0, numItems);
|
||||
}, 15);
|
||||
|
||||
function handleTextureLoaded(image, texture) {
|
||||
console.log("handleTextureLoaded, image = " + image);
|
||||
gl.bindTexture(gl.TEXTURE_2D, texture);
|
||||
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
|
||||
gl.generateMipmap(gl.TEXTURE_2D);
|
||||
gl.bindTexture(gl.TEXTURE_2D, null);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -5635,6 +5635,18 @@
|
|||
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context.html"
|
||||
}
|
||||
],
|
||||
"mozilla/webgl/tex_image_2d_mipmap.html": [
|
||||
{
|
||||
"path": "mozilla/webgl/tex_image_2d_mipmap.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/mozilla/webgl/tex_image_2d_simple_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/mozilla/webgl/tex_image_2d_mipmap.html"
|
||||
}
|
||||
],
|
||||
"mozilla/webgl/tex_image_2d_simple.html": [
|
||||
{
|
||||
"path": "mozilla/webgl/tex_image_2d_simple.html",
|
||||
|
|
@ -12069,6 +12081,18 @@
|
|||
"url": "/_mozilla/mozilla/webgl/tex_image_2d_canvas_no_context.html"
|
||||
}
|
||||
],
|
||||
"mozilla/webgl/tex_image_2d_mipmap.html": [
|
||||
{
|
||||
"path": "mozilla/webgl/tex_image_2d_mipmap.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/mozilla/webgl/tex_image_2d_simple_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/mozilla/webgl/tex_image_2d_mipmap.html"
|
||||
}
|
||||
],
|
||||
"mozilla/webgl/tex_image_2d_simple.html": [
|
||||
{
|
||||
"path": "mozilla/webgl/tex_image_2d_simple.html",
|
||||
|
|
|
|||
116
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_mipmap.html
Normal file
116
tests/wpt/mozilla/tests/mozilla/webgl/tex_image_2d_mipmap.html
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
<!doctype html>
|
||||
<html class="reftest-wait">
|
||||
<link rel="match" href="tex_image_2d_simple_ref.html"></link>
|
||||
<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_MAG_FILTER, gl.LINEAR);
|
||||
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
|
||||
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
|
||||
gl.generateMipmap(gl.TEXTURE_2D);
|
||||
|
||||
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