function Create_Worker(offscreencanvas) { return new Promise((resolve, reject) => { let data ="\n" + "var gl;\n" + "var rAFID;\n" + "var canvas;\n" + "var shaderProgram;\n" + "\n" + "function createProgram(){\n" + " var vertCode =\n" + " 'attribute vec2 coordinates;' +\n" + " 'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';\n" + "\n" + "//Create a vertex shader object\n" + " var vertShader = gl.createShader(gl.VERTEX_SHADER);\n" + "\n" + "//Attach vertex shader source code\n" + " gl.shaderSource(vertShader, vertCode);\n" + "\n" + "//Compile the vertex shader\n" + " gl.compileShader(vertShader);\n" + "\n" + "//Fragment shader source code\n" + " var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';\n" + "\n" + "// Create fragment shader object\n" + " var fragShader = gl.createShader(gl.FRAGMENT_SHADER);\n" + "\n" + "// Attach fragment shader source code\n" + " gl.shaderSource(fragShader, fragCode);\n" + "\n" + "// Compile the fragment shader\n" + " gl.compileShader(fragShader);\n" + "\n" + "// Create a shader program object to store combined shader program\n" + " shaderProgram = gl.createProgram();\n" + "\n" + "// Attach a vertex shader\n" + " gl.attachShader(shaderProgram, vertShader);\n" + "\n" + "// Attach a fragment shader\n" + " gl.attachShader(shaderProgram, fragShader);\n" + "\n" + "// Link both programs\n" + " gl.linkProgram(shaderProgram);\n" + "\n" + "// Use the combined shader program object\n" + " gl.useProgram(shaderProgram);\n" + "}\n" + "\n" + "\n" + "function initbuffer(){\n" + " var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];\n" + "\n" + "// Create a new buffer object\n" + " var vertex_buffer = gl.createBuffer();\n" + "\n" + "// Bind an empty array buffer to it\n" + " gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);\n" + "\n" + "// Pass the vertices data to the buffer\n" + " gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n" + "\n" + "// Unbind the buffer\n" + " gl.bindBuffer(gl.ARRAY_BUFFER, null);\n" + "\n" + " /* Step3: Create and compile Shader programs */\n" + "\n" + "// Vertex shader source code\n" + "\n" + "\n" + " /* Step 4: Associate the shader programs to buffer objects */\n" + "\n" + "//Bind vertex buffer object\n" + " gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);\n" + "\n" + "//Get the attribute location\n" + " var coord = gl.getAttribLocation(shaderProgram, \"coordinates\");\n" + "\n" + "//point an attribute to the currently bound VBO\n" + " gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);\n" + "\n" + "//Enable the attribute\n" + " gl.enableVertexAttribArray(coord);\n" + "\n" + " /* Step5: Drawing the required object (triangle) */\n" + "\n" + "// Clear the canvas\n" + " gl.clearColor(0.5, 0.5, 0.5, 0.9);\n" + "\n" + "// Enable the depth test\n" + " gl.enable(gl.DEPTH_TEST);\n" + "\n" + "// Clear the color buffer bit\n" + " gl.clear(gl.COLOR_BUFFER_BIT);\n" + "\n" + "}\n" + "\n" + "function draw() {\n" + "\n" + "// Set the view port\n" + " gl.viewport(0, 0, canvas.width, canvas.height);\n" + "\n" + "// Draw the triangle\n" + " gl.drawArrays(gl.TRIANGLES, 0, 3);\n" + " rAFID = requestAnimationFrame(draw)\n" + " console.log(\"draw\");\n" + "}\n" + "\n" + "\n" + "(function (root) {\n" + " root.addEventListener(\"message\", function (e) {\n" + " var message = e.data;\n" + " switch (message.cmd) {\n" + " case \"offscreencanvas\":\n" + " canvas = message.data;\n" + " gl = canvas.getContext('webgl');\n" + " canvas.addEventListener(\"webglcontextlost\", (event) => {\n" + " console.log(\"webglcontextlost\", event);\n" + " if (rAFID) {\n" + " cancelAnimationFrame(this.rAFID);\n" + " }\n" + " event.preventDefault();\n" + " }, false);\n" + " canvas.addEventListener(\"webglcontextrestored\", (event) => {\n" + " console.log(\"webglcontextrestored\", event);\n" + " gl = canvas.getContext('webgl');\n" + " createProgram();\n" + " initbuffer();\n" + " rAFID = requestAnimationFrame(draw);\n" + " }, false);\n" + " createProgram();\n" + " initbuffer();\n" + " rAFID = requestAnimationFrame(draw);\n" + " break;\n" + " }\n" + " });\n" + "})(self);\n" workerhandle = new Worker(window.URL.createObjectURL(new Blob([data]))); let postdata = { cmd:"offscreencanvas", data:offscreencanvas }; workerhandle.postMessage(postdata, [postdata.data]) workerhandle.onmessage = function (e) { let message = e.data; switch (message.cmd) { case "ok": resolve(); break; } } }) }