Tag Archives: Web3D

[X3DOM Demo] Create geometry by using JavaScript

1. Prepare your HTML file.
Don’t forget to link your HTML file with x3dom.js and spheretroupe.js or your JS file.

SphereTroupe: Link to JS files.

You also can link X3DOM JavaScript from this link: http://x3dom.org/x3dom/src/x3dom.js

Write your X3D Tag in body tag in your HTML file

SphereTroupe: X3D Tag in HTML file

2. Create your JavaScript file and write your function in this file.

SphereTroupe: spheretroupe.js

You can write X3D in document.write(“”); same as using createVrmlFromString in VRML if your ever seen it. But in X3DOM it’s easier, See SphereInit function.

Result of SphereTroupe Demo
– Default View

SphereTroupe: Default view

- Perspective View

SphereTroupe: Perspective view

- Point Mode in Perspective View (by type “m” on your keyboard)

SphereTroupe: Points Mode in Perspective View

Test script for check browser supports WebGL ?

Test script for check browser supports WebGL

Function browserSupportWebGL()
function browserSupportsWebGL() {
var canvas = document.getElementById('gltest');
var context = null;var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
for (var i = 0; i < names.length; ++i) {
try { context = canvas.getContext(names[i]); }
catch(e) {}
if (context) { break; }
}
return context != null;
};

Function Show()
function show() {
alert ('WebGL '+(browserSupportsWebGL()?'':'not ')+'supported');
}

How to export file from Maya to .wrl, .x3d and to HTML/XHTML for Web3D [EN/TH Languages]

How to export file from Maya to .wrl, .x3d and to HTML/XHTML for Web3D

Step 1:
[EN] Model and shade in Maya as usual. You should use png images for texturing.
[TH] เปิด/สร้างไฟล์ใน Maya, สำหรับ Texture ที่ใช้ควรเป็น .png

Step 2:
[EN] Open ‘Window | Settings/Preferences | Plug-in manager’ and check the ‘loaded’ or ‘Auto load’ option vrml2Export.
[TH] เปิดเมนูที่ชื่อว่า “Window -> Settings/Preferences -> Plug-in manager” แล้วเลือก “Loaded” และ “Auto load” ที่ vrml2Export

Step 3:
[EN] Open the Export dialog under ‘File | Export All..’, Enter a filename (.wrl suffix) and switch to filetype ‘vrml2′.
Don’t forget to check the folowing export options:
Hierarchy: Full
Texture Options: Original
Export: Normals and Textures
Click the “Export All” button. This will create a vrml2 file in your scenes folder.
[TH] ในการ Export เลือกที่เมนู “File -> Export All..” ใส่ชื่อไฟล์เข้าไป ไม่ต้องเติม .wrl ตามหลัง โดยให้ไปเลือกที่ชนิดของไฟล์ให้เป็น “vrml2″ ซึ่งไฟล์ที่ออกมาจะเป็น .wrl
ในการ Export ให้เลือก Options ต่างๆดังนี้ด้วย
1. Hierarchy: Full
2. Texture Options: Original
3. Export: Normals and Textures

Step 4:
Export VRML file (.wrl) to X3D (.x3d) and HTML/XHTML (X3DOM)
[EN] Open a terminal or command prompt, change to the folder containing your vrml2 model and your textures and run aopt (part of Instant Reality) by typing the following command
[TH] เปิด Terminal หรือ Command Prompt และไปยังโฟลเดอร์ที่ไฟล์ VRML (.wrl) อยู่ และที่ Textures อยู่ด้วยเช่นกัน แล้ว Run “aopt” ซึ่งจะได้มาหลังจากการติดตั้ง Instant Reality แล้ว ซึ่งสามารถดาวน์โหลดได้จากลิ้งนี้

For Non-Texture file (Mac OS X)
/Applications/Instant\ Player.app/Contents/MacOS/aopt -i pipe.wrl -u -N pipe.html

