Talks

Play with GLSL on OpenFrameworks

http://rubykaigi.org/2016/presentations/elct9620.html

Learning GLSL (OpenGL Shader Language) is a little harder to me, but if I can create shader like Unreal Engine 4's material design tool? Let's play with Shader on OpenFrameworks.
I using mruby and OpenFrameworks to create a scriptable GLSL generator to create shader. By the power of Ruby DSL, the shader generate becomes very fun and simplely.

蒼時弦也, @elct9620
A Web Developer focus on Interaction Design, and love Game, Animation and Comic. Current working on develop game and website.

RubyKaigi 2016

00:00:00 Today, I want to talk about how to play with GLSL and Ruby using OpenFrameworks.
00:00:07 I will introduce GLSL and OpenFrameworks.
00:00:14 First, let me talk a bit about myself. My name is Tong Shulian. I am a web developer, specializing in digital media design.
00:00:26 I didn't initially decide to pursue programming, but I realized it is a creative field, which I love.
00:00:36 I have been using my programming skills alongside my digital media skills. I started learning Ruby about a month ago, and I find it quite powerful.
00:01:01 I love the friendly community at my company, which is part of Taiwan's Ruby community. I have many opportunities to participate actively.
00:01:09 I want to remind everyone that the Ruby Conference in Taiwan will be held on December 2nd and 3rd. We hope everyone can join us and have fun!
00:01:26 Today, I will show you how I work with GLSL using Ruby and OpenFrameworks. Many people may not know what OpenFrameworks or GLSL are, so I would like to show a demo first.
00:01:54 The most important part of today's talk is how I create a shader generator in Ruby. I can write Ruby code that will be converted to a C-like language, which can control the GPU and render things on the screen.
00:02:14 For this, I will explain how to embed Ruby in C++ classes. Shaders are usually used for 3D models, so we need a basic understanding of physics.
00:02:29 In my demo, I will create a diffuse shader. The diffuse shader in physics defines how light reflects off surfaces. In the real world, surfaces are not perfectly smooth, so we use the diffuse shader to calculate the main light applied to a point and how that light interacts.
00:03:06 Now it's demo time! You can see this shader visualizing a pole. The shader accepts data and responds to mouse movements, which change the light source. I can also load a model and rotate it to see how the light source changes depending on the angle.
00:03:54 For example, I loaded a Ruby logo model, and as I rotate it, the light source changes accordingly. The great thing about shaders is that one shader can be applied to many models. If we want different effects, we can write a new shader. The diffuse shader I created can display more detail on 3D characters and adjust the light color.
00:05:16 If I have enough time, I will demonstrate how to write Ruby code that adjusts and utilizes shaders in real-time.
00:05:50 Before diving deeper, I want to introduce who uses OpenFrameworks and why it is popular.
00:06:06 OpenFrameworks is used by many artists and designers who might not have programming knowledge but want to create visual effects and games. They can leverage OpenGL and tools within OpenFrameworks to make interactive creations.
00:06:54 The shader is essential for creating intricate visual effects and ensuring that surfaces appear dynamic. In the past, my adjustments to values have shown how shaders can create both smooth and rough surfaces depending on parameters.
00:07:30 Shading is crucial in computer graphics. The shader often has different types to manipulate points in 3D space effectively. The vertex shader handles point transformations and is essential for rendering shapes on the screen.
00:08:31 The fragment shader is responsible for determining the colors of pixels, affecting the final output you see. By manipulating these shaders, we can create various effects and control light interactions.
00:09:11 Next, I will detail how I built a shader generator in Ruby, which translates Ruby into shader code.
00:09:38 First, I created an open class that allows Ruby to interact with OpenFrameworks. I incorporated certain features of Ruby into this generator, making it easier to customize shaders.
00:10:33 This process involved working with limitations and adapting my coding approach. My definition of shaders in Ruby includes methods to convert Ruby syntax to GLSL.
00:11:25 The method I defined will create a shader object and ensure it adheres to GLSL's requirements. This includes making adjustments to type safety and proper syntax formatting.
00:12:00 My goal was to optimize the conversion process while utilizing Ruby's flexibility, allowing deeper integration with shaders.
00:12:45 I also created methods to handle type definitions and how these classes interact, ensuring the code remains dynamic and functional.
00:13:00 Now, I have completed a DSL (Domain Specific Language) that allows for a more seamless experience when scripting shaders in Ruby.
00:13:50 With my DSL, creating and adjusting shaders has become a more intuitive process. The methods I’ve developed allow for effective management of shader attributes that can be modified dynamically.
00:14:25 This flexibility also allows for detailed mathematical calculations within the shaders, enhancing the overall graphical output.
00:15:05 Next, I'll demonstrate how Ruby can be embedded in an OpenFrameworks application while maintaining efficiency.
00:15:50 Embedding Ruby allows for quicker iterations in development since you can make real-time adjustments without recompiling the entire program.
00:16:45 In Ruby, defining classes and methods is straightforward. I can create classes that inherit properties from other classes, allowing for a clean and manageable coding approach.
00:17:20 When using Ruby alongside C++, I set up allocate operations to keep memory efficient. This is vital for maintaining performance in applications that require dynamic updates.
00:18:06 The initialization method in my Ruby classes ensures each instance check for expected data, allowing for error handling and proper resource management.
00:18:45 In summary, my shader generator is designed to be flexible and powerful, allowing you to write shaders using Ruby easily.
00:19:25 Finally, I want to clarify that this entire process is about not only generating GLSL code but also enabling artists and developers to write better shaders without deep knowledge of the underlying language.
00:20:15 By simplifying shader creation, I hope to encourage more people to explore graphics programming, regardless of their background.
00:21:05 Now that I have gone through the implementation and concept, I would like to share my GitHub, where I host the shader generator code.It can significantly aid in generating shaders.
00:21:44 I will also demonstrate how to modify Ruby code in real-time while the application runs, which I believe highlights the efficiency of this setup.
00:22:15 You can see how changing one line of Ruby code instantly affects the shader's behavior, showcasing the power of combining Ruby with OpenFrameworks.
00:23:35 Now, let me load another model and show how quickly it adapts to changes I make in the code.
00:24:01 When I load the new model, you'll see it instantly reflects the updated shader effects.
00:24:40 From now on, you can expect fluidity in modifying code for visual effects, which improves workflow and creativity.
00:25:25 This approach allows developers to experiment with shaders in a way that feels responsive and intuitive.
00:26:00 Overall, making shaders accessible is critical for community engagement in graphics programming.
00:27:00 I hope to continue working on this to refine my generator and enhance its capabilities.
00:27:20 I would like to thank everyone for attending my talk today.
00:28:00 I appreciate your attention and hope to see you at future events.
00:28:20 Thank you!