顯示具有 WebAR 標籤的文章。 顯示所有文章
顯示具有 WebAR 標籤的文章。 顯示所有文章

2022年2月1日 星期二

MindAR: 用WebAR技術把樹藝生命之美年暦與智創虎年賀歲圖片結合在一起，虎哩幸福一整年



在這2022年的大年初一，敏哥想用WebAR技術把國立臺灣工藝研究發展中心2020年推出的樹藝生命之美年暦與智創虎年賀歲圖片結合在一起，虎哩幸福一整年，歡迎大家留意智創生活科技與樹藝工坊，將在3月份推出科技藝術種子教師培訓課程，完全是免費的喔! 

1.準備作品與

準備樹藝生命之美年暦的電子檔，可以利用手機拍照。


2.準備智創虎年賀歲圖片檔(smartcreating.jpg)。


3.利用Image Targets Compiler編譯生命之美年暦的圖片檔，轉換成影像物件檔。


把生命之美年暦的圖片檔放到上圖Drop files to upload區。


按下上圖的Start鍵


按下上圖的Download compiled鍵，下載targets.mind，並自行建立一個資料夾，例如：TreeArt。

4.從https://hiukim.github.io/mind-ar-js-doc/quick-start/webpage，取得程式碼，並儲存AR html檔案。


5.開啟Web Server for Chrome，按下"啟用應用程式"。


6.按下上圖中"CHOOSE FOLDER"，選擇儲存AR.html程式的資料夾TreeArt。

7.打開Chrome瀏覽器進行測試，http://127.0.0.1:8887/AR.html。


8.修改程式，儲存成AR2.html檔案。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
	  <a-assets>
        <img id="smartcreating" crossorigin="anonymous" src="smartcreating.jpg">
      </a-assets>
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
		<a-image src="#smartcreating"></a-image>
      </a-entity>
    </a-scene>
  </body>
</html>

9.把smartcreatimg.jpg檔案放到和AR.html同一個目錄下。

10.打開Chrome瀏覽器，並輸入http://127.0.0.1:8887/AR2.html，進行測試，就可以看到文章最上面圖片的景像。
張貼者： 於 沒有留言:
標籤： , , ,

2022年1月31日 星期一

MindAR: 使用Python Flask來實現WebAR

MindAR教學網站：https://hiukim.github.io/mind-ar-js-doc/face-tracking-quick-start/webpage

 Flask教學網站：https://flask.palletsprojects.com/en/2.0.x/quickstart/#a-minimal-application

1. 安裝Flask套件，開啟cmd應用程式，輸入下列命令。
pip install Flask


2.使用IDLE來編輯程式，並儲存成test.html。


3.切換到工作目錄，使用python test.py來啟動網站。


4.開啟Chrome進行測試，並輸入127.0.0.1:5000。


5.編輯face_ar.html文件，並儲存在templates資料來中，範例程式摘自Minimal Example。

程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-face-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement: true, physicallyCorrectLights" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera active="false" position="0 0 0"></a-camera>

      <a-entity mindar-face-target="anchorIndex: 1">
    <a-sphere color="green" radius="0.1"></a-sphere>
      </a-entity>
    </a-scene>
  </body>
</html>

6.改寫Flask程式-test.py，黃底是新增的部份。

1
2
3
4
5
6
7
8
from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def hello_world(name=None):
    return render_template('face_ar.html', name=name)

7.測試時要記得在cmd中按下Ctrl+C來中止網站，再執行Python test.py命令重新啟動網站。
8.重新更新Chrome的內容，就可看到AR。


張貼者： 於 沒有留言:
標籤： , , ,

2022年1月23日 星期日

MindAR：從樹藝生命之美的卡片到設計網路版的擴增實境

 在2022年1月9日受邀參加"2022年南投縣文化資產學會第13屆第1次會員大會"，這是一個很有文化內涵的學會，當天除了會員大會外，更安排國立台灣工藝研究發展中心主任張仁吉演講"台灣文化資產的價值與實踐"。


當天收到兩份很棒的工藝作品，其一是學會的藍染衣服，另一個是工藝中心的2022生命之美的年曆。





本文將介紹如何從李永謨老師創作的樹藝生命之美的卡片來實現擴增實境。
1.拍照並利用小畫家，把樹藝卡片存成圖檔。
建議您可以使用圖像分析器，來分析您圖片當成AR影像物件的品質。


