贡献 p5.js WEBGL模式架构

p5.js WEBGL模式架构

本文档描述了p5.js WEBGL模式的结构，供p5.js的贡献者、维护者和其他感兴趣的人参考。如果您对在草图中使用3D图形感兴趣，请查看此教程。

结构和对象概述

WEBGL架构中的核心对象包括p5.Renderer.GL、p5.Shader、p5.Texture和p5.Geometry。 p5.Renderer.GL的单个实例管理其自己的p5.Shaders、p5.Textures和p5.Geometry。其中一个目标是允许使用WebGL进行屏幕外渲染，但尚未进行测试。 着色器和纹理与特定的GL上下文关联在一起，通过渲染器进行管理。

p5.RendererGL

p5.RendererGL对象是p5.js的WEBGL/3D模式渲染器。 它继承自p5.Renderer，提供了2D模式中不可用的额外功能，例如：box()，cone()，着色器的使用，加速纹理渲染和光照。

  • 管理（创建和缓存）着色器（p5.Shader对象）和纹理（p5.Texture对象）
  • 通过着色器准备形状的坐标，用作属性数组
  • 在调用描边、填充、纹理和各种光照方法时，选择正确的着色器，并向这些着色器提供适当的uniform变量
  • 维护与光照有关的数据：使用各种类型的光源及其参数的计数
  • 缓存三维基元的几何形状（在保留模式下），除了使用begin/endShape创建的形状，这些形状在每次绘制时都会动态生成并推送到GL中（在即时模式下）。

渲染器负责选择适当的p5.Shader来满足当前的绘图条件。

p5.Shader

p5.Shader类提供了对GL程序的uniform变量和attribute变量的访问。

  • 编译和链接顶点着色器和片元着色器组件
  • 提供API来访问和设置着色器的属性和uniform变量
  • 在渲染形状之前，绑定着色器所需的纹理
  • 提供bindShader()方法，在绘制形状之前使用，在形状绘制之后解绑着色器。

有四个默认的着色器，如着色器部分所述。

p5.Texture

p5.Texture对象根据p5.Image、p5.MediaElement、p5.Element或ImageData管理基于纹理的GL状态。

  • 在内部处理基于类型的图像数据处理，这样p5.Renderer的实现在处理纹理时就不需要在自己的方法中做特殊例外。
  • 根据情况每帧进行更新，通过猜测图像数据是否发生了变化。如果没有进行更改，则尽量不上传纹理，以提高性能。

p5.Geometry

在p5.Renderer对象的缓存中，以p5.Geometry对象的形式存储在保留模式下呈现的形状。 渲染器根据绘制的形状和其参数（例如使用box(70, 80, 90, 10, 20)创建的盒子的几何形状通过'box|70|80|90|10|20'进行映射）将字符串映射到p5.Geometry对象。调用使用保留几何形状的函数时，首次通过创建一个p5.Geometry对象，并使用上述字符串ID将其存储在几何哈希中。后续的调用会在哈希中查找该ID，如果找到则使用它引用现有对象，而不是创建一个新对象。

  • 为几何形状的顶点、法线、面、线顶点、线法线和纹理坐标存储数据。
  • 提供计算一组顶点的面、法线、线顶点和线法线的方法。

即时模式

使用即时模式进行绘制的所有属性都存储在渲染器中的对象中，用于绘制到GL绘图上下文，然后被丢弃。

几何形状：保留模式和即时模式

保留几何形状用于3D基本图形，而即时模式用于使用begin/endShape创建的形状。

使用保留几何形状的函数使用即时模式几何形状的函数
plane()bezier()
box()curve()
sphere()line()
cylinder()beginShape()
cone()vertex()
ellipsoid()endShape()
torus()point()
triangle()curveVertex()
arc()bezierVertex()
point()quadraticVertex()
ellipse()
rect()
quad()
text()

纹理管理

p5.Renderer.GL实例按需管理一组p5.Textures对象。 为使用texture()方法或作为自定义着色器提供的uniform的图像和视频创建纹理。

当渲染器需要纹理时，首先检查是否已经为给定的图像/视频创建了纹理，然后将其提供给着色器进行渲染。只有在找不到图像/视频的现有纹理时才会创建新的纹理。

着色器

着色器的类型

Color Shader（颜色着色器）

基于当前填充颜色，为对象提供平面着色。

Light Shader（用于光照和纹理）

考虑以下内容：

  • 由ambientLight()、directionalLight()、pointLight()、spotLight()和specularColor()设置的光照参数
  • 由ambientMaterial()、emissiveMaterial()和specularMaterial()设置的材质参数
  • 由texture()设置的纹理参数

Normal Shader（法线着色器）

在使用normalMaterial()时设置法线着色器。它使用表面的法线矢量来确定片段的颜色。

着色器参数

标准模型视图和相机uniforms

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
uniform mat4 uModelViewMatrix;xxxxx
uniform mat4 uProjectionMatrix;xxxxx
uniform vec4 uViewPort;x
uniform vec4 uPerspective;x

几何属性和uniforms

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
attribute vec3 aPosition;xxxxx
attribute vec3 aNormal;xx
attribute vec2 aTexCoord;xx
uniform mat3 uNormalMatrix;xx
attribute vec4 aDirection;x
uniform float uStrokeWeight;x

材质颜色

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
uniform vec4 uMaterialColor;xxx
attribute vec4 aVertexColor;x

光照参数

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
uniform int uAmbientLightCount;x
uniform int uDirectionalLightCount;x
uniform int uPointLightCount;x
uniform int uSpotLightCount;x
uniform vec3 uAmbientColor[8];x
uniform vec3 uLightingDirection[8];x
uniform vec3 uDirectionalDiffuseColors[8];x
uniform vec3 uDirectionalSpecularColors[8];x
uniform vec3 uPointLightLocation[8];x
uniform vec3 uPointLightDiffuseColors[8];x
uniform vec3 uPointLightSpecularColors[8];x
uniform float uSpotLightAngle[8];x
uniform float uSpotLightConc[8];x
uniform vec3 uSpotLightDiffuseColors[8];x
uniform vec3 uSpotLightSpecularColors[8];x
uniform vec3 uSpotLightLocation[8];x
uniform vec3 uSpotLightDirection[8];x
uniform bool uSpecular;x
uniform bool uEmissive;x
uniform int uShininess;x
uniform bool uUseLighting;x
uniform float uConstantAttenuation;x
uniform float uLinearAttenuation;x
uniform float uQuadraticAttenuation;x

纹理参数

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
uniform sampler2D uSampler;x
uniform bool isTexture;x

通用参数

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
uniform float uResolution;x
uniform float uPointSize;xx

变量参数

参数线条着色器纹理光照着色器颜色着色器法线着色器点着色器
varying vec3 vVertexNormal;x
varying vec2 vVertTexCoord;x
varying vec3 vLightWeighting;x
varying highp vec2 vVertTexCoord;x
varying vec4 vColor;x
varying float vStrokeWeightx

下一步计划

即将推出！