three.js - embed webgl in powerpoint or render animated gif from webgl -
anyone got idea how embed webgl animation powerpoint. tools can used on server side capture animated gif?
i did not make work embed webgl html directly in powerpoint.
you can create images of webgl calling todataurl() in
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 'screenshot' of canvas. var image = canvas.todataurl(); requestanimationframe(render); } render();
to make animation send each of screenshots server
... 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));
here's node.js server save screenshots .png files. load them program turn them 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) { // 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);
note server saves screenshots, doesn't serve files (for brevity). you'll need either add functionality or serve files server.
Comments
Post a Comment