Encyclopedia of Creative Coding

I published this article on openFrameworks forum also. Recently I was so fascinating to work with raymarching technology in oF, that I decide to write this detailed post about it. Such technology allows to render non-rigid objects such as clouds, create dynamic and truly geneative volumes without meshes, and, additionally, very simply render in in VR or 360-degrees panoramic images. It was not so fast to collect all information, so I sure it will be useful for somebody desired to work with in in a modern oF/GLSL. We (art-duet Endless Attractions Museum ) recently released VR art project "Night sleep was taken from my eyes, V.2". In the project we are thinking, how are our memories formed? Is it possible to visualize the amnesia process? What will the storage look like in the future? Wearing the VR HMD, a viewer found himself flying in a cloudy space. Some clouds contain inside transformed panoramic photos illustrating one day in the life of...

If we have raymarch shader, it's easy to create a panoramic image with it. Here I will explain how to do it by modifying a GLSL fragment shader which performs raymarching (raycasting, raytracing). 1) In the vertex shader, generate normalized 2D coordinates  pos_normalized at [-1,1]x[-1,1] of the rendered pixel: //Declare variable which will be interpolated and passed into fragment shader     out vec2  pos_normalized; //position [-1,1]x[-1,1] //Inside main() shader's function:     gl_Position = modelViewProjectionMatrix * position; //... some normal code     vec2 pos_normalized = gl_Position.xy/gl_Position.w; 2) In the fragment shader, add uniform for passing center of panoram and also optional rotation of panoram horizontally in degrees; and of course pos_normalized input:     uniform vec3 head_position = vec3(0,0,0);     uniform float panoramic_render_angle...

When creating 3D textures (voxel objects), it's may be required to make it "seamless repeated", that means that if the textures placed joined together, the gap between them are smooth (invisible). For example, it's useful for filling the whole 3D space with repeated texture in a raymarching-based project. Hint: Such whole 3D space filling by a repeated 3D texture gives feeling of repeating in the space and may be desirable. But, if you need to eliminate such repeatng feeling, for example, for rendering clouds using 3D-texture, you may mix two same textures but with different scales (1 and 1.2225) and shifted. Maximal color -  max(texture1, texture2) works good for the clouds. Here we explain method for making any 3D texture (voxel object) seamless repeated. Note, the resulted object will be smaller due this procedure. It's based on idea of mixing border voxels with changed mixing value. Normally such technique is used for creating smooth music lo...

When implementing raymatching by scanning a ray to accumulating scene's colors, containing semi-transparent colors (for example, scene with clouds), it's required to properly combine colors using alpha blending method. Here we discuss how to do it and obtain corresponding formula. (So, here we propose that objects has "uniform" ambient lighting and some transparency and all we need to accumulate their colors). The forward alpha blending formula, used "everywhere" - in OpenGL, VJ software, photo and video editors, can be formulated in the following way: Formula for "forward" alpha blending ---------------------------------- Let C is a current RGB color, c is a new RGB color and alpha is a new color's opaqueness (alpha is a float value from 0 to 1). Then updating rule for C is the following:     C = (1- alpha )* C + alpha * c    ---------------------------------- So, the more alpha , the more c affec...

When performing raymarching (as well a raycasting and raytracing) using fragment shaders in OpenGL, it's required to compute ray's origin and direction. Here we will give solution for finding it from the Model View Projection matrices in OpenGL, implemented in openFrameworks. Using it, you can combine raymarching/raycasting/raytracing with forward OpenGL rendering, so obtain hybrid rendering modes. Also, you can use it for creating VE applications based on raymarching or hybrid rendering. (Actually, we checked what this approach is corrent by creating VR rendering app in HTC Vive). The algorithm can be used on any OpenGL platform with any language supporting matrix inversion computation (in our case it's C++ with GLM library, included in openFrameworks 0.10.1). The approach is based on this hint by  GClements in this discussion on the topic: https://community.khronos.org/t/ray-origin-through-view-and-projection-matrices/7257...

Raymarching is a special method of rendering 3D objects or 3D scene: It's used for rendering ocean water, clouds, metaballs in Unreal Engine 4 and other engines and 3D editors. It's a main technique used for rendering 3D in Shadertoy projects. Examples Shadertoy projects of rendering generative volumes, clouds, ocean and skybox reflections: Sculpture III by iq: https://www.shadertoy.com/view/XtjSDK , see more at http://www.iquilezles.org/www/articles/raymarchingdf/raymarchingdf.htm https://www.shadertoy.com/view/MsfGRr https://www.shadertoy.com/view/lss3zr https://www.shadertoy.com/view/XslGRr https://www.shadertoy.com/view/llsXD2 https://www.shadertoy.com/view/XsB3Rm stochastic ray trace by Otavio Good https://www.shadertoy.com/view/WlfXRr  Metaballs and volumetric clouds in Unreal Engine 4: https://www.youtube.com/watch?v=ZbLCIcTHup4 https://www.youtube.com/watch?v=hWNX9jGEt8k Claybook game is made entirely in similar technique: https://www.youtube.com/...