For texture file (Mac OS X)
/Applications/Instant\ Player.app/Contents/MacOS/aopt -i pipe.wrl -d Switch -f ImageTexture:repeatS:false -f ImageTexture:repeatT:false -u -N pipe.html

For Windows
สำหรับ Windows ไม่ต้องลากไปจนถึงตำแหน่งที่ aopt อยู่นะครับ เพียงแค่
aopt -i pipe.wrl -u -N pipe.html

สำหรับข้อมูลเพิ่มเติมสำหรับการใช้คำสั่ง aopt
Convert VRML to X3D-XML
aopt -i foo.wrl -x foo.x3d

Convert VRML or X3D-XML to HTML
aopt -i foo.x3d -N foo.html

Convert VMRL or X3D-XML to XHTML
aopt -i foo.x3d -M foo.xhtml

Optimization and build DEF/USE reuses while converting with “-u”
aopt -i foo.x3d -u -N foo.html

ตำแหน่งที่ aopt อยู่
Windows: C:\Program Files\Instant Player\bin\aopt.exe
Mac: /Applications/Instant Player.app/Contents/MacOS/aopt
Linux: /opt/instantReality/bin/aopt

[EN] or use this method to transcoding from VRML to X3D or reward.
[TH] หรืออีกวิธีในการแปลงโค้ดจาก VRML ไปเป็น X3D หรือแปลงกลับ

Transcoding VRML to X3D or X3D to VRML
[EN] Via Online Transcoding
[TH] สำหรับการ Export VRML (.wrl) ไปเป็น X3D (.x3d) หรือการแปลงกลับสามารถใช้ตัวแปลงออนไลน์ได้ครับ ตามลิ้งข้างล่างนี้

http://www.instantreality.org/tools/x3d_encoding_converter/

Step 5:
[EN] Maya is using absolute path names. Therefore, open your html file with a standard text editor (vi, wordpad,…) and remove all pathes from ImageTexture
[TH] หลังจาก Export แล้ว Maya จะใช้ชื่อ Path ตามขั้นตอนแรกที่เราใช้สร้างโมเดลใน Maya เพราะฉะนั้นต้องเข้าไป Edit Code ในไฟล์ที่เรา Export มาแล้ว ซึ่งสามารถใช้ Text Editor ทั่วไปได้ เช่น Vim, Notepad++ หรือ Wordpad และอื่นๆ ในการแก้ไข Path ดังกล่าวเพื่อที่จะสามารถนำ Texture มาแสดงได้อย่างปกติ

Step 6:
[EN] Copy html and textures into your web folder and open the website with your x3dom capable browser.
[TH] Copy ไฟล์ทั้งหมดของเราที่ใช้ (HTML และ Textures) Upload ขึ้น Server และเปิดใช้โดย Browsers ที่รองรับ WebGL ก็เป็นอันเสร็จสิ้นกระบวนการ : )

Example
Pipe in VRML or X3D file (via BS Contact)

Pipe in VRML or X3D file (via BS Contact)

Pipe in X3DOM

Pipe in X3DOM

For more information:
1. Generic 3D Data Convertion
2. Maya Export

X3DOM/XML/JavaScript Example (Seat visualization)

X3DOM/XML/JavaScript Example (Seat visualization)
Case: The Question of Love 2011 Theater (@B4101 – Wittayapat Room)
Suranaree University of Technology

เกริ่น
ความคิดที่เริ่มเอา X3DOM มาเชื่อมกับ XML มันเกิดจาก Topic หนึ่งใน Stackoverflow ในเรื่องการเปรียบเทียบความสามารถในด้านต่างๆของ Flash, HTML, Silverlight, X3D และ Unity 3D ในหัวข้อที่ชื่อว่า Comparing Flash, HTML, Silverlight, X3D and Unity 3d แล้วผมไปเห็นการเปรียบเทียบดังรูปข้างล่างนี้

