web上的OffscreenCanvas-离屏canvas使用说明(离屏渲染)

'use strict';importScripts("");importScripts("");importScripts("");importScripts("");importScripts("");importScripts("");var offscreen,ctx,gl;onmessage = function (e) { if( == 'Init'){ ('Window post:' + + ", mode:" + ); Init(,); //draw(); }else if( == 'draw'){ draw(); }}function Init(mode,data) {

if (mode === "transfer") { ("bitmap_worker width:"++",height:"+); offscreen = new OffscreenCanvas(, ); } else if (mode === "commit") { ("commit"); offscreen = ; } ctx = text("2d"); ("worker new OffscreenCanvas"); draw(mode);}function draw(mode) { if (mode === "transfer") { render(); let imageBitmap = erToImageBitmap();

postMessage({name:"TransferBuffer", buffer:imageBitmap},[imageBitmap]); ("bitmap_ transfer"); } else if (mode === "commit") { render(); ("bitmap_ commit"); }

}function render(){ var grd=LinearGradient(20,20,150,150);//create grd object orStop(0,"yellow");//the start grd color; orStop(1,"red");//the end grd color; 1 means end yle=grd;// ct(140,20,100,100);//draw a rect which is filled. ();}Demo2：

'use strict';importScripts("");importScripts("");importScripts("");importScripts("");importScripts("");importScripts("");// Basically STAGE = { width:1080, height:1920 };var gl = null;var canvas = null;var meter = new er();var drawCount = 0;if (erEnv()) { age = function(msg) { ('Window post:' + + ", mode:" + ); if ( === "Init") { Init(, ); } }}function TransferBuffer() { let image_bitmap = erToImageBitmap(); postMessage({name:"TransferBuffer", buffer:image_bitmap}, [image_bitmap]);}function Init(mode, data) { if (mode === "transfer") canvas = new OffscreenCanvas(, );

else if (mode === "commit") canvas = ; ("Render init canvas size:" + + "x" + ); = ; = ; if (canvas && text) { //setup page // Get the rendering context for WebGL gl = getWebGLContext(canvas); if (!gl) { ('Failed to get the rendering context for WebGL'); return; } // Initialize shaders if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) { ('Failed to intialize shaders.'); return; } // // Get the storage location of a_Position a_Position = ribLocation(m, 'a_Position'); if (a_Position < 0) { ('Failed to get the storage location of a_Position'); return; } // Get the storage location of a_Color a_Color = ribLocation(m, 'a_Color'); if (a_Color < 0) { ('Failed to get the storage location of a_Color'); return; } // Specify the color for clearing olor(0.2, 0.2, 0.2, 1); //initialize test variables createBoids(); // Allocate buffer for position and color verticesColors = new Float32Array( * 5); // Create a buffer object vertexColorBuffer = Buffer(); if (!vertexColorBuffer) { ('Failed to create the buffer object'); return false; } if (mode === "transfer") { //setInterval(() => { // Render buffer first render(); // Transfer render buffer back to browser context TransferBuffer(); // }, 200); } else if (mode === "commit") { function renderloop() { // Render buffer first render();

// fps let result = (); if (ate > 0) { ("WebGL Offscreen framerate:" + ate); } // Wait next begin frame to loop ().then(renderloop); } renderloop(); } }}var config = { minForce:3, maxForce:6, minSpeed:6, maxSpeed:12, minWanderDistance:10, maxWanderDistance:100, minWanderRadius:5, maxWanderRadius:20, minWanderStep:0.1, maxWanderStep:0.9, numBoids:500};var drawEnabled = true;var firstDraw = true;var boids = [];// Vertex shader programvar VSHADER_SOURCE = 'attribute vec4 a_Position;n' + 'attribute vec4 a_Color;n' + 'varying vec4 v_Color;n' + 'void main() {n' + ' gl_Position = a_Position;n' + ' gl_PointSize = 10.0;n' + ' v_Color = a_Color;n' + '}n';// Fragment shader programvar FSHADER_SOURCE = '#ifdef GL_ESn' + 'precision mediump float;n' + '#endifn' + 'varying vec4 v_Color;n' + 'void main() {n' + ' gl_FragColor = v_Color;n' + '}n';var a_Position;var a_Color;var verticesColors;var vertexColorBuffer;function initVertexBuffers(gl, first) { // Bind the buffer object to target if (first) { ffer(_BUFFER, vertexColorBuffer); }

Data(_BUFFER, verticesColors, C_DRAW); if (first) { let FSIZE = _PER_ELEMENT; AttribPointer(a_Position, 2, , false, FSIZE * 5, 0); VertexAttribArray(a_Position); // Enable the assignment of the buffer object AttribPointer(a_Color, 3, , false, FSIZE * 5, FSIZE * 2); VertexAttribArray(a_Color); // Enable the assignment of the buffer object } // Unbind the buffer object // ffer(_BUFFER, null);}function createBoids(){ for (var i = 0;i < ds; i++){ var boid = new Boid(); _r = (random(100, 255)) / 255; _g = (random(100, 255)) / 255; _b = (random(100, 255)) / 255; havior = _BOUNCE; ce = random(ce, ce); ceSQ = ce*ce; ed = random(ed, ed); edSQ = ed*ed; Distance = random(derDistance, derDistance); Radius = random(derRadius, derRadius); Step = random(derStep, derStep); Radius = /2; Centre = new Vector3D(/2, /2, 0.0); = 16; //add positoin and velocity on.x = Centre.x + random(-100, 100); on.y = Centre.y + random(-100, 100); on.z = random(-100, 100); var vel = new Vector3D(random(-2, 2), random(-2, 2), random(-2, 2)); entBy(vel); (boid); }}function render() { for (var i = 0;i < ; i++){ let boid = boids[i]; (0.3); // Add a mild attraction to the centre to keep them on screen (Centre, 0.1); // Flock (boids); (); verticesColors[i * 5] = (on.x - /2)/(/2); verticesColors[i * 5 + 1] = (/2 - on.y)/(/2); verticesColors[i * 5 + 2] = _r; verticesColors[i * 5 + 3] = _g; verticesColors[i * 5 + 4] = _b; } if (drawEnabled){ // Clear (_BUFFER_BIT); initVertexBuffers(gl, firstDraw);

initVertexBuffers(gl, firstDraw);

rays(, 0, );

firstDraw = false; }}//helper classesfunction random( min, max ) { return () * ( max - min ) + min;}