numb3r23 » WebGL https://www.numb3r23.net 'bout coding grafx & more Tue, 27 Oct 2015 00:22:25 +0000 en-US hourly 1 https://wordpress.org/?v=4.0.38 Presentation: Distance fields https://www.numb3r23.net/2015/10/27/presentation-distance-fields/ https://www.numb3r23.net/2015/10/27/presentation-distance-fields/#comments Tue, 27 Oct 2015 00:22:25 +0000 http://www.numb3r23.net/?p=339 I prepared some slides on a presentation on distance fields and what you can do with them:


numb3r23.github.io/cgTalk/04_distancefields.html


A note on the navigation:

  • space for the next slide
  • backspace for the previous slide
  • left/right to jump to the next chapter
  • up/down to navigate in current chapter

Enjoy!

]]> https://www.numb3r23.net/2015/10/27/presentation-distance-fields/feed/ 0 Modified lambert in webgl https://www.numb3r23.net/2015/08/04/modified-lambert-in-webgl/ https://www.numb3r23.net/2015/08/04/modified-lambert-in-webgl/#comments Tue, 04 Aug 2015 18:13:58 +0000 http://www.numb3r23.net/?p=316 i wrote a little demo with a modified lambert function in webgl:

You can clamp the illumination into the “brighter” colors that is expanded into the (usually unlit) back areas and thus allows you lit the whole object. The light can be toggled between a (fixed) lightsource and the camera-position. This is usefull if you (cheaply) don’t want to show “dark parts” of 3d-models while still showing the structure. It can be further tweaked (not implemented yet!) by adding gamma or a two-tone mapping.

]]> https://www.numb3r23.net/2015/08/04/modified-lambert-in-webgl/feed/ 0 WebGL-Paccer (more three.js) https://www.numb3r23.net/2013/05/21/webgl-paccer-more-three-js/ https://www.numb3r23.net/2013/05/21/webgl-paccer-more-three-js/#comments Tue, 21 May 2013 00:52:26 +0000 http://www.numb3r23.net/?p=287 Here’s a little simplified version of a rather known game I’d like to call “WebGL-Paccer”. You play as a yellow ball, trying to eat all the dots before the enemy gets you. Yeah, that one.

WebGL-Paccer

http://www.numb3r23.net/webGLex/paccer

Even though it has a distinct “retro” look, I added an FXAA-aliasing and a bloom-filter to it. I tried doing some dynamic cube-map for floor-reflections, but it didn’t fit the theme.

Maybe in an extended version could not only add more enemies (Blinky, Inky, Pinky, Clyde) but also some more fx. I loved Geometry wars, maybe some effects from them could fit in here…

]]> https://www.numb3r23.net/2013/05/21/webgl-paccer-more-three-js/feed/ 0 WebGL: three.js & dat.gui.js https://www.numb3r23.net/2013/05/17/webgl-three-js-dat-gui-js/ https://www.numb3r23.net/2013/05/17/webgl-three-js-dat-gui-js/#comments Fri, 17 May 2013 17:38:57 +0000 http://www.numb3r23.net/?p=261 I’ve uploaded an updated WebGL demo I wrote some time ago. It shows a vertex displacement shader on simple models and applies some screen-space image filter (=fragment shaders) to it:

http://numb3r23.net/webgl/vertexAndImages

Here are selected screenshots:

Screen Shot 2013-05-17 at 7.03Screen Shot 2013-05-17 at 7.07

Screen Shot 2013-05-17 at 7.04Screen Shot 2013-05-17 at 7.06

The effects implemented are:

  • Vertex shader displacement
  • TwoTone shading
  • CEL-Shading
  • Gaussian Blur
  • Image Enhancement by unsharp masking the depthbuffer
  • Gamma/Contrast/Brightness adjustment
]]> https://www.numb3r23.net/2013/05/17/webgl-three-js-dat-gui-js/feed/ 0