connection to DB, SOA and web services -> Easy to do with HTML, Flash and Silverlight. Harder with Unity3D, and hardest with X3D.

ซึ่งมันทำให้เปิดประเด็นเรื่อง X3D – XML ในใจขึ้นทันที ซึ่งผมอยากจะทำให้เห็นว่ามันทำได้ และไม่ยากเลย เลยจัดการเอา X3DOM มาเล่นกับ JavaScript เชื่อมกับ XML ซะเลย

ในตัวอย่างที่ผมเอามานี้ เป็นตัวอย่างของการจองที่นั่งเข้าชมละครเวทีที่สาขาผมจัดชื่อ “The Question of Love – ภวังค์รักปริศนา” (โฆษณาให้เพื่อนสักหน่อย สำหรับ Poster อยู่ ที่นี่ ครับ ไปซื้อบัตรเข้าชมกันได้เลยครับ คิคิ) ประจวบเหมาะกับวันศุกร์ช่วงบ่ายที่แล้วผมนั่งรอใครบางคนอย่างสิ้นหวัง ดื้อ และซุกซน(ฮา) แต่ก็รักมาก(ฮิ้ว!) เริ่มเกรียนล่ะ ฮ่าๆ เลยนั่งเขียนตัวอย่างนี้ขึ้นมาเล่นๆ ชื่อ files ที่ผมตั้งจึงไม่แปลกว่าทำไมเป็น “qoflove” ขึ้น เพราะมันย่อมาจาก “The Question of Love” นั่นแหละครับ

เข้าเรื่อง(สักที)
File ที่เราต้องการหลักๆคือ

1. x3dom.js
มันคือ X3DOM API ซึ่งจะสามารถไปสอยมาได้จาก x3dom.org ซึ่งผมยกหน้านั้นมาให้ท่านแล้ว ที่นี่เลย! หลังจากทำการสอยมาแล้ว จะด้วยการใช้ wget หรือวิธีใดก็ตามแต่ท่านจะสะดวก ผมแนะนำให้เอา Version ที่ Stable แล้วนะครับ ปัจจุบัน (ณ วันที่เขียนโพสนี้) คือ Version 1.1 ถ้าเอาที่เป็น Dev Channel มันอาจจะงอแงครับ ผมเจอบ่อย ง้อลำบากมากครับ บางทีง้อไม่ได้ผลต้องเอา Version อื่นมาซั่มแทน

2. qoflove_seat.html
เป็น File ที่เอามาใช้อ้างถึง (URL) และแสดงหน้า Web3D อย่างโจ๋งครึ่ม

3. qoflove_seat.js
เป็น File ทำงานหลักซึ่งจะอ่านข้อมูลจาก qoflove_seat.xml มาทำงานครับ

และสุดท้าย
4. qoflove_seat.xml
เป็น File ที่เก็บเลขที่นั่ง (Number) และ Status ของที่นั่งนั้นว่า Available หรือ Not Available

รวมทั้งหมด 4 files เท่านั้นเอง!!

Files and Folder
qoflove_seat.js and x3dom.js | in js folder

รองท้องเบาๆกับ qoflove_seat.js กันครับ ซึ่งแค่รองท้องก็แทบจะอิ่มแล้วแหละครับ เพราะการทำงานมันอยู่ที่ file นี้แหละครับ

qoflove_seat.js
เริ่มแรกประกาศตัวแปรที่เซ็ทค่าพื้นที่เริ่มแรกให้เป็น 0 ให้หมดครับ เดี้ยวจะเกิดอาการงอแงเรื่องไม่มีค่าในตัวแปร หากเราไม่ตั้งค่า default ไว้ก่อนครับ ซึ่ง x_pos, y_pos, z_pos เราจะเอาไว้เป็นค่าที่จะทำให้ตำแหน่งของเก้าอี้เลื่อนครับ

Set values

