canvas-webgl.html - Issue 2868323003: Canvas2D on WebGL texture

Side by Side Diff: canvas-webgl.html

Issue 2868323003: Canvas2D on WebGL texture (Closed)

Patch Set: Created 3 years, 7 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <style>

	3 canvas {

	4 border: 5px solid #000;

	5 }

	6 </style>

	7 <canvas id="c" width="200" height="200"></canvas>

	8 <canvas id="c2" width="100" height="100"></canvas>

	9 <button onclick="ofc()">ofc</button>

	10 <script type="text/javascript">

	11 const VERTEX_SHADER = `

	12 precision mediump float;

	13 attribute vec2 VertexPosition;

	14 attribute vec2 TextureCoord;

	15 varying highp vec2 uv;

	16 void main(void) {

	17 gl_Position = vec4(VertexPosition.xy, 0.0, 1.0);

	18 uv = TextureCoord;

	19 }

	20 `;

	21

	22 const FRAG_SHADER = `

	23 precision mediump float;

	24 uniform sampler2D Sampler;

	25 varying highp vec2 uv;

	26 void main() {

	27 gl_FragColor = texture2D(Sampler, uv.xy);

	28 }

	29 `;

	30

	31 function shaderProgram(gl, vs, fs) {

	32 var prog = gl.createProgram();

	33 var addshader = function(type, source) {

	34 var s = gl.createShader((type == 'vertex') ?

	35 gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);

	36 gl.shaderSource(s, source);

	37 gl.compileShader(s);

	38 if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) {

	39 throw "Could not compile "+type+

	40 " shader:\n\n"+gl.getShaderInfoLog(s);

	41 }

	42 gl.attachShader(prog, s);

	43 };

	44 addshader('vertex', vs);

	45 addshader('fragment', fs);

	46 gl.linkProgram(prog);

	47 if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {

	48 throw "Could not link the shader program!";

	49 }

	50 return prog;

	51 }

	52

	53 var gl = window.gl = document.getElementById("c").getContext("webgl");

	54

	55 var PROGRAM;

	56 var VERTEX_BUFFER;

	57 var TEXTURE;

	58

	59 function setup() {

	60 PROGRAM = shaderProgram(gl, VERTEX_SHADER, FRAG_SHADER);

	61 requestAnimationFrame(draw);

	62 const DATA = [

	63 -0.5, -0.5, 0, 0,

	64 -0.5, 0.5, 0, 1,

	65 0.5, -0.5, 1, 0,

	66 0.5, 0.5, 1, 1,

	67 ];

	68

	69 VERTEX_BUFFER = gl.createBuffer();

	70

	71 gl.bindBuffer(gl.ARRAY_BUFFER, VERTEX_BUFFER);

	72 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(DATA), gl.STATIC_DRAW);

	73

	74 TEXTURE = gl.createTexture();

	75 gl.bindTexture(gl.TEXTURE_2D, TEXTURE);

	76 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

	77 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);

	78 const data = new Uint8Array([0xFF, 0x00, 0x00, 0xFF]);

	79 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, d ata);

	80

	81 }

	82 setup();

	83

	84 function draw() {

	85 gl.clearColor(0.8, 0.8, 0.8, 1);

	86 gl.clear(gl.COLOR_BUFFER_BIT);

	87

	88 gl.useProgram(PROGRAM);

	89

	90 gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINU S_SRC_ALPHA);

	91 gl.blendEquation(gl.FUNC_ADD);

	92 gl.enable(gl.BLEND);

	93

	94 gl.bindBuffer(gl.ARRAY_BUFFER, VERTEX_BUFFER);

	95 var a = gl.getAttribLocation(PROGRAM, "VertexPosition");

	96 gl.enableVertexAttribArray(a);

	97 gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 4*4, 0);

	98 a = gl.getAttribLocation(PROGRAM, "TextureCoord");

	99 gl.enableVertexAttribArray(a);

	100 gl.vertexAttribPointer(a, 2, gl.FLOAT, false, 44, 24);

	101

	102 gl.activeTexture(gl.TEXTURE0);

	103 gl.bindTexture(gl.TEXTURE_2D, TEXTURE);

	104 gl.uniform1i(gl.getUniformLocation(PROGRAM, "Sampler"), 0);

	105

	106 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

	107 requestAnimationFrame(draw);

	108 }

	109

	110 function ofc() {

	111 var o = new OffscreenCanvas(100, 100);

	112 var ctx = o.getContext("2d", {texture: TEXTURE});

	113 var c2 = document.getElementById("c2").getContext("2d");

	114

	115 var f = function(c) {

	116 c.fillStyle = "Blue";

	117 c.fillRect(0, 0, 50, 50);

	118 }

	119

	120 f(ctx);

	121 f(c2);

	122 }

	123

	124 </script>

	125 </body>

	126 </html>

OLD	NEW

« no previous file with comments | « no previous file | third_party/WebKit/Source/core/html/canvas/CanvasContextCreationAttributes.idl » ('j') | no next file with comments »