# WebGL

seongmini

지난 시간에 이어, Three.js에서 각종 애니메이션을 구현해보자.Javascript에서 웹 애니메이션을 구현하는 방법은 setInterval을 이용하는 방법, requestAnimationFrame을 이용하는 방법으로 크게 2가지가 있다. 하지만, setInterv

seongmini

Three.js는 웹페이지에 3D 객체를 쉽게 랜더링할 수 있도록 도와주는 Javascript 3D 라이브러리이다. WebGL 기술을 기반으로 랜더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다.WebGLWeb Graphics Libra

rageboom

텍스처란? 3D 모델은 텍스처를 입히는 방법으로 세부적인 질감을 표현하거나 색을 칙하는 기법으로 이를 택스처 맵핑이라고 표현한다. 2차원의 텍스처를 3차원 모델로 맵핑하여 사실적인 3D scene을 구현한다. 위 캡처는 3D 원에 텍스처 맵핑이 된 형태로 해당 모델과

rageboom

Babylonjs 란? HTML5를 이용한 Web rendering engine 으로 얼마전(2022-01-15) version 5.0 release webgl api를 보다 쉽게 사용하게 해준다. License Apache-2.0 역사 및 현재 2013년 마이크로소프

jeongopo

Shader 코드 분리 을 사용해서 원하는 vs, fs 파일을 url로 불러올 수 있게 했다. status로 200을 반환한다면 제대로 파일을 가져온 것이므로 데이터를 읽어올 수 있다.

hopark

iphone WebGame Printf("error\n");

jeongopo

지난번에 사용했던 큐브를 그대로 사용하자.애니메이션을 제거하고 불러내준다카메라를 어디에서 어떤 방향으로 보는지에 따라 값이 변한다.우선 큐브를 원점이 아닌 (-0.5,0,0)으로 이동시키고, 카메라를 (0,0,2)로 이동한다음 어떻게 보이는지 확인하자Matrix4.Se

jeongopo

이전에 vertex 값에 삼각형을 넣고 이동하는 실습까지 했었다.큐브는 z값을 다르게 두고 각 면들을 표현해주어야 한다.drawArray를 사용하면 총 32개의 vertex를 모두 설정해주어야 하지만,drawElements를 사용하면 총 8개의 vertex 만으로도 큐

hopark

Unity WebGL - React 연동하기

hopark

Firebase를 이용하여 webGame hosting하기

fgprjs

발생한 기타 오류 해결 방안

fgprjs

현재 같은 오류가 발생하고 있는 곳이 많으며,다음 링크등에서 언급되고 있다.Ios 15.4+ 버전에서 Unity Webgl빌드가 구동되지 않는다는 이야기이다.

fgprjs

Unity Webgl 빌드는 IP 소켓에 직접 접근 할 수 없는 Javascript 특성상 .Net의 ClientWebsocket이든 Socket이든 TcpSocket이든 뭐든 쓸 수 없다.

rageboom

WebGL은 Web browser에서 점, 선, 삼각형을 이용해 구현하는 그래픽 엔진 입니다.GPU를 사용하기 때문에 그에 맞는 코드를 사용해야 하는데 이는 함수 쌍으로 제공하고 Vertex Shader, Fregment Shader로 불립니다.각 Shader들은 GL

fgprjs

Unity로 Build된 Webgl 결과물을 외부에 공개하고자 하나, 일반적으로 배포하는 방식은 작동하지 않았다. 다음과 같은 방법은 시도하지 않는다. itch.io나 unity에 배포하는 방법 어디까지나 포트폴리오 수준의 작품이므로 개인적인 서버에 배포하는 것이

anna_12

unity 설치 및 세팅 유니티 Unity Hub 를 다운로드하여 Unity 프로그램을 설치한다. 주의 할 점은 프로젝트 설치 경로안에 한글이 포함될 경우 오류가 발생할 가능성이 있으니 모두 영문폴더의 경로에 설치할 것 https://unity.com/kr/downl

tenacious_mzzz

해당 포스트는 WebGL_multiple-views를 번역한 글입니다. 틀린 부분이 있다면, 언제든지 알려주시면 감사하겠습니다!제목: WebGL 여러 관점, 여러 캔버스Description: 여러 관점 그리기TOC: 여러 관점, 여러 캔버스이 글은 더 적은 코드로 즐겁

0hyo

Web Grapthics Library의 약자로 웹상에서 2D 및 3D 그래픽을 렌더링하기 위한 로우 레벨 JavaScript API이다. OpenGL ES2.0을 기반으로 브라우저 엔진에 내장된 HTML5 Canvas 요소 위에 그려진다. 렌더링은 컴퓨터 프로그램을

pixgram

css에서 정한 배경이 안보일때

pixgram

three.js에서 canvas를 리사이즈 할때 요소들이 이상하게 보이지 않게 하려면 다음과 같은 작업을 해줘야 한다.updateProjectionMatrix()라는 것은 3점 좌표(x, y, z)를 2점 좌표(x, y)로 바꾸는 작업이다. 소실점 계산이라고 생각하면