Biên tập 360, Thủ thuật 360

Làm thế nào để tạo một ứng dụng AR đơn giản

AR đã được khoảng một thời gian bây giờ, nhưng với sự hỗ trợ của WebRT (real-time truyền thông), có thể cho người dùng trên các thiết bị Android và máy tính để bàn để truy cập camera của điện thoại.

 

Hiện nay, iOS không thể hỗ trợ này vì nó chưa được thực hiện trong trình duyệt WebKit rằng quyền hạn Safari, nhưng nó đang được phát triển và bạn có thể kiểm tra tình trạng  ở đây . Nếu bạn có một thiết bị iOS, bạn không cần phải bỏ lỡ, như bạn vẫn có thể sử dụng webcam trên máy tính để bàn của bạn.

 

Lưu ý:  Để có được điều này làm việc trên trình duyệt Chrome di động, nội dung phải được phục vụ bởi một lớp cổng bảo vệ (tức là qua HTTPS thay vì HTTP tiêu chuẩn). Desktop hiện làm việc với HTTP thông thường mặc dù.

 

  • * Để tải về các tập tin bạn cần cho hướng dẫn này, đi đến  FileSilo , chọn Free Stuff và nội dung miễn phí bên cạnh các hướng dẫn.

 

Trong hướng dẫn này, tôi sẽ cho bạn thấy làm thế nào để đặt một điểm đánh dấu thực tế Augmented trước một camera điện thoại. Điều này sẽ được chọn của các trình duyệt và  AR.js , và nội dung sẽ được ánh xạ trên đầu trong không gian 3D, bám vào các điểm đánh dấu AR.

 

Có rất nhiều công dụng tốt cho kỹ thuật này. Ví dụ, bạn có thể muốn tạo một đơn giản 3D  tiếp tục sáng tạo , và sau đó đánh dấu AR có thể được in trên danh thiếp của bạn. Bởi vì bạn có thể đi bộ xung quanh điểm đánh dấu, điều này là rất tốt cho nội dung mà bạn có thể muốn xem từ các góc độ khác nhau – nghĩ về một nhà sản xuất đồ nội thất Thụy Điển chắc chắn đem lại cho bạn các bước hoạt hình có thể được xem từ mọi góc độ! Có rất nhiều khả năng rằng điều này có thể hữu ích cho.

01. Thêm các thư viện

Bắt đầu bằng cách liên kết lên thư viện dự án của bạn

 

Một khi bạn đã  tải về các tập tin hướng dẫn  đi đến thư mục dự án, mở thư mục khởi động trong trình soạn thảo mã của bạn và sau đó mở lên  index.html  tập tin để chỉnh sửa. Ở giai đoạn này các thư viện cần phải được liên kết lên – và có khá một vài cho dự án này! Các thư viện trong ba phần: Three.js, JSARToolKit, và phần mở rộng Three.js cho ARToolKit và đánh dấu.

 

<Script src = 'js / three.js'> </ script>
<Script src = "js / ColladaLoader.js"> </ script>
<Script src = "vendor / jsartoolkit5 / build / artoolkit.min.js"> </ script>
<Script src = "vendor / jsartoolkit5 / js / artoolkit.api.js"> </ script>
<Script src = "threex-artoolkitsource.js"> </ script>
<Script src = "threex-artoolkitcontext.js"> </ script>
<Script src = "threex-armarkercontrols.js"> </ script>
<Script> THREEx.ArToolkitContext.baseURL = '/' </ script>

02. Hãy quan tâm đến phong cách CSS

 

Trong  đầu  của trang, thêm một số  kịch bản  thẻ và thả trong các quy tắc phong cách cho  cơ thể  và  vải  nguyên tố. Điều này đảm bảo chúng được đặt đúng trên trang mà không có lề mặc định thêm bởi trình duyệt.

 

thân hình {
  margin: 0px;
  overflow: hidden;
}
Tranh sơn dầu {
  position: absolute;
  top: 0;
  trái: 0;
}

03. Thêm các biến toàn cục

 

