# WebGL

35개의 포스트
post-thumbnail

[Three.js] Animation 구현하기

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

2022년 6월 11일
·
0개의 댓글
post-thumbnail

[Three.js] 3D 그래픽 입문해보기

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

2022년 6월 9일
·
0개의 댓글
post-thumbnail

[WebGL] 텍스처

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

2022년 6월 7일
·
0개의 댓글
post-thumbnail

[WebGL] Babylonejs 특징

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

2022년 5월 31일
·
1개의 댓글
post-thumbnail

[WebGL] Shader 코드 분리, 텍스쳐

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

2022년 5월 27일
·
0개의 댓글
post-thumbnail

[WebGL] 카메라 View, Projection 사용하기

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

2022년 5월 26일
·
0개의 댓글
post-thumbnail

[WebGL] 6면체 큐브 그리기

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

2022년 5월 26일
·
0개의 댓글

Unity WebGL 기타 오류

발생한 기타 오류 해결 방안

2022년 5월 22일
·
0개의 댓글

IOS에서 Unity Webgl이 Out of bounds memory access 오류가 발생하는 문제

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

2022년 5월 21일
·
0개의 댓글

Unity Webgl과 Websocket

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

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[WebGL] 기본을 알아보자

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

2022년 5월 2일
·
0개의 댓글

1. Unity Build 배포를 위한 Apache Web Server구축 시행착오

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

2022년 4월 20일
·
0개의 댓글
post-thumbnail

Unity3D WebGL 빌드 (WebAssembly) 와 React 와 양방향 통신

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

2022년 4월 12일
·
0개의 댓글

WebGL 번역(Multiple Views, Multiple Canvases)

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

2022년 3월 21일
·
0개의 댓글

WebGL이란?

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

2022년 2월 5일
·
0개의 댓글

Tips for three.js

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

2022년 1월 15일
·
0개의 댓글

Projection Matrix

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

2022년 1월 14일
·
0개의 댓글