Skulpt项目中的WebGL动画实现解析-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01061/article/details/148578192

Skulpt项目中的WebGL动画实现解析

skulpt Skulpt is a Javascript implementation of the Python programming language 项目地址: https://gitcode.com/gh_mirrors/sk/skulpt

概述

Skulpt是一个将Python代码编译成JavaScript的运行时环境，它允许开发者在浏览器中直接运行Python代码而无需服务器支持。本文将通过分析Skulpt项目中的一个WebGL动画示例，深入讲解如何在浏览器中使用Python代码实现WebGL图形渲染和动画效果。

WebGL基础概念

WebGL是一种基于OpenGL ES 2.0的JavaScript API，可以在HTML5 Canvas元素中渲染3D和2D图形。在Skulpt中，通过webgl模块提供了对WebGL的Python封装，使得开发者可以用Python语法操作WebGL。

示例代码解析

1. 初始化设置

import webgl
from math import sin

gl = webgl.Context("my-canvas")
trianglesVerticeBuffer = gl.createBuffer()
trianglesColorBuffer = gl.createBuffer()
program = None

这段代码初始化了WebGL环境：

导入必要的模块
创建WebGL上下文，绑定到ID为"my-canvas"的canvas元素
创建两个缓冲区对象，分别用于存储顶点数据和颜色数据
初始化着色器程序变量

2. 着色器程序创建

def setup():
  global program
  vs = gl.createShader(gl.VERTEX_SHADER) 
  gl.shaderSource(vs, "attribute vec3 aVertexPosition; attribute vec3 aVertexColor; varying highp vec4 vColor; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); vColor = vec4(aVertexColor, 1.0); }")
  gl.compileShader(vs)
  print "Vertex shader COMPILE_STATUS: " + str(gl.getShaderParameter(vs, gl.COMPILE_STATUS))

着色器是WebGL的核心，分为顶点着色器和片段着色器：

顶点着色器处理每个顶点的位置和颜色
片段着色器处理每个像素的颜色
编译状态检查确保着色器正确编译

3. 着色器程序链接

program = gl.createProgram()
gl.attachShader(program, vs)
gl.attachShader(program, fs)
gl.linkProgram(program)
print "Program LINK_STATUS: " + str(gl.getProgramParameter(program, gl.LINK_STATUS))
gl.useProgram(program)

将编译好的着色器附加到程序对象并链接，链接状态检查确保程序可以正常使用。

4. 颜色数据准备

triangleVerticeColors = [1.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 1.0, 1.0, 1.0, 0.0, 0.0, 1.0]

gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer)
gl.bufferData(gl.ARRAY_BUFFER, webgl.Float32Array(triangleVerticeColors), gl.STATIC_DRAW)

定义三角形顶点的颜色数据(RGB格式)，并将数据上传到GPU的缓冲区中。

5. 动画渲染函数

def draw(gl, elapsed):
  gl.clearColor(0.1, 0.5, 0.1, 1.0);  
  gl.clear(gl.COLOR_BUFFER_BIT);  
  gl.viewport(0, 0, 400, 300);
  translation = sin(elapsed * 2.0 * 3.14159 / 10000.0)/2.0;

draw函数是动画的核心：

设置清除颜色和清除画布
计算基于时间的平移量，使用正弦函数实现平滑往复运动
根据时间更新顶点位置数据

6. 顶点数据更新与绘制

triangleVertices = [-0.5 + translation,  0.5, 0.0,
                     0.0 + translation,  0.0, 0.0,
                    -0.5 + translation, -0.5, 0.0,
                     0.5 + translation,  0.5, 0.0,
                     0.0 + translation,  0.0, 0.0,
                     0.5 + translation, -0.5, 0.0]

定义两个三角形的位置数据，并根据计算出的平移量更新X坐标，实现左右移动效果。