Mozilla WebXR繪畫工具A-Painter助你輕鬆創作、分享VR作品

文章相關引用及參考：映維網

即便沒有安裝創作軟體，你仍然可以輕鬆通過網頁創作和分享你的VR作品。

（映維網 2018年07月04日）希望馬上開始畫畫嗎？你可以訪問這個網站。同時，請確保你的瀏覽器支持WebXR。對於Chromium，請通過chrome：// flags / #enable-gamepad-extensions啟用相應的flag。火狐瀏覽器即將推出支持。 沒有VR設備？不用擔心，你可以通過任意設備欣賞社區的繪畫作品。

Mozilla VR團隊表示，他們是Tilt Brush的鐵杆粉絲。這是VR作為藝術表現媒介力量的一個優秀例子。在過去數周時間，Mozilla VR團隊一直在實驗基於Web的網頁版Tilt Brush。我們希望說明，即便沒有安裝創作軟體，你仍然可以輕鬆通過網頁創作和分享你的VR作品。

要瀏覽繪畫作品，你只需一款支持WebGL的瀏覽器，但為了滿足你的創作衝動，你需要包含控制器的系統。這意味著目前A-Painter只支持HTC Vive。不過，Mozilla VR團隊表示他們希望很快就帶來改變。

1. 今天可以用A-Painter做什麼？

利用運動控制器在3D中畫畫。用雙手創作。

只需複製和粘貼URL即可與世界共享你的作品。

無論有無頭顯，你都可以在任何地方瀏覽3D繪畫。

以其他人的繪畫作品為基礎，並且為其添加你的創意。

從桌面將圖像和OBJ模型拖放到瀏覽器，以此作為模板或繪畫起點。

保存並載入畫作的本地二進位文件。

工具提供了超過30個筆刷，你同時可以利用自定義的A-Painter Brush API來輕鬆創建新的筆刷。

2. 如何開始

非常簡單。在支持WebVR的瀏覽器（在about：config中啟用Gamepad Extensions）轉到A-Painter官網，並且打開HTC Vive頭顯。拿起控制器，按下扳機鍵，然後你就可以開始自己的創作了。

如果沒有頭顯，你仍然可以通過滑鼠和鍵盤，或者是移動設備來瀏覽其他人的作品。

3. 控制器

扳機鍵：按住即可創作（壓力敏感）。

拇指板：向上和向下滑動可以改變畫筆大小。

側邊鍵：撤消。

菜單按鈕：切換主菜單。

打開主菜單後，你可以將另一個控制器指向所需選項，並按下扳機鍵來修改顏色，大小和畫筆類型。

Color History（顏色歷史）：保存最近使用的七種顏色。

Clear（清除）：清除繪畫。小心使用。

Save（保存）：整個畫作將以二進位格式保存，並且上傳至伺服器，在VR之外（但仍在瀏覽器中），你將獲得一個相應的URL，然後你可以分享畫作或者繼續創作。

Copy（複製）：將當前握持控制器的畫筆設置（類型，顏色和大小）複製到指向控制器。

4. 可擴展的A-Painter

要創建新畫筆，請實現以下介面，並通過調用AFRAME.registerBrush（brushName，definition，options）進行註冊。

接下來，定義以下內容：

BrushInterface.prototype = { addPoint: function (position, orientation, pointerPosition, pressure, timestamp) {}, tick: function (timeOffset, delta) {}};

唯一需要實現的函數是addPoint。藉助addPoint，你可以對控制器返回的點，方向和壓力數據執行一定的操作（即創建或修改幾何圖形）。如果你向場景添加了某些內容則返回true，否則返回false。如果要添加動態行為，請實現tick函數（每一幀調用）。

以下是自定義spheres畫筆的代碼：

/* globals AFRAME, THREE */

/* globals AFRAME, THREE */

AFRAME.registerBrush(

// Name of brush.

『spheres』,

// Methods for brush definition.

{

init: function (color, width) {

// Initialize the material based on the stroke color.

this.material = new THREE.MeshStandardMaterial({

color: this.data.color,

roughness: 0.5,

metalness: 0.5,

side: THREE.DoubleSide,

shading: THREE.FlatShading

});

this.geometry = new THREE.IcosahedronGeometry(1, 0);

},

// This method is called every time we need to add a point

// to our stroke. It should return `true` if the point is

// added correctly and `false` otherwise.

addPoint: function (position, orientation, pointerPosition,

pressure, timestamp) {

// Create a new sphere mesh to insert at the given position.

var sphere = new THREE.Mesh(this.geometry, this.material);

// The scale is determined by the trigger pressure.

var scale = this.data.size / 2 * pressure;

sphere.scale.set(scale, scale, scale);

sphere.initialScale = sphere.scale.clone();

// Generate a random phase to be used in the tick animation.

sphere.phase = Math.random() * Math.PI * 2;

// Set the position and orientation of the sphere to match

// the controller』s.

sphere.position.copy(pointerPosition);

sphere.rotation.copy(orientation);

// Add the sphere to the `object3D`.

this.object3D.add(sphere);

// Return `true`, since we』ve correctly added a new point (sphere).

return true;

},

// This method is called on every frame.

tick: function (timeOffset, delta) {

for (var i = 0; i

更多關於創建自定義筆刷的信息請訪問這裡。

5. 未來計劃

Mozilla VR團隊表示，在開發工具時，他們構思了一系列有趣的點子。 A-Painter的未來將取決於你和其他用戶的反饋，而以下是他們希望在未來增加的功能：

更多更好的工具，如顏色選擇器和橡皮擦

更多更好的筆刷

保存屏幕截圖和GIF動圖

音頻響應刷

多用戶畫家和觀眾模式

導入glTF模型

導出為標準3D文件格式，如OBJ和glTF

用於展示用戶作品的專用網站

後期處理濾鏡

對現有畫筆的性能優化

當然，如果你有任何想法，問題，或者希望直接為代碼庫做出貢獻，你隨時都可以訪問A-Pinter的GitHub頁面。

文章《Mozilla WebXR繪畫工具A-Painter助你輕鬆創作、分享VR作品》首發於 映維網。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！