那一年,我們一起用Node.js開發3D使用者介面!

曾經想要用 Node.js 開發一些原生的應用程式或是 OpenGL 程式,但無論怎麼問,無所不答的 Google 大神都給我千篇一律的答案:『使用 HTML5 和 WebGL』。這答案其實不令人意外,因為截至目前為止,大多數學習使用 Node.js 的人都是 Web 開發者,其所提出的解決方案,理所當然都是與『瀏覽器』有關。想來有趣,Node.js 就是『與瀏覽器剛分手的 JavaScript Engine』,為何還要回頭與瀏覽器糾纏不清呢?於是,筆者開發並於 GitHub 釋出了一個 Node.js module - 『jsdx-toolkit』,讓 JavaScript 開發人員,可以輕易使用 Node.js 開發原生的桌面應用程式,更重要的是,不但可以寫炫麗的 3D UI,而且完全不需要靠『傻大個瀏覽器』。

如果想要載入圖片,並把物件 3D 旋轉,只需要這樣做:
var toolkit = require('jsdx-toolkit');


if (toolkit.init() != toolkit.INIT_SUCCESS) {
 console.log("Failed to initialize jsdx-toolkit.");
 process.exit();
}

/* Create a new stage */
var stage = new toolkit.Stage();
stage.title = 'Rotate';
stage.resize(500, 500);
stage.setColor(0, 0, 0, 255);
stage.on(toolkit.EVENT_DESTROY, function() {
 toolkit.quit();
});
stage.show();

/* Load a image */
var texture1 = new toolkit.Texture;
texture1.loadFile('fred.jpg');
texture1.setPosition(100, 100);
texture1.rotate(toolkit.Y_AXIS, 30, 0, 0, 0);
stage.add(texture1);

toolkit.main();

當然,這樣還不夠看,目前也已經支援了 GStreamer ,所以影音播放也不是問題,並能將影片渲染在 3D 物件上。


達成這樣需求的程式一點都不難,短短不到 30 行就可以搞定:
var toolkit = require('jsdx-toolkit');

if (toolkit.gst_init() != toolkit.INIT_SUCCESS) {
 console.log("Failed to initialize jsdx-toolkit.");
 process.exit();
}

/* Create a new stage */
var stage = new toolkit.Stage();
stage.title = 'VideoTexture';
stage.resize(400, 300);
stage.setColor(0, 0, 0, 255);
stage.on(toolkit.EVENT_DESTROY, function() {
 toolkit.quit();
});
stage.show();

/* Create a video texture */
var video = new toolkit.GstVideoTexture;
video.setPosition(50, 50);
video.loadFile('jushelf-demo.ogv');
video.rotate(toolkit.Y_AXIS, 30, 0, 0, 0);
stage.add(video);

video.play();

toolkit.main();

此外,多數 JavaScript 開發者對 jQuery 應該相當熟悉,更喜愛其鏈狀(Chain)的寫法,同樣習慣也可以延用:
stage.setTitle('VideoTexture').resize(400, 300).setColor(0, 0, 0, 255);

假設你已經對於這樣的開發有興趣,那你應該會更感興趣『動畫支援』:
texture1.animate(toolkit.EASE_IN_QUINT, 1000, {
 'x': 5,
 'y': 5,
 'scale-x': 2.0,
 'opacity': 0
});

還不滿足嗎?可以去研究 tests 目錄下的程式碼,有更多功能已經被實作。像是方便 UI 觸發反應效果的 State Machine,以及更多的小功能。開始動手玩吧!



後記

仍有許多功能待未來加入,而且目前難免會有 Bug,還請來踢館的人們,多多包涵,不吝指教。

留言

  1. THIS IS FREAKING COOOOOOOOOOOL!

    回覆刪除
  2. Awesome! Btw, Why not just using nodejs-gir ?
    https://github.com/creationix/node-gir

    回覆刪除
  3. It's good to realize language bindings to libraries, but so complicated to me. :-/

    I hope to make a good interface for using clutter in JavaScript, and also add special functionality what I like.

    回覆刪除
  4. 幫補資訊
    https://github.com/cfsghost/jsdx-toolkit
    目前改名成這個了

    回覆刪除
  5. 感謝提醒,已經更新了連結和內容。 :-)

    回覆刪除

張貼留言

這個網誌中的熱門文章

有趣的邏輯問題:是誰在說謊

Web 技術中的 Session 是什麼?

淺談 USB 通訊架構之定義(一)

淺談 USB 通訊架構之定義(二)

Reverse SSH Tunnel 反向打洞實錄