분류 기타

WebGL 라이브러리, 리소스

컨텐츠 정보

  • 조회 259 (작성일 )

본문

WebGL (Web Graphics Library)은 플러그인을 사용하지 않고도 호환 가능한 모든 웹 브라우저에서 대화식 3D 컴퓨터 그래픽 및 2D 그래픽을 렌더링하는 JavaScript API입니다.

WebGL은 브라우저의 모든 웹 표준에 완벽하게 통합되어있어 GPU가 물리 및 이미지 처리 및 효과를 웹 페이지 캔버스의 일부로 가속화 할 수 있습니다.

WebGL 요소는 다른 HTML 요소와 혼합되어 페이지 또는 페이지 배경의 다른 부분과 합성 될 수 있습니다.

WebGL 프로그램은 JavaScript로 작성된 제어 코드와 컴퓨터의 GPU (Graphics Processing Unit)에서 실행되는 셰이더 코드로 구성됩니다.


WebGL articles 

https://medium.com/@mattdesl/non-intrusive-webgl-cebd176c281d#.gyc6h9mr5

https://hacks.mozilla.org/2016/01/webgl-off-the-main-thread/


WebGL topics 

http://codeflow.org/tags/webgl.html

http://www.realtimerendering.com/blog/tag/webgl/

http://webglinsights.blogspot.com/


Online GLSL Editors 

https://www.khronos.org/registry/OpenGL/specs/es/2.0/GLSL_ES_Specification_1.00.pdf

https://www.khronos.org/registry/OpenGL/specs/es/2.0/es_full_spec_2.0.pdf

http://hirnsohle.de/test/fractalLab/

http://glslsandbox.com/

http://glslb.in/

https://www.shadertoy.com/

https://shaderfrog.com/

http://shdr.bkcore.com/


WebGL references 

https://github.com/google/angle

https://www.khronos.org/webgl/wiki/

https://www.w3.org/community/immersive-web/

https://www.khronos.org/webgl/wiki/Errata_to_the_WebGL_Specification

https://www.khronos.org/registry/webgl/extensions/

https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

https://github.com/KhronosGroup/WebGL

https://www.khronos.org/registry/webgl/specs/1.0/


WebGL Tools/Debugging 

https://github.com/KhronosGroup/WebGLDeveloperTools

https://spector.babylonjs.com/

http://benvanik.github.io/WebGL-Inspector/

http://jessevdk.github.io/webgl-play/

http://webglreport.com/?v=1

http://webglstats.com/

http://toji.github.io/texture-tester/

http://google.github.io/tracing-framework/index.html

https://github.com/spite/ShaderEditorExtension

https://chrome.google.com/webstore/detail/spectorjs/denbgaamihkadbghdceggmchnflmhpmk

https://github.com/3Dparallax/insight

https://hacks.mozilla.org/2014/03/introducing-the-canvas-debugger-in-firefox-developer-tools/

https://developer.mozilla.org/en-US/docs/Tools

https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/


WebGL Tutorials 

http://chinedufn.com/webgl-shadow-mapping-tutorial/

https://www.khronos.org/webgl/wiki/Tutorial

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

https://www.tutorialspoint.com/webgl/index.htm

http://learningwebgl.com/blog/?page_id=1217

http://chinedufn.com/webgl-multitexture-blend-map-tutorial/

http://chinedufn.com/webgl-particle-effect-billboard-tutorial/

https://thebookofshaders.com/

http://www.webglacademy.com/

https://webglfundamentals.org/

http://webgl-workshop.com/


WebGL Videos 

https://www.youtube.com/watch?v=tgVLb6fOVVc&feature=youtu.be

https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt


WebGL 2 articles 

https://webgl2fundamentals.org/webgl/lessons/webgl2-whats-new.html

https://blog.tojicode.com/2013/09/whats-coming-in-webgl-20.html

https://docs.google.com/presentation/d/1Orx0GB0cQcYhHkYsaEcoo5js3c5-pv7ahPniIRIzzfg/edit#slide=id.p

https://hacks.mozilla.org/2017/01/webgl-2-lands-in-firefox/

http://www.realtimerendering.com/blog/webgl-2-basics/

http://www.realtimerendering.com/blog/webgl-2-new-features/


WebGL 2 references 

https://www.khronos.org/registry/webgl/specs/latest/2.0/

https://www.khronos.org/files/webgl20-reference-guide.pdf

https://caniuse.com/#feat=webgl2


https://webgl2fundamentals.org/

http://webglsamples.org/WebGL2Samples/

https://github.com/tsherif/webgl2examples


https://www.youtube.com/playlist?list=PLMinhigDWz6emRKVkVIEAaePW7vtIkaIF

https://www.youtube.com/watch?v=Xf65duJ_QFs


WebVR 

https://blog.mozvr.com/

https://janusvr.com/


https://webvr.rocks/

https://mixedreality.mozilla.org/

https://www.uxofvr.com/

https://w3c.github.io/webvr/


https://github.com/sjfricke/awesome-webgl/tree/master/Libraries


https://github.com/schteppe/p2.js

https://phaser.io/

http://www.pixijs.com/

https://github.com/shakiba/planck.js

https://github.com/shakiba/stage.js


Compute (GPGPU) 

https://gammacv.com/

https://github.com/vaneenige/phenomenon


https://cesiumjs.org/

http://deck.gl/

https://luma.gl/

http://xeogl.org/


http://glmatrix.net/

http://sylvester.jcoglan.com/

http://twgljs.org/


https://github.com/emadurandal/GLBoost

https://grimoire.gl/

https://github.com/hiloteam/Hilo3d


https://github.com/kripken/ammo.js/

http://schteppe.github.io/cannon.js/


https://tsherif.github.io/picogl.js/


https://aframe.io/

https://hologram.cool/

https://lovr.org/

https://facebook.github.io/react-360/

https://github.com/capnmidnight/Primrose/


https://www.babylonjs.com/

https://www.blend4web.com/en/

http://claygl.xyz/

https://www.ambiera.com/copperlicht/index.html

http://www.glge.org/

https://github.com/evanw/lightgl.js

http://osgjs.org/

http://vorg.github.io/pex/

https://playcanvas.com/

http://pocket.gl/

http://regl.party/

http://scenejs.org/

https://threejs.org/

https://github.com/turbulenz/turbulenz_engine

https://whs.io/