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

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -