Tag Archives: X3DOM

Web3D & SIGGRAPH Conferences 2012, Los Angeles, CA, USA. Diary : Day 2

Posted on by
Reply

LOG
PART 1 : แว๊น | PART 2 : สำรวจโลก | PART 3 : งานวันแรก

PART 4 | วันที่ 5 สิงหาคม 2555 : วันที่ 2 และเป็นวันสุดท้ายของงาน Web3D Conference 2012 และเป็นวันแรกของงาน SIGGRAPH 2012

หลังจากวันแรกของงานผ่านไปได้ด้วยดี วันนี้กิจกรรมก็เหมือนวันแรกครับ นำเสนอเปเปอร์และ Tutorial, Workshop ปกติ แต่ที่ต่างไปมากคือจำนวนคนครับ มีมากเยอะมากๆ ก็เนื่องจากงาน SIGGRAPH นี่แหละครับ

จากภาพนี่เป็นช่วงเช้าก่อนงานเริ่มครับ เห็นเขานั่งเรียงๆกันผมก็เลยไปสมทบกับเขาด้วย ฮ่ะ ๆ ๆ
สำหรับผู้ที่มางานนี้ ต้องไปลงทะเบียนก่อนครับ เพื่อรับป้ายชื่อและจะมี Code ที่บอกว่าเราเข้างานส่วนไหนได้บ้าง ที่เป็นป้ายมีสายห้อยสีเขียวๆนั่นอ่ะครับ ผมก็ไปฉกมามั่ง

เสร็จจากการลงทะเบียน SIGGRAPH แล้วผมก็ขึ้นไปที่ห้องของงาน Web3D ครับ แล้วทีนี้เขาเลื่อนเวลานิดหน่อย เลยมีเวลาไปช๊อปหนังสือครับ ซึ่งก็อยู่ห้องข้างๆกันนี่เอง

มีหนังสือที่น่าสนใจหลายเล่มมากครับ แต่ก็ไม่ได้สอยมาซักเล่มเลย แฮ่ๆ

หลังจากนั้นก็กลับมาที่ห้องครับ มาฟังเรื่อง WebGL โดย Neil Trevett จาก Khronos Group ครับ ถึงแนวทางของ OpenGL ES, WebGL, WebCL และอื่นๆ ที่น่าสนใจมากคือเขาบอกว่า WebCL จะ release ตัวเต็มปีหน้าครับ ซึ่งมันเป็นอะไรที่เป็นอนาคตของ Web3D เลย เพราะปัจจุบันยังมีปัญหาเรื่อง Performance อยู่ครับ ต้องการ Performance Boost ซึ่งหาก WebCL มาจะลบจุดนี้ไปได้เลย มุมมองผมในปัจจุบันผมว่า WebGL ก็มีพลังมากพอในการทำอะไรหลายๆอย่างที่เป็น Commercial แล้วนะครับ และสำหรับงานวิจัยหลายๆงาน ก็นำมาใช้แล้ว งาน Simulation และ Visualization ทางวิศวกรรมและทางการแพทย์ก็เห็นมีการนำมาใช้แล้วในยุโรป ซึ่งผมเห็นว่าอนาคตสดใสดีครับ

ถัดจากนั้นก็มีคนจาก Google มาคุยเรื่อง WebGL, เอา WebGL Experiments หลายๆตัวมาโชว์ ซึ่งผมเคยเห็นหมดแล้ว ไม่ได้รู้สึกตื่นเต้นอะไร แต่ก็มีหลายๆคนสนใจครับ เพราะคนที่เข้ามาฟังส่วนใหญ่ยังอยู่ใน Platform ที่ไม่ใช่แบบเปิด ยังใช้ VRML/X3D กันอยู่ ยังไม่ได้เข้าสู่โลก WebGL เต็มๆ เขาก็มาโชว์อนาคตที่น่าสนใจของเทคโนโลยีตัวนี้ครับ ก็ดีเหมือนกัน โดยรวมผมชอบเรื่องความฮาของพี่แก ฮ่ะ ๆ ๆ ;P

หลังจากเสร็จกิจกรรมช่วงเช้าก็มากินข้าวกลางวันเหมือนเดิมครับ

แล้วก็เริ่มกิจกรรมช่วงบ่ายกันเลย เริ่มด้วยเรื่อง Declarative 3D นำโดย Kristian Sons และ Johannes Behr ครับ ส่วนอีกห้องที่ผมไม่ได้อยู่คือเรื่อง Lightweight Visualization โดย Julien Jomier จาก Kitware ครับ
น่าสนใจดีครับ เขาเอา Binary Compression มาโชว์ แบบว่าเหมือนตัว Performance Boost ที่เคยกล่าวก่อนหน้าอ่ะครับ สามารถเรนเดอร์พ้อยได้เป็นล้านเลย จากปกติไม่กี่แสน เจ๋งดีครับ

หลังจากเสร็จทั้ง 2 กิจกรรมนั้นแล้ว ทุกคนก็มารวมกันที่ห้องเดียวครับ เป็น Session เรื่อง 3D and the Web รวมๆก็คล้ายๆเหมือนไปนั่งรวมกันปล่อยมุขสักพักนึงอ่ะครับ ถึงมาเข้าเรื่อง ฮ่ะ ๆๆ

หลังจาก Session จบลงก็เป็นช่วงของการประกาศผลรางวัลสำหรับ Best Paper Award และ Best Poster Award ครับ ซึ่งผลก็คือ

Best Poster Award, Web3D Conference 2012

Best Poster Award, Web3D Conference 2012

ก็ดีใจครับ ;P
หลายๆคนก็มาแสดงความยินดีครับ ได้นามบัตร ได้คนชวนไปเรียน ส่วนตัวคิดว่าคุ้มค่าครับ เดี๋ยวปีหน้าเอาอีก โดยปีหน้า Web3D Conference 2013 อาจไปจัดที่สเปน หรือไม่ก็ที่เยอรมนีครับ ยังไม่มีการยืนยัน จากที่ฟังตอนเขาปิดงาน
หลังจากจบงาน Web3D Conference 2012 แล้วก็ไปต่อที่งาน SIGGRAPH 2012 ครับ เป็นช่วง SIGGRAPH Paper Fast Forward ซึ่งเป็นอะไรที่ฮามากๆ หลายคนทำวิดีโอนำเสนอได้ฮาสุดๆเป็นอะไรที่ชอบมาก ผมยังไม่เคยเห็นแบบนี้ในไทยเลยครับ รักเลย ฮาๆๆ

SIGGRAPH 2012 Paper Fast Forward

SIGGRAPH 2012 Paper Fast Forward

อันที่จริงเขาไม่ให้ถ่ายรูปนะครับเนี่ย แต่ผมก็ถ่ายมา แถมยังเอามาลง Blog อีก เหอๆๆ
หลังจากยืนอยู่ท้ายๆห้องสักพัก (เพราะเข้าห้องไปช้า คุยกับคนในงาน Web3D นานพอสมควร) เขาก็เปิดห้องใหม่ให้ โดยเป็นห้องที่ดูภาพถ่ายทอดสดจากห้องใหญ่อีกทีครับ

SIGGRAPH 2012 Paper Fast Forward

SIGGRAPH 2012 Paper Fast Forward

หลายๆเปเปอร์ หลายๆโปรเจค น่าสนใจมากๆๆๆๆครับ หากใครมีโอกาสปีถัดๆไปอยากให้มาดูกันครับ หลายๆอย่างไม่น่าเชื่อจริงๆว่ามันเกิดขึ้นแล้ว ;P
หลังจากจบกิจกรรม Paper Fast Forward ก็ออกไปหาข้าวกินกลับที่พักครับ ซึ่งคนเยอะมากๆเลยครับ

SIGGRAPH 2012, LA Convention Center, LA, CA, USA

SIGGRAPH 2012, LA Convention Center, LA, CA, USA

โดยสรุปแล้ว งานสนุกมาก แล้วก็ฟินด้วยครับ เป็นปีแรกด้วย แล้วได้รางวัลอีก ฟินครับ ต้องพัฒนามากขึ้นๆๆๆไปอีกครับ หวังว่าปีหน้าคงได้เจอกันที่งาน Web3D Conference 2013 และสำหรับ SIGGRAPH 2013 ที่จะจัดที่ Anaheim, CA ครับ อยู่ใกล้ Irvine กว่า LA อีก น่าจะได้มีอะไรสนุกๆทำอีกหลายอย่างเลยครับ ;D

[How to] Level Of Detail (LOD) – X3D(OM) Language [Tutorial in Thai language]

Posted on by
Reply

Level Of Detail (LOD) นั้นเป็น Grouping node ตัวหนึ่งในภาษา X3D (หรือเอามาใช้กับ X3DOM ก็ได้ซึ่งใช้ภาษาในการเขียนเป็น X3D เหมือนกัน)
โดย node นี้จะถูกใช้เพื่อการเพิ่มประสิทธิภาพในการเรนเดอร์วัตถุใน Scene เนื่องจากใน Scene ของเรานั้นจะมี Viewpoint อยู่อย่างน้อย node ซึ่งจะเป็นจุดกล้องของเรานั่นเอง ซึ่งมีความห่างในแกน x, y, z กับวัตถุ ซึ่งระยะห่างนี้เราสามารถกำหนดความละเอียดให้กับวัตถุที่เรามองเห็นได้ ลองนึกภาพว่าคุณมองวัตถุที่เห็นไกลๆแล้วคุณเห็นมันไม่ชัด คุณเดินเข้าไปใกล้ขึ้นเรื่อยๆ วัตถุนั้นก็จะชัดขึ้นเรื่อยๆตามลำดับ หากใครที่เคยเล่นเกมแนว 3D มาคงจะพอนึกภาพออกว่าเป็นยังไง
และความละเอียดนั่นเองที่เราจะถูกถึงการเพิ่มประสิทธิภาพของการเรนเดอร์ทั้ง Scene นั้นโดยรวม โดยเฉพาะอย่างยิ่งกับ Scene ที่มีวัตถุหลายๆวัตถุ เราก็ควรจะให้ความสำคัญกับวัตถุที่เราอยู่ใกล้ที่สุด คือ ให้เรามองเห็นสิ่งนั้นชัดที่สุด ละเอียดที่สุด นั่นหมายความว่า ยิ่งความละเอียดเยอะ ยิ่งมี Polygon มาก มีจุดมากนั่นเอง ซึ่งจำนวนจุด (Point) จำนวนรูปสามเหลี่ยม (Triangle) นั่นส่งผลต่อประสิทธิภาพในการเรนเดอร์และค่า Frame rate (หากดู Monitor ของ X3DOM คุณจะเห็นค่านี้แสดงเป็น x FPS โดย x เป็นตัวเลข Floating Point) หรือจากระยะหนึ่ง เข้าไปแล้วให้วัตถุเปลี่ยนไป เข้าไปอีกก็เปลี่ยนไปอีก ก็ได้แล้วแต่เราจะทำครับ

หลังจากพอเข้าใจหลักการคร่าวๆว่าโหนดนี้มีประโยชน์อย่างไร เรามาถึงวิธีการเขียนโหนด LOD กันครับ

<LOD center="0 0 0" range="10 15 20">

	<Group>
		<Shape DEF="Box">
			<Appearance DEF="BlueColor">
				<Material diffuseColor="0.0 0.2 0.8" />
			</Appearance>
			<Box />
		</Shape>
	</Group>

	<Group>
		<Shape>
			<Appearance USE="BlueColor"></Appearance>
			<Cone />
		</Shape>
	</Group>

	<Group>
		<Shape>
			<Appearance USE="BlueColor"></Appearance>
			<Cylinder />
		</Shape>
	</Group>
						
	<WorldInfo info='"null node"' />

</LOD>

จาก Source code
1. เริ่มประกาศโหนด LOD โดยกำหนด Attribute ให้ center มีค่าเป็น 0 0 0 นั่นหมายถึงเริ่มนับตำแหน่งของ LOD ที่จุด 0 0 0 คือจุดกลางของโหนดครับ (ทั้งนี้ไม่นับรวมถึงโหนด Transform นี่ครอบโหนด LOD นี้อีกที) และ range คือระยะห่างจากโหนด LOD ครับ จากตัวอย่างผมให้ระยะห่างเป็น 3 ช่วงคือ 10 15 และ 20 ครับ
2. จากนั้นแบ่งกลุ่มของวัตถุครับ ดังจะเห็นในบรรทัดที่ 3, 12 และ 19 นั่นคือการแบ่งช่วงระยะห่าง โดยนับจาก range คือ ระยะห่างจาก LOD ช่วง 0-10 จะแสดงวัตถุในกลุ่มแรก และมากกว่า 10-15 ก็จะแสดงวัตถุในกลุ่มที่สอง ตามด้วยช่วงมากกว่า 15-20 คือแสดงวันถุในกลุ่มที่สาม และหากระยะห่างจากจุด LOD มากกว่า 20 ขึ้นไป จะแสดงค่าตามบรรทัดที่ 26 ครับ คือบรรทัดนั้นผมกำหนดให้เขาเป็น null node นั่นหมายความว่า จะไม่แสดงอะไรเลย LOD นั้นก็จะหลายเป็นค่าว่างเลยครับ จะไม่มีจุดหรือสามเหลี่ยมอะไรที่ถูกเรนเดอร์ใน LOD นั้นแล้วครับ

จากตัวอย่างผมใช้วิธีเขียนวัตถุโดยใช้ Shape ในการเริ่มสร้างวัตถุง่ายๆขึ้นมาเช่น Box หรือ กล่อง, Cone หรือ กรวย และ Cylinder หรือวัตถุทรงกระบอกโดยให้ค่าเริ่มต้นเป็นค่าพื้นฐาน (Default) ตัววัตถุนั้นๆไป หากต้องการลูกเล่นเพิ่มเริม เราสามารถใช้โหนด Inline ในการเรียกวัตถุจากภายนอกไฟล์มาแทนในกลุ่มนั้นก็ได้ครับ โดยแทนโหนด Shape ไปครับ : )

