Tag Archives: VRML

เริ่มต้นกับ X3DOM | Getting Started with X3DOM

Posted on by
2

“Post นี้เหมาะสำหรับผู้ที่ต้องการเริ่มศึกษา/เล่นกับ X3DOM แต่ไม่รู้จะเริ่มยังไงครับ และถ้ามีพื้นฐานภาษา X3D แล้วจะติดปีกบินได้เลย ;D”

พื้นฐานและสิ่งที่คุณควรจะมี
1. Web Browser ที่รองรับ WebGL, HTML5 (Canvas) เช่น Google Chrome, Mozilla Firefox (แนะนำให้อัพเดทเป็นเวอร์ชั่นล่าสุดครับ ใครไม่เคยอัพเลยก็อัพซะนะครับ) **ล่าสุด Opera Next Version 12 ก็รองรับ WebGL แล้วนะท่าน**
2. พื้นฐานด้าน 3D เล็กๆน้อยๆพอเขี่ยๆสะกิดได้
3. ความรู้ในภาษา JavaScript สำหรับพอเล่นกับ X3DOM Runtime API ได้ (สำหรับในเชิงลึกหลังจากนี้)
4. ความรู้ในภาษา XML เพื่อให้เข้าใจภาษา X3D ได้ง่ายยิ่งขึ้น

ปัญหา
1. สำหรับคนที่มีไฟล์ VRML (.wrl) หรือ X3D (.x3d) อยู่แล้ว อยากอัพเกรดคุณภาพชีวิต เบื่อกับการใช้ Plugin ในการเปิด Web3D แล้ว อยากมาโลดแล่นบน Web Browser แบบ Unplugin โดยใช้ WebGL แทน แต่ไม่รู้จะทำไง เขียน WebGL ตรงๆก็อาจจะยากลำบากจนท้อแท้หน่ายชีวิตกัน.. จะทำยังไง?
2. มีไฟล์จาก Maya อยู่แล้ว แนะนำให้ไปอ่านโพสเก่าผม อันนี้
3. สำหรับคนที่มีไฟล์จาก 3Ds Max (.3ds) สามารถทำได้โดยการ Import ไฟล์นั้นเข้าไปที่ Blender (ต้องมี Blender ใช้ก่อนนะครับ ดาวน์โหลดและใช้ฟรีครับ) และ Export จาก Blender มาเป็น .x3d อีกที หรือใช้ BS Contact Plugin ทำการ Export ออกมาก็ย่อมได้

หลังจากมีไฟล์ X3D แล้ว สิเฮ็ดหยังต่อ?
1. ไฟล์ที่เราต้องการคือ x3dom.js
คำถาม เอามาจากไหน?
คำตอบ ดาวน์โหลดได้จาก X3DOM
2. โหลดมาแล้ว ทำไงต่อ?
คำตอบ เรียกใช้สิคร๊าบบบ

<script type="text/javascript" src="x3dom.js"></script>

ต่อจากนั้น เราก็ประกาศ ในหน้า HTML/XHTML ของเราได้เลยครับ
เช่น (เริ่มจากใน body เลยนะครับ)

<X3D xmlns="http://www.web3d.org/specifications/x3d-namespace"  showStat="false" showLog="false" x="0px" y="0px" width="400px" height="400px">
    <Scene>
        <Viewpoint position='0 0 10' />
        <Shape>
            <Appearance>
                <Material diffuseColor='0.603 0.894 0.909' />	
            </Appearance>
            <Box DEF='box'/>
        </Shape>
    </Scene>
</X3D>

อย่างเช่นโค้ดข้างบนนั้นคือ จะได้กล่องมา 1 กล่องครับ

ทั้งหมดนี้ก็เป็นพิธีกรรมในการเริ่มต้นครับ ลองเปิด Web Browser ของคุณได้เลย จะปรากฏกล่องให้คุณหมุนเล่นแล้วแหละครับ
Welcome to Web3D World ครับ : )

สำหรับตัวอย่างอื่นๆสามารถดูได้จากทาง Website ของ X3DOM ได้โดยตรงหรือดูจากหน้า X3DOM ของผมได้เหมือนกันครับ ไม่ต่างกันครับ : )

How to get and set walk speed value in VRML

Posted on by
Reply

How to get and set walk speed value in VRML (VRML version 2.0).

First, you have to create an object for call the javascript function. such as TouchSensor node.

Then, create ROUTE for call the function.

So if you clicked the box that DEF is setWalkSpeed_UP_TOUCH then it’ll call the script at DEF is setWalkSpeed_UP_SCRIPT.

And this is the main part, the JavaScript function.

For this example code, when you clicked the box it’ll set walk speed to 5 and current walk speed will show you on console.

Done! (=

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

Posted on by
12

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

Basic VRML/JavaScript Tutorial

Posted on by
2

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