Kivy - OpenGL

Kivy 框架配备了基于 OpenGL 和 SDL 指令构建的强大图形功能。Kivy 使用 OpenGL ES 2 图形库，并基于顶点缓冲区对象和着色器。"kivy.graphics.opengl"模块是 OpenGL 命令的 Python 包装器。

着色器是用户定义的程序，旨在在图形处理器的某个阶段运行。着色器用 OpenGL 着色语言 (GLSL) 编写，这是一种高级着色语言，其语法基于 C 编程语言。

在 Web 上创建图形的两种常用着色器是顶点着色器和片段（像素）着色器。

顶点着色器 −它们从上一个管道阶段获取输入（例如顶点位置、颜色和光栅化像素），并自定义下一个阶段的输出。
片段着色器 − 它们将所有像素的 2D 位置作为输入，并自定义每个像素的输出颜色。

关于 GLSL 的功能和语法的详细讨论超出了本教程的范围。我们将在本章中使用开源着色器文件 (kaleidoscope.glsl)。

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 resolution;
uniform float time;
uniform sampler2D tex0;
uniform sampler2D tex1;

void main(void){
   vec2 p = -1.0 + 2.0 * gl_FragCoord.xy / resolution.xy;
   vec2 uv;
   float a = atan(p.y,p.x);
   float r = sqrt(dot(p,p));
   
   uv.x = 7.0*a/3.1416;
   uv.y = -time+ sin(7.0*r+time) + .7*cos(time+7.0*a);
   float w = .5+.5*(sin(time+7.0*r)+ .7*cos(time+7.0*a));
   vec3 col = texture2D(tex0,uv*.5).xyz;
   gl_FragColor = vec4(col*w,1.0);
}

在我们的 Kivy 应用程序代码中，我们使用 .kv 文件在 FloatLayout 小部件的画布上简单地绘制一个矩形。

<ShaderWidget>:
   canvas:
      Color:
         rgb: 1, 0, 0
   Rectangle:
      pos: self.pos
      size: self.size

此"kv"文件的 ShaderWidget 规则对应于 ShaderWidget 类。它安排在每一秒后触发一个时钟间隔，以更新着色器定义中的 glsl 变量。

class ShaderWidget(FloatLayout):
   fs = StringProperty(None)
   def __init__(self, **kwargs):
      self.canvas = RenderContext()
      super(ShaderWidget, self).__init__(**kwargs)
      Clock.schedule_interval(self.update_glsl, 1 / 60.)

"fs"类变量存储来自 glsl 文件的代码。kivy.graphics 模块中的 RenderContext() 方法存储了绘制所需的所有信息，即顶点着色器和片段着色器等。

"fs"StringProperty 绑定到将设置着色器的"on_fs()"方法。

def on_fs(self, instance, value):
   shader = self.canvas.shader
   old_value = shader.fs
   shader.fs = value
   if not shader.success:
      shader.fs = old_value
      raise Exception('failed')

每次发生预定的时钟事件时，都会调用 update_glsl() 方法。它基本上会更新应用程序窗口上每个像素的片段颜色。

def update_glsl(self, *largs):
   self.canvas['time'] = Clock.get_boottime()
   self.canvas['resolution'] = list(map(float, self.size))
   win_rc = Window.render_context
   self.canvas['projection_mat'] = win_rc['projection_mat']
   self.canvas['modelview_mat'] = win_rc['modelview_mat']
   self.canvas['frag_modelview_mat'] = win_rc['frag_modelview_mat']

App 类简单地从 kv 文件和类定义中加载 ShaderWidget。

示例

下面给出了完整代码 −

from kivy.clock import Clock
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
from kivy.graphics import RenderContext
from kivy.properties import StringProperty
from kivy.core.window import Window

Window.size=(720,400)
file=open('kaleidoscope.glsl')
shader=file.read()

class ShaderWidget(FloatLayout):
   fs = StringProperty(None)

   def __init__(self, **kwargs):
      self.canvas = RenderContext()
      super(ShaderWidget, self).__init__(**kwargs)
      Clock.schedule_interval(self.update_glsl, 1 / 60.)

   def on_fs(self, instance, value):
      shader = self.canvas.shader
      old_value = shader.fs
      shader.fs = value
      if not shader.success:
         shader.fs = old_value
         raise Exception('failed')

   def update_glsl(self, *largs):
      self.canvas['time'] = Clock.get_boottime()
      self.canvas['resolution'] = list(map(float, self.size)).
      win_rc = Window.render_context
      self.canvas['projection_mat'] = win_rc['projection_mat']
      self.canvas['modelview_mat'] = win_rc['modelview_mat']
      self.canvas['frag_modelview_mat'] = win_rc['frag_modelview_mat']

class 'kaleidoscopeApp(App):
   title='kaleidoscope'
   def build(self):
      return ShaderWidget(fs=shader)

'kaleidoscopeApp().run()