เริ่มต้นกับ 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 ของผมได้เหมือนกันครับ ไม่ต่างกันครับ : )

Get navigation type and set point rendering by using X3DOM Runtime API

Posted on by
2

First you have to call this method: ready() It is therefore possible to execute custom action by overriding this method in your code:

x3dom.runtime.ready = function()
{
	var id = "x3dom-scene";
	var configure = document.getElementById(id);
	
	/* Default view */
	configure.runtime.showAll();
	getNavigationType(id);
	
	/* =============================================================
	 Arguments:	show (boolean) – true/false to show or hide the debug window
	 Returns: The current visibility status of the debug window (true/false)
	 Displays or hides the debug window. If the parameter is omitted, the current visibility status is returned.
	 ============================================================= */
	configure.runtime.debug(false);
	
	/* =============================================================
	 Arguments:	mode (boolean) – true/false to enable or disable the stats info
	 Returns:The current visibility of the stats info (true/false)
	 Get or set the visibility of the statistics information.
	 If parameter is omitted, this method returns the visibility status as boolean.
	 ============================================================= */
	configure.runtime.statistics(false)
}

That’s your X3DOM scene ID is “x3dom-scene” and your default viewpoint is “showAll”

function getNavigationType(id)
{
	var configure = document.getElementById(id);
	
	var navigationTypeName = configure.runtime.navigationType();
	var currentViewpoint = configure.runtime.viewpoint();
	
	console.log(navigationTypeName);
	console.log(currentViewpoint);
	
	document.getElementById('showNavigationType').innerHTML = navigationTypeName;
	setSpeed(0, id);
}

This method is used to show your current navigation type and your current viewpoint in your X3DOM scene and appear the result to your browser console. and Now, I think you should know how to use X3DOM Runtime API method to your X3DOM scene.

So this is the method that doesn’t public on official page of X3DOM Runtime API, togglePoints method. This method is used to change render type from other to point rendering.

function togglePoint()
{
	var configure = document.getElementById("x3dom-scene");
	configure.runtime.togglePoints();
}

The result example:

When this method was called, your geometry will appear like this.

togglePoints Demo

Set Navigations and Viewpoints by using X3DOM Runtime API

Posted on by
1

This is the simple example code of setting navigations and viewpoints by using X3DOM Runtime API.

function setRuntime(typename, id)
{
	/* ====================================================
	 Arguments:	typename (string) -
	 To change mode or viewpoint.
	 walk() : Switches to walk mode.
	 examine() : Switches to examine mode.
	 lookAround() : Switches to lookAround mode.
	 lookAt() : Switches to lookAt mode.
	 resetView() : Navigates to the initial viewpoint.
	 uprightView() : Navigates to upright view.
	 showAll() : Zooms so that all objects are visible.
	 nextView() : Navigates to the next viewpoint.
	 prevView() : Navigates to the previous viewpoint.
	 Returns: The current mode or viewpoint.
	 Set mode or viewpoint of X3DOM element.
	 ==================================================== */
	
	var configure = document.getElementById(id);
	
	switch (typename)
	{
		case "walk": configure.runtime.walk(); break;
		case "fly": configure.runtime.fly(); break;
		case "examine": configure.runtime.examine(); break;
		case "lookAround": configure.runtime.lookAround(); break;
		case "lookAt": configure.runtime.lookAt(); break;
		case "game": configure.runtime.game(); break;
		case "resetView": configure.runtime.resetView(); break;
		case "uprightView": configure.runtime.uprightView(); break;
		case "showAll": configure.runtime.showAll(); break;
		case "nextView": configure.runtime.nextView(); break;
		case "prevView": configure.runtime.prevView(); break;
		case "upSpeed": setSpeed("up", id); break;
		case "downSpeed": setSpeed("down", id); break
		default: configure.runtime.examine();
	}
	getNavigationType(id);
}

And the experiment.

For more information about X3DOM Runtime API see: http://x3dom.org/docs/dev/api.html

[X3DOM Demo] Create geometry by using JavaScript

Posted on by
Reply

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

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

X3DOM/XML/JavaScript Example (Seat visualization)

Posted on by
Reply

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

Happy Valentine’s Day in Web3D (X3DOM)

Posted on by
Reply

Happy Valentine’s Day 2011 in Web3D (X3DOM)

Link
Happy Valentine’s Day in Web3D (X3DOM) Rotate Version
Support: Chrome 9+ and Webkit.
Happy Valentine’s Day in Web3D (X3DOM) Non-Rotate Version
Support: Chrome 9+, Webkit and Firefox 4 Beta

Music: Stuck In The Moment – Justin Bieber