Trong  cơ thể  của trang, thêm một số  kịch bản  tags nơi mã JavaScript còn cho hướng dẫn này sẽ đi. Có một số biến cần thiết: dòng đầu tiên là dành cho Three.js, thứ hai cho AR.js, thứ ba cho các mô hình và sau đó một biến để tải mô hình.

 

var renderer, cảnh, camera;
var arToolkitContext, onRenderFcts, arToolkitSource, đánh dấu gốc, artoolkitMarker, lastTimeMsec;
var mô hình, tube1, tube2, giữa, chi tiết, xung;
var loader = THREE.ColladaLoader mới ();

04. tải mô hình

 

Trước cảnh được thiết lập mô hình sẽ được nạp để nó có thể được hiển thị khi các dấu hiệu được phát hiện. Này được thu nhỏ lại từ 10 đến khớp với điểm đánh dấu AR. Mô hình này là 10cm cho chiều rộng và chiều cao, do đó đánh dấu là 1cm mà dịch tới 1 increment trong Three.js.

 

loader.load ( 'mô hình / scene.dae', function (collada) {
  mô hình = collada.scene;
  model.scale.x = model.scale.y = model.scale.z = 0,1;
  chi tiết = model.getObjectByName ( “chi tiết", true);

05. Sửa chữa một số vấn đề hiển thị

 

Vẫn còn bên trong mã tải Collada, sau khi mô hình được tải sẽ có một vài ống đó quay xung quanh để họ được tìm thấy trong các cảnh Collada. Ống đầu tiên được tìm thấy và vật chất của nó được nắm lấy. Đây là tài liệu được thiết lập để chỉ hiển thị trên bên trong của mô hình, chứ không phải bên ngoài.

 

tube1 = model.getObjectByName ( “tube1" , true);
var a = tube1.children [0] .material;
a.transparent = true;
a.side = BA [ "mặt sau"];
a.blending = BA [ “AdditiveBlending"];
a.opacity = 0,9;

06. Lặp lại việc sửa chữa

Nếu tính minh bạch và phụ gia pha trộn không được kích hoạt, các mô hình trông như thế này khi được nạp và hiển thị trên đầu trang của các điểm đánh dấu AR – không phải là rất thú vị và hiếm khi nhìn thấy!

 

Như trong bước cuối cùng, nguyên tắc này tương tự được lặp lại đối với ống thứ hai và chế độ hoà trộn, tương tự như những người được tìm thấy trong After Effects và Photoshop, được thiết lập để trở thành một sự pha trộn phụ gia. Điều này cho phép bên ngoài của các điểm ảnh có một sự chuyển tiếp nhẹ nhàng hơn với những hình ảnh camera.

 

tube2 = model.getObjectByName ( "tube2", true);
c = tube2.children [0] .material;
c.transparent = true;
c.side = BA [ "mặt sau"];
c.blending = BA [ "AdditiveBlending"];
c.opacity = 0,9;

07. sửa chữa cuối cùng

 

Mô hình cuối cùng là một vòng tròn quay chỉ ở giữa của thiết kế. Đây theo quy tắc tương tự như trước đây nhưng không làm cho mặt sau của đối tượng, chỉ cần phía trước. Opacity của mỗi người trong số các tài liệu này đã được thiết lập tới 90% chỉ để làm cho nó nhẹ nhàng hơn. Sau khi mô hình được nạp hàm init được gọi.

 

  mid = model.getObjectByName ( "giữa", true);
  b = mid.children [0] .material;
  b.transparent = true;
  b.blending = BA [ "AdditiveBlending"];
 b.opacity = 0,9;
  trong đó();
});

08. Khởi tạo cảnh

 

Hàm init được thiết lập và bên đây các thiết lập renderer được tạo ra. Các renderer đang sử dụng WebGL để cung cấp cho các nhanh nhất làm cho tốc độ đến nội dung và giá trị alpha nền được thiết lập để minh bạch để các hình ảnh camera có thể được nhìn thấy đằng sau này.

 

hàm init () {
  renderer = new THREE.WebGLRenderer ({
  alpha: true
  });
  renderer.setClearColor (THREE.Color mới ( 'lightgrey'), 0);
  renderer.setSize (window.innerWidth, window.innerHeight);
  document.body.appendChild (renderer.domElement);

09. Tạo màn hình hiển thị cảnh

 

Các renderer được thực hiện để có kích thước tương tự như các cửa sổ trình duyệt và bổ sung vào Document Object Model of the page. Bây giờ một mảng trống được tạo ra sẽ lưu trữ các đối tượng phải được trả lại. Một cảnh mới được tạo nên nội dung có thể được hiển thị bên trong này.

 

onRenderFcts = [];
cảnh = new THREE.Scene ();

10. Ánh sáng lên

 

Để có thể xem nội dung trong cảnh, giống như trong thế giới thực, đèn là cần thiết. Một là một ánh sáng màu xám xung quanh trong khi chụp hướng sáng là một màu xanh tắt chỉ để cung cấp cho một sắc thái nhẹ đến nội dung 3D trên màn hình trong bối cảnh đó.

Thử nghiệm với các màu sắc ánh sáng để cung cấp cho một số sắc thái màu khác nhau

 

var môi trường xung quanh = new THREE.AmbientLight (0x666666);
scene.add (xung quanh);
var directionalLight = new THREE.DirectionalLight (0x4e5ba0);
directionalLight.position.set (-1, 1, 1) .normalize ();
scene.add (directionalLight);

 

11. Đèn, máy ảnh, hành động!

 

Với đèn thêm đến hiện trường, phần tiếp theo để thiết lập là máy ảnh. Như trước đây với ánh đèn, một khi tạo ra nó phải được thêm vào hiện trường để được sử dụng. Máy ảnh này sẽ tự động phù hợp với vị trí của các webcam hoặc điện thoại camera qua AR.js.

 

camera = new THREE.Camera ();
scene.add (camera);

12. Thiết lập AR.js

Bật webcam có nghĩa là cả máy tính để bàn webcam và camera của điện thoại có thể được sử dụng để xem nội dung

 

Bây giờ AR.js được thiết lập để nó mất webcam như đầu vào của nó, nó cũng có thể có một hình ảnh hoặc một video được ghi âm. Bộ công cụ AR được kể để khởi và nếu nó thay đổi kích cỡ nó sẽ phù hợp giống như các renderer trên trang HTML.

 

arToolkitSource = new THREEx.ArToolkitSource ({
  sourceType: 'webcam,
});
arToolkitSource.init (chức năng onready () {
  arToolkitSource.onResize (renderer.domElement)
});

13. Giữ nó lại với nhau

 

Bởi vì thay đổi kích thước là cái gì đó xảy ra rất nhiều với màn hình điện thoại di động, như các thiết bị có thể dễ dàng xoay đến mức nó lại có định hướng, cửa sổ trình duyệt được đưa ra một event listener để kiểm tra các thay đổi kích thước. Đây thay đổi kích thước các bộ công cụ AR.

 

window.addEventListener ( 'thay đổi kích thước', function () {
  arToolkitSource.onResize (renderer.domElement)
});

14. AR renderer

 

Các AR.js cần một bối cảnh thiết lập, kêu gọi mở rộng Three.js để làm như vậy. Ở đây phải mất file dữ liệu camera, được bao gồm trong thư mục dữ liệu, và phát hiện ở tốc độ 30 khung hình mỗi giây với độ rộng vải và chiều cao thiết lập cho nó.

 

arToolkitContext = new THREEx.ArToolkitContext ({
  cameraParametersUrl: 'dữ liệu / camera_para.dat',
  detectionMode: 'mono',
  maxDetectionRate: 30,
  canvasWidth: 80 * 3,
  canvasHeight: 60 * 3,
});

15. Lấy dữ liệu camera

 

Bộ công cụ AR được khởi tạo ngay bây giờ và máy ảnh trong cảnh WebGL được ma trận chiếu tương tự như máy ảnh đầu vào từ bộ công cụ AR. Bộ công cụ AR được đẩy vào làm hàng đợi để nó có thể được hiển thị trên màn hình mỗi khung.

 

arToolkitContext.init (chức năng onCompleted () {
  camera.projectionMatrix.copy (arToolkitContext.getProjectionMatrix ());
});
onRenderFcts.push (function () {
  if (arToolkitSource.ready === false) trở lại
  arToolkitContext.update (arToolkitSource.domElement)
});

16. Kết hợp các điểm đánh dấu

 

Các markerRoot là một nhóm sẽ được sử dụng để phù hợp với hình dạng trong thực tế tăng cường. Nó lần đầu tiên được bổ sung vào hiện trường, thì đây được sử dụng cùng với bộ công cụ AR để phát hiện các mô hình, mà cũng nằm trong thư mục dữ liệu.

 

markerRoot = new THREE.Group
scene.add (markerRoot)
artoolkitMarker = new THREEx.ArMarkerControls (arToolkitContext, markerRoot, {
  type: 'mẫu',
  patternUrl: 'dữ liệu / patt.hiro'
});

17. Thêm các mô hình

Ở đây, ống và đĩa quay, trong khi hình lục giác ở trung tâm di chuyển lên và xuống

 

Quay trở lại các bước đầu mô hình đã được nạp và lưu trữ trong các biến của mô hình. Đây được thêm vào  markerRoot  nhóm từ khung trước. Mô hình này đã có một số yếu tố cụ thể bên trong nó mà sẽ được hoạt hình mỗi khung. Họ cũng được đẩy vào làm hàng đợi.

 

markerRoot.add (mô hình);
onRenderFcts.push (function () {
  tube1.rotation.y - = 0,01;
  tube2.rotation.y + = 0,005;
  mid.rotation.y - = 0,008;
  details.position.y = (5 + 3 * Math.sin (1.2 * xung));
});

18. Kết thúc hàm init

 

Các renderer được kể để làm cho cảnh với máy ảnh mỗi khung bằng cách thêm nó vào hàng đợi render, đó là mảng thiết lập ở bước 9. Chức năng Animate được gọi, và điều này sẽ làm cho mỗi khung để hiển thị nội dung. Khung bế mạc kết thúc và đóng hàm init.

 

  onRenderFcts.push (function () {
  renderer.render (cảnh, máy ảnh)
  });
  lastTimeMsec = null;
  animate ();
}

19. Chỉ cần tiếp tục đi

 

Chức năng Animate được tạo ra ngay bây giờ và sử dụng của trình duyệt  requestAnimationFrame , mà là một cuộc gọi để sơn lại trước khi màn hình được rút ra. Đây tiếp tục kêu gọi chính nó, và trình duyệt cố gắng để gọi chức năng này ở 60 khung hình mỗi giây.

 

chức năng Animate (nowMsec) {
  // giữ looping
  requestAnimationFrame (animate);

20. vấn đề Timing

 

trình duyệt di động đôi khi cảm thấy khó khăn để đạt được 60 khung hình mỗi giây với các ứng dụng khác nhau chạy. Ở đây thời gian là làm việc ra sao cho màn hình được cập nhật dựa trên thời gian. Điều này có nghĩa nếu khung thả, có vẻ trơn tru hơn nhiều.

 

lastTimeMsec = lastTimeMsec || nowMsec - 1000-1060;
var deltaMsec = Math.min (200, nowMsec - lastTimeMsec);
lastTimeMsec = nowMsec;
xung = Date.now () * 0,0009;

21. Kết thúc nó lên

Đây là hình ảnh sẽ được phát hiện bởi các máy ảnh như một marker AR; như bạn có thể nhìn thấy nó chia sẻ một số điểm tương đồng với một dấu hiệu QR, mà bạn có thể quen với

 

Cuối cùng mỗi người trong số các yếu tố trong render hàng đợi hiện nay được cung cấp cho màn hình. Lưu trang và xem này từ một máy chủ https trên điện thoại di động hoặc một máy chủ http thường xuyên trên máy tính để bàn, in dấu đã cung cấp và giữ nó ở phía trước của máy ảnh để xem nội dung Augmented.

onRenderFcts.forEach (function (onRenderFct) {
  onRenderFct (deltaMsec / 1000, nowMsec / 1000);
  });
}

About the author

Related Posts

Leave a Reply

Leave a Reply

Your email address will not be published.