如何使用melonjs将球员位置绑定到着色器上？

Question

我创建了一个glsl着色器，如下所示：

<script id="player-fragment-shader" type="x-shader/x-fragment">
precision highp float;

varying vec3 fNormal;
uniform vec2 resolution;

float circle(in vec2 _pos, in float _radius) {
  vec2 dist = _pos - vec2(0.5);
  return 1.-smoothstep(_radius - (_radius * 0.5),
                       _radius + (_radius * 0.5),
                       dot(dist, dist) * 20.0);
}

void main() {
  vec2 pos = gl_FragCoord.xy/resolution.xy;

  // Subtract the inverse of orange from white to get an orange glow
  vec3 color = vec3(circle(pos, 0.8)) - vec3(0.0, 0.25, 0.5);

  gl_FragColor = vec4(color, 0.8);
}
</script>
<script id="player-vertex-shader" type="x-shader/x-vertex">
precision highp float;

attribute vec3 position;
attribute vec3 normal;

uniform mat3 normalMatrix;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;

void main() {
  vec4 pos = modelViewMatrix * vec4(position, 0.25);
  gl_Position = projectionMatrix * pos;
}
</script>

我通过运行以下命令在游戏加载中对其进行初始化：

var vertShader = document.getElementById("player-vertex-shader").text;
var fragShader = document.getElementById("player-fragment-shader").text;
var shader = me.video.shader.createShader(me.video.renderer.compositor.gl, vertShader, fragShader);

这是在初始化视频之后完成的，似乎可以编译着色器程序并正常加载。在shaderfrog.com和其他类似站点中加载着色器时，着色器似乎也可以很好地工作。

问题是，在我移动角色并重新绘制之前，它会让我看到一个完全黑的屏幕。我已经阅读了webgl基础网站，似乎我遗漏的是将字符位置绑定到GL缓冲区。

我如何在melonjs中做到这一点。

Answer 1

嗨，我为melonJS编写了最初的WebGL合成器。

tl;dr:通过从角色的entity.update()方法返回true来强制帧重绘。(或者，增加动画帧速率以匹配游戏帧速率。)

重写update方法的示例：

update: function (dt) {
    this._super(me.Entity, "update", [dt]);
    return true;
}

这允许更新继续正常操作(例如，更新动画状态等)。但是每次返回true都会强制帧重新绘制。

这可能有助于了解合成器的工作方式，以及着色器与melonJS实体的交互方式。本文描述了WebGL与melonJS集成的内部工作原理。简而言之，没有明确的步骤将位置绑定到着色器。位置通过顶点属性缓冲区发送，该缓冲区是批量处理的(通常是整个帧)，并作为一个大数组发送到WebGL。

如果需要对构建顶点缓冲区进行更多控制，或者要执行其他自定义渲染过程，则可以替换默认合成器。这是通过在options.compositor参数中传递对me.video.init的类引用来实现的。缺省值为me.WebGLRenderer.Compositor

me.video.init(width, height, {
    wrapper: "screen",
    renderer : me.video.WEBGL,
    compositor: me.WebGLRenderer.Compositor
});

在绘制循环期间，默认合成器会为每个me.WebGLRenderer.drawImage调用向顶点属性数组缓冲区添加一个新的四边形元素。此方法模拟同名的DOM canvas method。实现非常简单；它只是将参数转换为一个四边形，并调用合成器的addQuad方法。这是顶点属性缓冲区实际填充的位置。

顶点属性缓冲区完成后，调用flush方法，该方法使用gl.drawElements将顶点缓冲区发送到GPU。

melonJS将绘图优化发挥到了极致。它不仅批量处理like-renderables来减少绘制调用的数量(如上所述)，而且如果没有要绘制的东西，它也不会发送任何绘制调用。当帧与上一次绘制的帧相同时，就会出现这种情况。例如，没有实体移动，视口没有滚动，空闲动画没有前进到下一个状态，屏幕计时器没有经过一整秒，等等。

通过让场景中的任何实体从其update方法返回true，可以强制帧重绘。这是游戏引擎需要重绘框架的信号。这个过程在the wiki上有更详细的描述。