webgl 2d img draw
WebGL / 2017. 3. 1. 23:31
'WebGL' 카테고리의 다른 글
| webGL - 배울 수 있는곳 - learning webgl (0) | 2016.08.18 |
|---|---|
| OpenGL/webGL - 셰이더(쉐이더)? (0) | 2016.08.18 |
| OpenGL/webGL - 성능향상 팁 (0) | 2016.08.18 |
'WebGL'에 해당되는 글 4건
- 2017.03.01 webgl 2d img draw
- 2016.08.18 webGL - 배울 수 있는곳 - learning webgl
- 2016.08.18 OpenGL/webGL - 셰이더(쉐이더)?
- 2016.08.18 OpenGL/webGL - 성능향상 팁
webGL - 배울 수 있는곳 - learning webgl
WebGL / 2016. 8. 18. 23:30
nehe opengl 강좌처럼 되어 있습니다.
http://learningwebgl.com/blog/
 | Lesson 0: Getting Started shows you how to download, install and configure a web browser that can show WebGL content, and gives links to a set of pages that show what it can do. |
 | Lesson 1: A Triangle and a Square gives you an overview of how WebGL works, with enough code to simply draw a static triangle and a square on the screen. |
 | Lesson 2: Adding Colour builds on lesson 1, and adds colour to the triangle and the square. |
 | Lesson 3: A Bit of Movement builds on lesson 2, making the triangle and the square spin around. |
 | Lesson 4: Some Real 3D Objects builds on lesson 3, bringing us into the third dimension fully by replacing the triangle with a pyramid and the square with a cube. |
 | Lesson 5: Introducing Textures shows how you can use an image file to “skin” your 3D objects, giving you a quick and easy way to make them look more interesting. |
 | Lesson 6: Keyboard Input and Texture Filters builds on lesson 6, showing you some more advanced ways to use textures, and also gives some pointers on how to read the keyboard in a way appropriate for 3D scenes and for games. |
 | Lesson 7: Basic Directional and Ambient Lighting introduces the two simplest forms of lighting. |
 | Lesson 8: The Depth Buffer, Transparency and Blending shows one way in which you can simulate transparent materials in WebGL, teaching you a little more theory along the way. |
 | Lesson 9: Improving the Code Structure With Lots of Moving Objects uses simple object-oriented techniques to give us number of independently-animated objects moving around the screen at the same time. |
 | Lesson 10: Loading a World, and the Most Basic Kind of Camerauses techniques from the previous lesson, along with a new trick to simulate a camera that moves around the scene, and demonstrates a kind of nano-Doom  |
 | Lesson 11: Spheres, Rotation Matrices, and Mouse Events shows how to draw spheres, and how to write code so that the user can spin them using the mouse. |
 | Lesson 12: point lighting shows how implement lighting that seems to come from points within your 3D scene. |
 | WebGL Lesson 13: per-fragment lighting and multiple programsdescribes a way of doing more realistic lighting at the cost of more processing time for the graphics card. |
 | WebGL Lesson 14: specular highlights and loading a JSON modelmakes the lighting even better by adding specular highlights, and also shows how to use load up models of 3D objects from JSON files. |
 | WebGL Lesson 15: specular maps shows how to use specular maps, which give your scenes greater realism by making it easy to specify how reflective an object is at every point on its surface, just as normal textures allow you to specify its detailed colour. |
 | WebGL Lesson 16: render-to-texture shows how to render a WebGL scene into a texture that can then be used in another scene — a neat trick in itself, and a useful foundation for other techiques. |
