three.js - 在 powerpoint 中嵌入 webgl 或从 webgl 渲染动画 gif

Question

任何人都知道如何将 webgl 动画嵌入到 powerpoint 中。任何可用于服务器端捕获动画 gif 的工具？

我没有将 webgl html 直接嵌入到 powerpoint 中。

Answer 1

您可以通过调用 toDataURL() 创建 webgl 的图像，如

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));

这是一个 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);

请注意，服务器仅保存屏幕截图，不提供文件（为简洁起见）。因此，您需要添加该功能或从另一台服务器提供文件。