在PowerPoint中嵌入webgl或從webgl呈現動畫gif

Question

任何人都知道如何將webgl動畫嵌入到powerpoint中。任何可以在服務器端用來捕獲動畫gif的工具？

我沒有讓它直接嵌入到webgl html中。

Answer 1

你可以通過調用toDataURL（）在

var canvas = document.createElement("canvas"); 
var gl = canvas.getContext("experimental-webgl"); 

function render() { 
    gl.clearColor(Math.random(), Math.random(), Math.random(), 1); 
    gl.clear(gl.COLOR_BUFFER_BIT); 

    // takes a 'screenshot' of the canvas. 
    var image = canvas.toDataURL(); 
    requestAnimationFrame(render); 
} 
render(); 

爲讓那些截圖，你可以發送到服務器

... 
var image = canvas.toDataURL(); 
var req = new XMLHTTPRequest(); 
req.open("POST", "http://localhost:8080", true); 
var data = { 
    cmd: 'screenshot', 
    dataURL: image, 
}; 
req.setRequestHeader("Content-type", "application/json"); 
req.send(JSON.stringify(data)); 

這裏動畫製作的WebGL的圖像是一個的node.js將屏幕截圖保存爲.png文件的服務器。然後你可以將它們加載到某個程序中，將它們變成gif。

var port = 8080 
var screenshotCount = 0; 

var http = require('http'), 
    url = require('url'), 
    fs = require('fs'), 
    util = require('util'), 
    path = require('path'), 
    querystring = require('querystring'); 

function postHandler(request, callback) { 
    var query_ = { }; 
    var content_ = ''; 

    request.addListener('data', function(chunk) { 
    content_ += chunk; 
    }); 

    request.addListener('end', function() { 
    query_ = JSON.parse(content_); 
    callback(query_); 
    }); 
} 

function sendJSONResponse(res, object) { 
    res.writeHead(200, {'Content-Type': 'application/json'}); 
    res.write(JSON.stringify(object), 'utf8'); 
    res.end(); 
} 

function startsWith(str, start) { 
    return (str.length >= start.length && 
      str.substr(0, start.length) == start); 
} 

function saveScreenshotFromDataURL(dataURL) { 
    var EXPECTED_HEADER = "data:image/png;base64,"; 
    if (startsWith(dataURL, EXPECTED_HEADER)) { 
    var filename = "screenshot-" + (screenshotCount++) + ".png"; 
    fs.writeFile(
     filename, 
     dataURL.substr(
      EXPECTED_HEADER.length, 
      dataURL.length - EXPECTED_HEADER.length), 
     'base64'); 
    util.print("Saved Screenshot: " + filename + "\n"); 
    } 
} 

server = http.createServer(function(req, res) { 
    // your normal server code 
    if (req.method == "POST") { 
    postHandler(req, function(query) { 
     switch (query.cmd) { 
     case 'screenshot': 
      saveScreenshotFromDataURL(query.dataURL); 
      sendJSONResponse(res, { ok: true }); 
      break; 
     default: 
      util.print("err: unknown post: " + query + "\n"); 
      break; 
     } 
    }); 
    } 
}), 

server.listen(port); 

請注意，服務器只保存屏幕截圖，它不提供文件（爲簡潔起見）。因此，您需要添加該功能或從其他服務器提供文件。