'WebGL' 카테고리의 다른 글
| webgl 2d img draw (0) | 2017.03.01 |
|---|---|
| OpenGL/webGL - 셰이더(쉐이더)? (0) | 2016.08.18 |
| OpenGL/webGL - 성능향상 팁 (0) | 2016.08.18 |
OpenGL/webGL - 셰이더(쉐이더)?
WebGL / 2016. 8. 18. 23:30
점, 선등을 이동,변환, 회전등의 연산을 사용자가 수정할 수 있게 하는 기능.
예) 버텍스 쉐이더, 픽셀쉐이더
이전에는 "파이프라인"이라고 해서, 3D출력 순서가 고정되어 있었습니다.
쉐이더는 이 기능들의 사이 사이에 들어가서, 사용자가 원하는 방식으로 수정할 수 있게 해주는 방법이라고 볼 수 있습니다.
참고
http://alleysark.tistory.com/264
블라인드 렌더러: [포프의 쉐이더 입문강좌] 01. 쉐이더란 무엇이죠? Part 1
kblog.popekim.com/2011/11/01-part-1.html
2011. 11. 29. - 이전편 보기 제1장 쉐이더란 무엇이죠? 쉐이더의 정의 제가 학생들을 가르치면서 제일 처음 듣는 질문 중 하나가 '도대체 쉐이더가 뭐에요?
엑스엑스 노트 :: 셰이더(Shader)란 무엇인가? 기본 개념 정리
xxnote.tistory.com/entry/셰이더Shader란-무엇인가-기본-개념-정리
쉐이더(Shader) 2014.12.31 15:33 |. 1. 셰이더의 정의. 셰이더란 화면에 출력할 픽셀의 위치와 색상을 계산하는 함수. 셰이더의 최종 결과는 농담, 색조, 명암 효과를 ...GpgStudy :: 주제 보기 - 쉐이더가 도대체 뭐에요?
www.gpgstudy.com/forum/viewtopic.php?t=15049
2007. 3. 8. - 댓글 9 - 작성자 4
이놈 정체가 뭡니까? 뭐하는 놈이죠? 쉐이더 쉐이더... 정점 쉐이더, 픽셀 쉐이더... 음... 뭐 하는 놈을 가리키는것 같은데... 딱 정의 내릴 수가 없네요.대충 살아가는 게임개발자 : 그래픽 디자이너를 위한 기초 쉐이더 강좌
chulin28ho.egloos.com/5612944
그래픽 디자이너를 위한 기초 쉐이더 강좌 by 김윤정. 1. 들어가며 이 글은 게임개발포에버 팀블로그에 연재되는 글입니다. 동시에 올라오거나, 다음부터는 링크만 .유니티 - 매뉴얼: Unity 내장 쉐이더 사용 및 퍼포먼스 - Unity Manual
docs.unity3d.com/kr/current/Manual/shader-Performance.html
Unity 내장 쉐이더 사용 및 퍼포먼스. Shaders in Unity are used through Materials, which essentially combine shader code with parameters like textures.유니티 - 매뉴얼: 정점 쉐이더와 Fragment 쉐이더의 프로그래밍
docs.unity3d.com/kr/current/Manual/SL-ShaderPrograms.html
실제 프로그래머블 쉐이더(정점 쉐이더와 Fragment 쉐이더 프로그램과 같은)는 ShaderLab의 쉐이더 개념의 일부입니다. Shader Tutorial에서 기본적인 설명을 ...유니티 - 매뉴얼: 쉐이더: ShaderLab과 고정함수 쉐이더 - Unity Manual
docs.unity3d.com/kr/current/Manual/ShaderTut1.html
쉐이더: ShaderLab과 고정함수 쉐이더. This tutorial teaches you the first steps of creating your own shaders, to help you control the look of your game and ...유니티 - 매뉴얼: 스탠다드 쉐이더(Standard Shader) - Unity Manual
docs.unity3d.com/kr/current/Manual/shader-StandardShader.html
사용자는 다양한 특징의 조합(투명, 범프, 반사 등)을 지원하는 쉐이더 유형의 긴 목록에서 결정할 필요가 없습니다. 스탠다드(Standard) 쉐이더는 그들 모두를 지원 ...게임 개발 포에버 :: 아티스트도 할 수 있는 유니티 셰이더 코딩 - 2side ...
www.gamedevforever.com/304
2014. 1. 8. - 2side shader는 아티스트한테 많이 필요한데, 정작 유니티에서 간단하게 설정할 수는 없게 되어 있으니까 말이죠. 1. 일단 이런걸 만들었다 칩시다.'WebGL' 카테고리의 다른 글
| webgl 2d img draw (0) | 2017.03.01 |
|---|---|
| webGL - 배울 수 있는곳 - learning webgl (0) | 2016.08.18 |
| OpenGL/webGL - 성능향상 팁 (0) | 2016.08.18 |
OpenGL/webGL - 성능향상 팁
WebGL / 2016. 8. 18. 23:30
OpenGL/webGL - 성능향상 팁
- CPU/GUP간 동기화는 매우느리다.
readPixels, finish, getError 등의 불필요한 함수호출은 자재한다.
필요한 정보는 변수에 저장해라.
- 함수 호출 1번으로 많은 내용을 그려라.
drawArrays, drawElements 등의 함수를 한번만 호출하여, 많은 물체를 그려라.
함수를 여러번 호출하면 느려진다.
- texture 이미지는 1장에 모두 그려서, 필요한 부분만 골라서 그리도록 한다.
texture 이미지를 교체할 수록 느려진다.
- 이미지는 가능하면 mipmapping 을 사용해라.
- 간단한 shaders는 빠르다. if문 같은 비교문은 제거해라.
나눗셈, sin,cos, log등의 수학 함수 호출등은 가능하면 피해라. 변수에 미리 값을 계산하여 저장.
- fragment shader(느림)보다는, vertex shader(빠름)에서 가능한 많은 작업을 해라.
- vertex attrib 0 array를 enable로 설정하라.
밉맵 - 위키백과, 우리 모두의 백과사전
https://ko.wikipedia.org/wiki/밉맵
3차원 그래픽스의 텍스처 매핑 분야에서, 밉맵(mipmap)은 렌더링 속도를 향상시키기 위한 목적으로 기본 텍스처와 이를 연속적으로 미리 축소시킨 텍스처들로 ...Mipmap - Wikipedia, the free encyclopedia
https://en.wikipedia.org/wiki/Mipmap이 페이지 번역하기
In computer graphics, mipmaps (also MIP maps) or pyramids are pre-calculated, optimized sequences of images, each of which is a progressively lower ...'WebGL' 카테고리의 다른 글
| webgl 2d img draw (0) | 2017.03.01 |
|---|---|
| webGL - 배울 수 있는곳 - learning webgl (0) | 2016.08.18 |
| OpenGL/webGL - 셰이더(쉐이더)? (0) | 2016.08.18 |