Function: initialize
สำหรับ function นี้เป็นการเชื่อมกับ xml ครับ ซึ่งจะวน loop ตามค่าที่อยู่ใน qoflove_seat.xml ซึ่งเราจะอ่านค่าเข้ามาแล้วส่งค่านั้นไปยัง function ที่มีนามว่า seat โดยจะส่งค่า s และ stat ไป ซึ่ง s ในที่นี่ผมตั้งให้มันเป็น ชื่อที่นั่งนะครับ เช่น 1 2 3 … และ stat คือ ที่นั่งนั้น มีคนสอยไปแล้วหรือยังโสดอยู่ code ก็ตามข้างล่างนี้เลย

Function: initialize | in qoflove_seat.js

Function: seat
สำหรับ function นามว่า seat นี้จะรับค่า initialization มาซั่ม เริ่มขี้เกียจอธิบายยาวดูตาม code ได้ครับ มี comment ไว้อ่านคิดว่าพอเข้าใจ ไม่เข้าใจก็ comment ถามเอาแล้วกัน หึหึ

Function: seat | in qoflove_seat.js

Function: seat_obj
ส่วน seat_obj นี้ไม่มีิอะไรครับ เป็น Object ของรูปสี่เหลี่ยมครับ ซึ่งของจริงมันจะพัฒนาเป็นรูปเก้าอี้ครับ อันนี้ตัวอย่าง ผมกั๊ก! ซึ่ง function นี้จะรับค่า color จาก seat มาแล้วเอามาสร้างกล่องเป็นสีๆ ครับ ซึ่งจะแสดงว่าที่นั่งนั้นว่างไหม

Function: seat_obj | in qoflove_seat.js

qoflove_seat.html
มาถึงหน้าที่เราเอาไว้แสดงผล Web3D อันเกรียนๆของเรา(หรือของผมคนเดียว) คือ qoflove_seat.html นั่นเอง!!
สำหรับส่วน head ก็แค่เชื่อม js ที่น่ารักทั้ง 2 ของเราเข้าไป และส่วน body ก็ตาม code นั่นแหละครับ เชิญจัดการซั่มมันตามสบายครับ file นี้มันมีแค่นั้นจริงๆ
Head
ส่วนของ tag head

Call Script: qoflove_seat.js and x3dom.js | in qoflove_seat.html

Body
ส่วนของ tag body

X3DOM | in qoflove_seat.html

ผลจากความเกรียนทั้งหมดทั้งมวล จะเป็นแบบนี้แหละครับ!

The Question of Love Theater - Seat

Basic VRML/JavaScript Tutorial

Basic VRML/JavaScript Tutorial

Function for Generate Circles, translation for placements and Gradient Colors by using loop by VRML/JavaScript

DEF circles Transform { children[ ] }
Script {
field SFNode circles USE circles
url "javascript:
function initialize()
{
// Initilize Tower
tower = ' ';
var tx = 0;
var ty = 0;
var tz = 0;

var r = 1;
var c = 0;

for (i = 0; i < 20; ++i, tz = i) {
if (i < 10) {
c += 0.1;
r -= 0.05;
// tx += 0.05;
// ty += 0.05;
} else {
c -= 0.1;
r += 0.05;
// tx -= 0.05;
// ty -= 0.05;
}
tower = tower +
' Transform { translation ' + tx + ' ' + ty + ' ' + tz +
' children [ Shape { appearance Appearance { material Material { diffuseColor 0 0.5 ' + c + ' } } geometry Circle { radius ' + r + ' } } ] }';
}
children = Browser.createVrmlFromString(tower);
circles.addChildren = children;
}
"
}

Generate Circles, Placements and Gradient Colors - VRML/JavaScript
Generate Circles, Placements and Gradient Colors - VRML/JavaScript

and this is full source code for this example

