| Index: canvas-webgl.html
|
| diff --git a/canvas-webgl.html b/canvas-webgl.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..8279dade41150574e82391b7e3348a308ef54b81
|
| --- /dev/null
|
| +++ b/canvas-webgl.html
|
| @@ -0,0 +1,126 @@
|
| +<!DOCTYPE html>
|
| +<style>
|
| +canvas {
|
| + border: 5px solid #000;
|
| +}
|
| +</style>
|
| +<canvas id="c" width="200" height="200"></canvas>
|
| +<canvas id="c2" width="100" height="100"></canvas>
|
| +<button onclick="ofc()">ofc</button>
|
| +<script type="text/javascript">
|
| +const VERTEX_SHADER = `
|
| +precision mediump float;
|
| +attribute vec2 VertexPosition;
|
| +attribute vec2 TextureCoord;
|
| +varying highp vec2 uv;
|
| +void main(void) {
|
| + gl_Position = vec4(VertexPosition.xy, 0.0, 1.0);
|
| + uv = TextureCoord;
|
| +}
|
| +`;
|
| +
|
| +const FRAG_SHADER = `
|
| +precision mediump float;
|
| +uniform sampler2D Sampler;
|
| +varying highp vec2 uv;
|
| +void main() {
|
| + gl_FragColor = texture2D(Sampler, uv.xy);
|
| +}
|
| +`;
|
| +
|
| +function shaderProgram(gl, vs, fs) {
|
| + var prog = gl.createProgram();
|
| + var addshader = function(type, source) {
|
| + var s = gl.createShader((type == 'vertex') ?
|
| + gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
|
| + gl.shaderSource(s, source);
|
| + gl.compileShader(s);
|
| + if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {
|
| + throw "Could not compile "+type+
|
| + " shader:\n\n"+gl.getShaderInfoLog(s);
|
| + }
|
| + gl.attachShader(prog, s);
|
| + };
|
| + addshader('vertex', vs);
|
| + addshader('fragment', fs);
|
| + gl.linkProgram(prog);
|
| + if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
|
| + throw "Could not link the shader program!";
|
| + }
|
| + return prog;
|
| +}
|
| +
|
| +var gl = window.gl = document.getElementById("c").getContext("webgl");
|
| +
|
| +var PROGRAM;
|
| +var VERTEX_BUFFER;
|
| +var TEXTURE;
|
| +
|
| +function setup() {
|
| + PROGRAM = shaderProgram(gl, VERTEX_SHADER, FRAG_SHADER);
|
| + requestAnimationFrame(draw);
|
| + const DATA = [
|
| + -0.5, -0.5, 0, 0,
|
| + -0.5, 0.5, 0, 1,
|
| + 0.5, -0.5, 1, 0,
|
| + 0.5, 0.5, 1, 1,
|
| + ];
|
| +
|
| + VERTEX_BUFFER = gl.createBuffer();
|
| +
|
| + gl.bindBuffer(gl.ARRAY_BUFFER, VERTEX_BUFFER);
|
| + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(DATA), gl.STATIC_DRAW);
|
| +
|
| + TEXTURE = gl.createTexture();
|
| + gl.bindTexture(gl.TEXTURE_2D, TEXTURE);
|
| + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
| + gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
| + const data = new Uint8Array([0xFF, 0x00, 0x00, 0xFF]);
|
| + gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
|
| +
|
| +}
|
| +setup();
|
| +
|
| +function draw() {
|
| + gl.clearColor(0.8, 0.8, 0.8, 1);
|
| + gl.clear(gl.COLOR_BUFFER_BIT);
|
| +
|
| + gl.useProgram(PROGRAM);
|
| +
|
| + gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
|
| + gl.blendEquation(gl.FUNC_ADD);
|
| + gl.enable(gl.BLEND);
|
| +
|
| + gl.bindBuffer(gl.ARRAY_BUFFER, VERTEX_BUFFER);
|
| + var a = gl.getAttribLocation(PROGRAM, "VertexPosition");
|
| + gl.enableVertexAttribArray(a);
|
| + gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 4*4, 0);
|
| + a = gl.getAttribLocation(PROGRAM, "TextureCoord");
|
| + gl.enableVertexAttribArray(a);
|
| + gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 4*4, 2*4);
|
| +
|
| + gl.activeTexture(gl.TEXTURE0);
|
| + gl.bindTexture(gl.TEXTURE_2D, TEXTURE);
|
| + gl.uniform1i(gl.getUniformLocation(PROGRAM, "Sampler"), 0);
|
| +
|
| + gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
|
| + requestAnimationFrame(draw);
|
| +}
|
| +
|
| +function ofc() {
|
| + var o = new OffscreenCanvas(100, 100);
|
| + var ctx = o.getContext("2d", {texture: TEXTURE});
|
| + var c2 = document.getElementById("c2").getContext("2d");
|
| +
|
| + var f = function(c) {
|
| + c.fillStyle = "Blue";
|
| + c.fillRect(0, 0, 50, 50);
|
| + }
|
| +
|
| + f(ctx);
|
| + f(c2);
|
| +}
|
| +
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 2868323003:
Canvas2D on WebGL texture (Closed)