2.製作AR影像目標(Image Targets Compiler)，使用編譯器https://hiukim.github.io/mind-ar-js-doc/tools/compile，把上圖放在"Drop files here to upload"區，您也可以點選該區域來選擇要製AR影像目標。

選擇後

3.選擇上圖Start按鈕。

4.點選上圖"Download compiled"按鈕，儲存"targets.mind"。

5.從https://hiukim.github.io/mind-ar-js-doc/quick-start/webpage，複製AR html檔案。

把下面檔案儲存html檔，例如test.html。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/mind-ar-js@1.0.0/dist/mindar-image-aframe.prod.js"></script>
  </head>

  <body>
    <a-scene mindar-image="imageTargetSrc: ./targets.mind;" vr-mode-ui="enabled: false" device-orientation-permission-ui="enabled: false">
      <a-camera position="0 0 0" look-controls="enabled: false"></a-camera>
      <a-entity mindar-image-target="targetIndex: 0">
        <a-plane color="blue" opaciy="0.5" position="0 0 0" height="0.552" width="1" rotation="0 0 0"></a-plane>
      </a-entity>
    </a-scene>
  </body>
</html>

6. 把targets.mind和test.html放在同一目錄下，例如：TreeArt。

7.執行test.html

雖然已經啟動攝像頭，但仍然無法工作，按下右鍵，選擇"檢查"按鈕。
可以發現下面問題
Fetch API cannot load file:///C:/cmlin/TreeArt/targets.mind. URL scheme "file" is not supported.

這是所謂"跨來源資源共享"的問題。

8.要解決這個問題，必須把上述兩個檔案(test.html, targets.mind)放在同一個URL中，就是網站。


就簡單方法就是安裝HFS(HTTP File Server)，下載HFS伺服器執行畫面如下：

9.點選上圖Menu表單中Add files...按鈕，加入test.html和targets.mind兩個檔案。

10.打開chrome瀏覽器，輸入http://127.0.0.1/test.html，並打開攝像頭，拿著生命之美的卡片，對著攝像頭，可以展現AR。


11.另一種啟動Web伺服器的方法Web Server for Chrome。

張貼者： 於 沒有留言:
標籤： , ,

2021年7月30日 星期五

好玩的WebVR，A-Fame一個針對3D/AR/VR所設計的網路框架

A-Frame 無需安裝任何東西，採用 HTML 文件開發，使其易於上手，用於構建虛擬實境 (VR) 體驗的網路框架。A-Frame 不僅僅是 3D 場景圖或標記語言，它的核心更是一個強大的實體組件框架。

網址：https://aframe.io/

範例一：


程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

範例二：

程式碼：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Model Viewer AR - VR</title>
  <meta name="description" content="Model Viewer (VR / AR) • A-Frame">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  <script src="info-message.js"></script>
  <script src="https://unpkg.com/aframe-extras@3.3.0/dist/aframe-extras.min.js"></script>
  <script src="hide-on-enter-ar.js"></script>
  <script src="ar-shadows.js"></script>
  <script src="ar-hit-test.js"></script>
  <script src="model-viewer.js"></script>
  <script src="background-gradient.js"></script>
</head>
<body>

<a-scene
  renderer="colorManagement: true;"
  info-message="htmlSrc: #messageText"
  model-viewer="gltfModel: #triceratops; title: Triceratops">
  <a-assets>
    <!--
      Model source: https://sketchfab.com/3d-models/triceratops-d16aabe33dc24f8ab37e3df50c068265
      Model author: https://sketchfab.com/VapTor
      Model license: Sketcfab Standard
    -->
    <a-asset-item id="triceratops"
      src="https://cdn.aframe.io/examples/ar/models/triceratops/scene.gltf"
      response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>

    <a-asset-item id="reticle"
      src="https://cdn.aframe.io/examples/ar/models/reticle/reticle.gltf"
      response-type="arraybuffer" crossorigin="anonymous"></a-asset-item>

    <img id="shadow" src="https://cdn.glitch.com/20600112-c04b-492c-8190-8a5ccc06f37d%2Fshadow.png?v=1606338852399"></img>
    <a-asset-item id="messageText" src="message.html"></a-asset-item>
  </a-assets>
</a-scene>
</body>
</html>
張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)