JavaScript 및 Google Cardboard로 현실을 필터링합니다-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 및 Google Cardboard로 현실을 필터링합니다

Christopher Nolan

Feb 19, 2025 am 11:47 AM

JavaScript 및 Google Cardboard로 현실을 필터링합니다 키 테이크 아웃

JavaScript 및 HTML5를 활용 하여이 프로젝트는 모바일 브라우저를 Google Cardboard를 통해 AR (Augmented Reality) 뷰어로 변환하여 전화 카메라를 실제 환경에서 필터를 오버레이하기 위해 휴대 전화 카메라를 활용합니다. 구현에는 전화 카메라를 통한 비디오 입력을 캡처하고 다양한 시각적 필터 (예 : Greyscale, Sepia, Pixelated, Verseal Colors)를 적용하고 VR과 같은 경험을 위해 입체보기로 수정 된 출력을 표시합니다. 기술 설정에는 Three.JS 라이브러리를 사용하여 3D 렌더링 및 입체 효과를 처리하여 VR 헤드셋의 각 눈에 적합한 이중 디스플레이를 보장합니다. 주목할만한 기능은 사용자의 시선 방향을 기반으로 필터의 동적 스위칭, 특히 내려다 보면 DeviceorientationEvent에 의해 촉진됩니다. Chrome과 같은 브라우저의 보안 업데이트로 인해 AR 경험을 실행하는 HTTPS 연결이 필요하므로 카메라 기능에 액세스하기위한 안전한 컨텍스트의 중요성을 강조합니다. 이 프로젝트는 웹 기술과 VR 하드웨어를 결합하여 웹 브라우저에서 몰입 형 AR 경험을 만들어 혁신적인 교육, 엔터테인먼트 및 상업용 응용 프로그램을위한 방법을 포장 할 수있는 잠재력을 강조합니다.

모바일 브라우저 내에서 가상 현실을 실행하는 능력은 권한을 부여하고 흥미 롭습니다. Google Cardboard 및 기타 유사한 VR 장치는 믿을 수 없을 정도로 간단하게 만들고 휴대 전화를 홀더에 넣고 이동하십시오! 이전에는 Google Cardboard와 Three.js로 VR을 웹에 가져 오는 것을 다루었으며 웹 데이터를 가져 오는 VR 환경을 구축하는 기본 사항에 대해 논의했습니다. 사람들은 그 기사를 정말 즐겼습니다 (그리고 나는 그 데모를 만드는 것을 정말 좋아했습니다). 그래서 나는 다른 아이디어로 그것을 확장 할 것이라고 생각했습니다. 웹 API를 가져 오는 대신 전화 카메라를 가져 와서 증강 현실 경험으로 바꾸지 않겠습니까?

html5, 캔버스 태그 및 JavaScript로 이미지를 필터링하는 데 완전히 익숙하지 않은 경우, JavaScript in Motion이라는 Learnable에서 주제에 대한 전체 과정이 있습니다! 캔버스 및 비디오 태그를 이해하고 비디오를 캔버스 태그로 스트리밍하는 방법을 이해 하고이 기사에 접근 할 것입니다. 아니면 갈 때 해결할만큼 자신감이 있다고 가정하면!

데모 코드 코드에 똑바로 들어가서 시험 해보고 싶다면 github에서 찾을 수 있습니다. 실제로 시도하고 싶습니까? 여기에는 실행 중 버전이 있습니다 : Reality Filter. 참고 : 최근 크롬이 카메라 입력을 처리하는 방식의 변경은이 작업을 위해 HTTPS를 통해 페이지를 실행해야합니다! 이것이 어떻게 작동하는지

우리는 입체 효과를 통해 표시되는 3.js 장면 인 이전 Google Cardboard 기사에서 동일한 초기 설정을 할 것입니다. 그 효과를 통해 우리는 각 눈에 디스플레이를 가질 수 있으므로 VR에서 3D를 훌륭하게 보이게합니다. 그러나 이전 기사에서 떠 다니는 입자보다는 대부분의 요소를 제거하고 카메라 피드를 재생하는 카메라 앞에 간단한 3.js 메쉬 하나를 배치합니다. 우리의 코드는