######################################################################
# Tower.wrl
# Hassadee Pimsuwan, silkzter@gmail.com
# http://iri.sut.ac.th/~pimsuwan, http://hapztron.wordpress.com
# Credit: Brezhnyev Kirill
######################################################################
#VRML V2.0 utf8

EXTERNPROTO Background2D [
eventIn SFBool set_bind
exposedField SFColor backColor
exposedField MFString url
eventOut SFBool isBound
]
[
"urn:inet:bitmanagement.de:node:Background2D",
"http://www.bitmanagement.de/protos/nodes.wrl#Background2D"
]

EXTERNPROTO Transform2D [
eventIn MFNode addChildren
eventIn MFNode removeChildren
exposedField MFNode children
exposedField SFVec2f center
exposedField SFFloat rotationAngle
exposedField SFVec2f scale
exposedField SFFloat scaleOrientation
exposedField SFVec2f translation
]
[
"urn:inet:bitmanagement.de:node:Transform2D",
"http://www.bitmanagement.de/vrml/protos/nodes.wrl#Transform2D"
]

Background2D { backColor 1.0 1.0 1.0 }
NavigationInfo { type [ "EXAMINE", "ANY" ] }
Viewpoint { position 0 0 25 }

DEF circles Transform { children[ ] }
Script {
field SFNode circles USE circles
url "javascript:
function initialize()
{
// Initilize Tower
tower = ' ';
var tx = 0;
var ty = 0;
var tz = 0;

var r = 1;
var c = 0;

for (i = 0; i < 20; ++i, tz = i) {
if (i < 10) {
c += 0.1;
r -= 0.05;
// tx += 0.05;
// ty += 0.05;
} else {
c -= 0.1;
r += 0.05;
// tx -= 0.05;
// ty -= 0.05;
}
tower = tower +
' Transform { translation ' + tx + ' ' + ty + ' ' + tz +
' children [ Shape { appearance Appearance { material Material { diffuseColor 0 0.5 ' + c + ' } } geometry Circle { radius ' + r + ' } } ] }';
}
children = Browser.createVrmlFromString(tower);
circles.addChildren = children;
}
"
}

Special Thanks for this idea to -> Brezhnyev Kirill, Bitmanagement Software GmbH
Hassadee Pimsuwan – Student Internship, Bitmanagement Software GmbH

Khronos Releases Final WebGL 1.0 Specification. Exactly, IE != Supported (Thai Language)

WebGL เป็นเทคโนโลยีแสดงผลในรูปแบบ 3 มิติ บนเว็บเบราว์เซอร์ผ่าน JavaScript โดยพื้นฐานมาจาก OpenGL ES ซึ่งทั้ง WebGL และ OpenGL ES ก็พัฒนามาจากองค์กร Khronos

ซึ่งวันที่ 3 มีนาคม 2554 ที่ผ่านมาสเปกของ WebGL 1.0 ได้เสร็จสมบูรณ์แล้ว ซึ่งก่อนหน้านั้นก็ได้เริ่มเป็นที่รู้จักกันอย่างแพร่หลายในกลุ่มนักพัฒนา Web3D อย่างมากในปีที่แล้ว ซึ่งก็มี Websites สำหรับการเรียนรู้ WebGL เกิดขึ้นมาไม่ว่าจะเป็นของ Mozilla เองที่สร้าง Demo ของ WebGL ขึ้น และเว็บ Learningwebgl ก็เป็นที่นิยมและเป็นที่รู้จักอย่างแพร่หลายด้วยเช่นกัน
ซึ่ง ณ ขณะนี้ WebGL ได้รับการสนับสนุนจากหลายองค์กร ซึ่งก็คือผู้ผลิตเบราว์เซอร์รายใหญ่ 4 ราย ได้แก่ Firefox, Chrome, Safari และ Opera ซึ่งแน่นอน ยังขาด IE ซึ่งผมได้ลองคุยกับ Developer ที่ทำงานอยู่บริษัทเดียวกับผม ก็คุยกันเล่นๆนะครับ ว่าจะทำยังไงให้ IE มาสนับสนุน WebGL คำตอบก็คือ รอให้ Mozilla ไม่ก็ Google ไปซื้อ Microsoft มาให้ได้ก่อน ก็ขำๆดีครับ

