본문 바로가기

개발/WebGL | Canvas

[WebGL] WebGL 개발 입문 GLSL 타입 설명 vec2,3,4 / ivec2,3,4 / bvec2,3,4 각각 floor, integer, bool 타입 벡터 mat2,3,4 2*2, 3*3, 4*4 크기의 부동 소수 매트릭스 sampler2D, samplerCube 2D 또는 큐브 매핑된 텍스처에 대한 핸들 constuniform: 전체 원시 타입 사이에서 값이 일정하다. uniform uSampler;attribute: WebGL 앱에서 vertex별 VS 정보 attribute vec3 aVertexNormals;varying: VS 쓰기, FS 읽기 varying vOriginalPosition; 내장 변수gl_Position / vec4 / vertex 위치 / VS / outputgl_PointSize / float /.. 더보기
[shader] thebookofshaders.com 픽셀마다 계산하는데, 작업이 픽셀개수만큼 반복 ( 800*600 = 480,000이 매 프레임마다)parallel processing.크고 강력한 마이크로프로세서를 쓰는 대신, 작고 많은 마이크로프로세서를 동시에 병렬적으로 쓰는게 낫다. 이게 바로 Graphic Processor Unit(GPU) GLSL = openGL Shading Language 쉐이더 프로그램 언어 왜 어려운가?매 파이프마다 병렬적으로 돌리기 위해서, 모든 쓰레드가 독립적이어야 한다. 쓰레드는 다른 쓰레드가 뭘 하는지 모른다. 이런, blind하고 memoryless 제한이 있는 shader가 프로그래머 사이에서 인기 없게 만든다. 02/1. shader 언어는 color를 return하는 하나의 main 함수를 갖는다.2. 최종.. 더보기
WebGL 기초 출처 https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html WebGL Fundamentals webgl은 3D API라고 생각들 하고 3d로 멋진걸 만들어보겠다고 하는데 WebGL은 그냥 rasterization 엔진일뿐이다. rasterize는 벡터를 픽셀로 표현하다. 라는 동사임 내가 짠 코드로 점찍고, 줄 긋고 다각형을 그린다. 점, 선, 다각형으로 내가 어떻게 코딩하느냐에 따라 WebGL로 무엇을 만들 수 있는지 결정된다. WebGL은 내 컴퓨터 GPU위에서 돌아간다.vertex shader 와 fragment shader라고 불리는 함수를 GLSL라고 불리는 굉장히. 엄격한. C/C++ 타입의 언어로 작성하게 된다. vertex.. 더보기
[threejs] material MeshBasicMaterial Three.js의 기본 material. 지오메트리에 간단한 색상을 부여하거나 지오메트리의 와이어프레임을 보여줄 때 쓸 수 있다. MeshDepthMaterial 카메라로부터의 거리로 메시의 색상을 결정할 떄 사용하는 material MeshNormalMaterial 일반 벡터의 표면 색상에 기반을 둔 간단한 material MeshFaceMaterial 지오메트리의 각각의 면에 고유한 물질을 지정할 수 있도록 해주는 컨테이너 MeshLambertMaterial 빛을 받아 반짝이지 않는 객체를 생성할 때 사용하는 material MeshPhongMaterial 빛을 받아 반짝이는 객체를 생성할 떄 사용하는 meterial ShaderMaterial 꼭지점의 위치와 픽셀 색.. 더보기
[three.js] light THREE.AmbientLight 기본 광원 장면에 있는 객체의 현재 색상에 빛의 색상이 더해진다. THREE.PointLight 한 점에서 모든 방향으로 확산되는 빛. 그림자X THREE.SpotLight 램프나 등 역할. 그림자O THREE.DirectionLight =infinit light. 태양광의 광선과 비슷. 그림자O THREE.HemisphereLight 표면 반사나 희미한 하늘을 흉내내어 자연스러운 외부광을 만드는데 사용. 그림자X THREE.AreaLight 공간에서 한 지점 대신 빛을 발산하는 공간을 지정. 그림자X THREE.LensFlare 광원은 아니지만, 렌즈 플레어 효과를 냄 THREE.AmbientLightTHREE.AmbientLight를 생성하면 색상이 전체에 적용된다... 더보기
[three.js] camera THREE.PerspectiveCamera(fov, aspect, near, far, zoom) var camera = new THREE.PerspectiveCamera(45, window.innerWith/window.innerHeight, 0.1, 1000); fov field of view. 카메라의 시야각을 의미한다. 카메라의 위치에 따라 보여지는 장면이다. 좋은 기본값은 50 (게임은60-90 사이) aspect 렌더링할 화면의 종횡비. far 카메라에서 볼 수 있는 거리 정의. 이 값을 너무 작게 설정하면 장면의 일부가 렌더링되지 않을 것이고, 너무 크게하면 렌더링 성능에 영향을 미칠 수 있다. 좋은 기본 값은 1000 zoom 장면을 줌인/줌아웃할 수 있도록 해준다. 1보다 작으면 줌아웃, .. 더보기
[three.js] scene, camera, renderer var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); scene 객체는 렌더링할 모든 객체와 사용할 모든 광원을 저장하는 데 쓰이는 컨테이너다.camera객체는 장면을 렌더링했을 때 어떻게 보여질 것인지를 정의한다.renderer객체는 scene객체가 camera객체의 각도에 따라 브라우저에서 어떻게 보이는지 산출하는 역할을 담당한다. renderer.setClearColorHex(); renderer.setClearColor(new THREE.Color(0xE.. 더보기
[WebGL] WebGL 개발 입문 WebGL 개발 입문국내도서저자 : 브라이언 댄칠라(Brian Danchilla) / 유윤선역출판 : 길벗 2012.12.26상세보기 정점 = vertex chapter_01 씬 설정 03 WebGL 컴포넌트 드로잉 버퍼 종류: 색상 버퍼, 심도 버퍼, 스텐실 버퍼 버퍼는 읽고 쓸 수 있는 메모리 블록으로, 임시 데이터를 저장하는 공간이다. 색상 버퍼: 색상 정보를 보관하고 선택적으로 투명/불투명도에 해당하는 알파 값 저장 심도 버퍼: 픽셀의 심도(z값)에 대한 정보를 저장. 스텐실 버퍼: 렌더링하거나 렌더링 하지 않을 영역의 경계를 정하는데 사용. 이미지의 한 영역을 렌더링하지 않도록 표시하는 것을 해당 영역을 마스크한다고 말한다. 마스크한 영역을 포함한 전체 이미지는 스텐실이라고 부른다. 원시타입 원.. 더보기
[WebGL] graphic API WebGL을 활용한 3D 그래픽 프로그래밍국내도서저자 : 안드레아스 안유루(Andreas Anyuru) / 윤영민역출판 : 에이콘출판사 2015.06.26상세보기 graphic API 종류- immediate mode API(직접실행모드, 즉시모드)- retained-mode API(유지모드)WebGL와 canvas는 immediate-mode API이고, svg는 retained-mode이다. Immediate-Mode API즉시모드에서는 화면 변경에 상관없이 각 프레임마다 전체 장면을 다시 그린다. API를 제공하는 그래픽 라이브러리는 그려야 하는 scene의 모델을 저장하지 않는다. 대신에 어플리케이션이 화면 표현이 필요할 때 메모리에 저장하기 때문에 높은 유연성과 컨트롤이 가능하다. 하지만 화면 .. 더보기

티스토리툴바