에 대해 설명했다 변수 선언을 살펴보면 여기의 대부분의 변수는 이전 데모를 겪은 사람들에게 친숙해 보일 것입니다. 3.js 장면, 카메라, 렌더러, 캔버스 출력 요소, 해당 요소를 배치 할 컨테이너 및 입체 효과를 저장하는 변수를 준비하기위한 변수는 모두 동일합니다. 카메라 피드와 관련된 세 가지 새로운 변수는 비디오, 캔버스 및 컨텍스트입니다. 비디오 - 실제 html5

위 내용은 JavaScript 및 Google Cardboard로 현실을 필터링합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

JavaScript로 문자열 문자를 교체하십시오Mar 11, 2025 am 12:07 AM

JavaScript 문자열 교체 방법 및 FAQ에 대한 자세한 설명 이 기사는 JavaScript에서 문자열 문자를 대체하는 두 가지 방법 인 내부 JavaScript 코드와 웹 페이지의 내부 HTML을 탐색합니다. JavaScript 코드 내부의 문자열을 교체하십시오 가장 직접적인 방법은 대체 () 메소드를 사용하는 것입니다. str = str.replace ( "find", "replace"); 이 메소드는 첫 번째 일치 만 대체합니다. 모든 경기를 교체하려면 정규 표현식을 사용하고 전역 플래그 g를 추가하십시오. str = str.replace (/fi

사용자 정의 Google 검색 API 설정 자습서Mar 04, 2025 am 01:06 AM

이 튜토리얼은 사용자 정의 Google 검색 API를 블로그 또는 웹 사이트에 통합하는 방법을 보여 주며 표준 WordPress 테마 검색 기능보다보다 세련된 검색 경험을 제공합니다. 놀랍게도 쉽습니다! 검색을 Y로 제한 할 수 있습니다

예제 색상 JSON 파일Mar 03, 2025 am 12:35 AM

이 기사 시리즈는 2017 년 중반에 최신 정보와 새로운 예제로 다시 작성되었습니다. 이 JSON 예에서는 JSON 형식을 사용하여 파일에 간단한 값을 저장하는 방법을 살펴 봅니다. 키 값 쌍 표기법을 사용하여 모든 종류를 저장할 수 있습니다.

자신의 Ajax 웹 응용 프로그램을 구축하십시오Mar 09, 2025 am 12:11 AM

그래서 여기 당신은 Ajax라는이 일에 대해 배울 준비가되어 있습니다. 그러나 정확히 무엇입니까? Ajax라는 용어는 역동적이고 대화식 웹 컨텐츠를 만드는 데 사용되는 느슨한 기술 그룹을 나타냅니다. 원래 Jesse J에 의해 만들어진 Ajax라는 용어

8 멋진 jQuery 페이지 레이아웃 플러그인Mar 06, 2025 am 12:48 AM

손쉬운 웹 페이지 레이아웃에 대한 jQuery 활용 : 8 에센셜 플러그인 jQuery는 웹 페이지 레이아웃을 크게 단순화합니다. 이 기사는 프로세스를 간소화하는 8 개의 강력한 JQuery 플러그인을 강조합니다. 특히 수동 웹 사이트 생성에 유용합니다.

' this ' 자바 스크립트로?Mar 04, 2025 am 01:15 AM

핵심 포인트 JavaScript에서는 일반적으로 메소드를 "소유"하는 객체를 말하지만 함수가 호출되는 방식에 따라 다릅니다. 현재 객체가 없으면 글로벌 객체를 나타냅니다. 웹 브라우저에서는 창으로 표시됩니다. 함수를 호출 할 때 이것은 전역 객체를 유지하지만 객체 생성자 또는 그 메소드를 호출 할 때는 객체의 인스턴스를 나타냅니다. call (), apply () 및 bind ()와 같은 메소드를 사용 하여이 컨텍스트를 변경할 수 있습니다. 이 방법은 주어진이 값과 매개 변수를 사용하여 함수를 호출합니다. JavaScript는 훌륭한 프로그래밍 언어입니다. 몇 년 전,이 문장은있었습니다