อาจด้วยเหตุผลที่ Microsoft ได้พัฒนา DirectX ซึ่งหาก WebGL เข้ามา DirectX จะไปอยู่ที่ไหน? ซึ่งความคิดเห็นผมในปัจจุบันและงานที่ทำอยู่ก็เริ่มเปลี่ยนจากการใช้ DirectX มาใช้ OpenGL กันแล้ว ซึ่งเป็นสิ่งที่รองรับกันในทุกระบบปฏิบัติการไม่ว่าจะเป็น Windows, Mac OS หรือ Linux ก็ต่างรองรับ OpenGL ทั้งสิ้น ซึ่งมันเปิดกว้างมากกว่าที่จะยึดอยู่กับระบบปฏิบัติการเดียว ซึ่งระบบปฏิบัติการอื่นๆนอกจาก Windows มีแนวโน้มได้รับความนิยมสูงขึ้นเร่ือยๆตลอดหลายปีที่ผ่านมา สำหรับ DirectX การใช้งานแบบเห็นกันมากและชัดเจนที่สุดก็คือเกมส์ครับ ซึ่งส่วนใหญ่ยังอยู่บน Windows และใช้ DirectX กันแทบทั้งหมดหมด (นึกถึงตอนติดตั้งเกมส์ออนไลน์หลายๆเกมส์ต่างถามหา DirectX ก่อนติดตั้งแทบทั้งสิ้น) นอกจากที่ WebGL จะไปชนกับ DirectX แล้วยังมาชนกับ Molehill ของ Adobe อีกด้วย ซึ่งเป็นเทคโนโลยี 3 มิติของ Flash Player

แต่ถึงกระนั้น WebGL ก็มีผู้สนับสนุนอยู่มากครับ รายใหญ่ๆก็เป็น NVIDIA, Facebook, Qualcomm etc. และยังมีการประยุกต์ไปใช้ในเทคโนโลยีตัวอื่นๆได้อีก เช่น X3DOM ซึ่งเป็นเทคโนโลยีที่มีการใช้ WebGL ด้วยการเขียนในรูปแบบ X3D หรือที่เทคโยโลยีที่น่าสนใจอย่างมากที่กำลังมานี้ก็คือ WebCL ซึ่งจะช่วยให้การประมวลผลของ WebGL มีประสิทธิภาพสูงมากขึ้น โดยเป็นการใช้ GPU และ multi-core CPU ประมวลผลจากเว็บเบราว์เซอร์ ซึ่งจะช่วยลดปัญหาด้านความเร็วของ WebGL ได้มาก

สำหรับทางเลือกในการเปิดใช้ Web3D ในปัจจุบัน Plugin ก็ยังเป็นสิ่งที่สำคัญอยู่ เนื่องจากลบจุดด้อยด้านความเร็วที่ยังช้าอยู่ของ WebGL ซึ่งหากเทียบกับใช้ Plugin ในขณะนี้ ความเร็วยังสู้ไม่ได้ และด้วยวิธีการประมวลผลที่แตกต่างกัน สำหรับ Plugins ก็มีการพัฒนาหลายองค์กรด้วยกันครับ ไม่ว่าจะเป็น BS Contact ของ Bitmanagement Software GmbH หรือจะเป็นของ Octaga ส่วนตัวผม BS Contact ดีที่สุดครับ มีความรวดเร็วในการประมวลผลสูงมาก และแน่นอนว่ามีการพัฒนารูปแบบของ Web3D ในอนาคตออกมาอย่างแน่นอน ซึ่งตอนนี้ยังบอกไม่ได้ครับ : )

Ref: Khronos, CNET, Blognone