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'에 해당되는 글 6건
- 2017.03.01 webgl 2d img draw
- 2017.03.01 화면주사율(화면 갱신속도 프레임 fps) 논쟁의 결말
- 2016.08.18 webGL - 배울 수 있는곳 - learning webgl
- 2016.08.18 OpenGL/webGL - 셰이더(쉐이더)?
- 2016.08.18 OpenGL/webGL - 성능향상 팁
- 2016.08.18 webGL의 가능성 - 레고 + 구글
화면주사율(화면 갱신속도 프레임 fps) 논쟁의 결말
카테고리 없음 / 2017. 3. 1. 23:30
requestAnimationFrame
과거에 게임의 화면 재생속도논쟁이 있었다.
"fps"로 표시되는, 1초에 몇장의 화면을 그리는것이 좋은가?
1초에 얼마나 많은 화면을 그려야 좋은가?
모니터가 그릴 수 있는 화면이 30~60장/초 인데도, 게임유저들은 100fps가 넘는 고사양을 선호했던 논쟁이었다.(아직도 진행형)
"모르면 무식하다."는 말이 여기에도 적용되는듯.
정리하면, 모니터 화면 재생속도이상 더 빨리, 많이 그려봐야, 손해다.
이는 W3C(World Wide Web 컨소시엄)에서 requestAnimationFrame 기능(함수) 하나로 종결되었다.
저는 밑의 설정과 프로그램 작업을 하지않고 무작정 오버워치를 했을 때최저옵에서도 30~40프레임이 나올정도였습니다.하지만 밑의 작업을 통해 65~70프레임 유지 중입니다. |
ㅎㅎ 모르는것은 죄가 아니나, 알려고 하지않는것은 잘못이다.
다시 말하지만, 모니터 재생속도를 넘는 오버 프레임출력은 무용지물이며, 더 안좋은 결과를 초래한다.
보통 모니터들이 30~60fps이므로, 그 이상은 필요가 없다.
검색결과
아키에이지 인벤 : 고사양 게임 프레임 최소1.5 최대 2배올리는방법[이상 ...
www.inven.co.kr/board/powerbbs.php?come_idx=2645&l=209725
2013. 7. 28. - http://cjhlogix.blog.me/10160186620 이사이트가서 그대로했는데 프레임이 50대에서 100대 되버렸다 ;; 개신기신기 이상한 사이트아니니까 ...오버워치 인벤 : fps 프레임 올리기의 모든 것. - 오버워치 팁과 노하우 ...
www.inven.co.kr/board/powerbbs.php?come_idx=4680&l=2968
2016. 6. 29. - 이 프로그램을 깔기만해도, 게임상 fps를 확인할 수 있으니. 프레임제한설정 여부를 결정하기에 도움이 될 것입니다. 안그래도 어지러운 게임인데 ...대부분이 모르는 프레임(fps) 올리는법 초꿀팁!! : 네이버 블로그 - Naver
m.blog.naver.com/qhdud9174/220254518129
2015. 1. 28. - 이 글은 NVIDIA 그래픽카드 전용 프레임 향상법입니다. 여러 온라인게임이나 콘솔게임들의 그래픽향상으로 고난하시는 분들을 위해 몇가지 팁을 ...게임 fps 올리는 3가지 방법 - YouTube
https://www.youtube.com/watch?v=PJ1dAP8-_Dg
2016. 4. 22. - 업로더: 발사기 dispenser432
편집 오류가 한번 나서 업로드가 늦었습니다. 양해부탁드립니다. 업로드 된 후 몇 분간 화질이 안좋을 수 있습니다. 업로드 된 후 몇분간 음악이 ...프레임을 향상 시켜보자!!!!!! 저사양 컴 추천!!!!!! - 오늘의유머
www.todayhumor.co.kr/?mabi_48812
2015. 2. 28. - 이것을 방지하기 위해 초과되는 프레임을 다운시켜서 화면품질을 올리는 설정. 스레드 최적화: 켜기. 게임이 CPU의 멀티코어를 활용할수 있도록 ...[기획] 그래픽카드 설정만으로 게이밍 성능 올리기 – 아이러브PC방
www.ilovepcbang.com/?mod=news&act=articleView&idxno=42959
2015. 6. 19. - 그렇다고 요구 PC사양이 조금씩 상승하는 온라인게임들의 특성으로 인해 게이밍 성능이 조금씩 줄어드는 것을 지켜보기만 할 수도 없는 노릇이다.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 |
webGL의 가능성 - 레고 + 구글
레고 / 2016. 8. 18. 23:30
이미 실현되고 있는 webGL
https://www.buildwithchrome.com/
구글지도위에 레고를 쌓을 수 있는 홈페이지
구글 개발자들은 역시, 대단합니다.
그런데, 등록은 되어도, 수정 및 삭제는 안된다고 하네요.(언제 고쳐질지..)
(내가 만든것도 수정 못하게 하네...)
"내가 만든건, 다 구글님꺼~"
어쨌든, 스마트폰이 거의 다 보급된 현시점에서, webGL은 어디까지 갈 수 있을지 궁금하다.
핸드폰에서 발열/배터리소모에 막혀, 널리 보급되지 못할지도 모른다.
또한, 3D개발은 시간과 노력이 더 많이 필요하다.
일반 html홈페이지 만드는것도 힘든데, 3D로 만들려면, 수지타산이 맞을지?
장점
- 3D
- 웹브라우져 대부분에서 실행됨
- 모바일폰에서도 동작가능
단점
- 3D라서 발열 및 배터리 소모가 심함
- 개발하기는 쉽지 않음
- TCP/IP 소켓 통신 불가. GET/POST방식으로 해야함.
- 생각보다 느리다.(자바스크립트 기반이라서 그런지)
위 내용은 웹상에서 3D를 구현하는 내용이고, 아래는 웹브라우져에서 OpenGL을 지원하는 기능입니다.
비교적 최신 웹브라우져에, 고사양입니다.
WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL does so by introducing an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5
<canvas> elements.Support for WebGL is present in Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ and Internet Explorer 11+; however, the user's device must also have hardware that supports these features.
'레고' 카테고리의 다른 글
| 레고 비행기 확장 공사2 (0) | 2016.09.25 |
|---|---|
| LEGO CITY 60051 [레고] 레고 시티 고속 열차 (High-speed Passenger Train) 기차 (0) | 2016.09.16 |
| 레고 비행기 확장 공사 (0) | 2016.08.09 |
| 레고블럭 치우는 방법 (0) | 2016.08.02 |
| 레고 헬리콥터 (0) | 2016.06.30 |