Three.js自定义着色器

Question

请注意，下面的代码在第3次编辑时已经发生了很大变化。

我非常喜欢Brandon Jones的一篇博客文章（在这里找到）。我想将他的代码转换为Three.js，但是我遇到了一些问题。你可以在这里找到他的完整代码。以下是我迄今为止的尝试，并附有一些我提出的问题的注释：

// Shader
var tilemapVS = [
    "attribute vec2 pos;",
    "attribute vec2 texture;",

    "varying vec2 pixelCoord;",
    "varying vec2 texCoord;",

    "uniform vec2 viewOffset;",
    "uniform vec2 viewportSize;",
    "uniform vec2 inverseTileTextureSize;",
    "uniform float inverseTileSize;",

    "void main(void) {",
    "   pixelCoord = (texture * viewportSize) + viewOffset;",
    "   texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;",
    "   gl_Position = vec4(pos, 0.0, 1.0);",
    "}"
].join("\n");

var tilemapFS = [
    "precision highp float;",

    "varying vec2 pixelCoord;",
    "varying vec2 texCoord;",

    "uniform sampler2D tiles;",
    "uniform sampler2D sprites;",

    "uniform vec2 inverseTileTextureSize;",
    "uniform vec2 inverseSpriteTextureSize;",
    "uniform float tileSize;",
    "uniform int repeatTiles;",

    "void main(void) {",
    "   if(repeatTiles == 0 && (texCoord.x < 0.0 || texCoord.x > 1.0 || texCoord.y < 0.0 || texCoord.y > 1.0)) { discard; }",
    "   vec4 tile = texture2D(tiles, texCoord);",
    "   if(tile.x == 1.0 && tile.y == 1.0) { discard; }",
    "   vec2 spriteOffset = floor(tile.xy * 256.0) * tileSize;",
    "   vec2 spriteCoord = mod(pixelCoord, tileSize);",
    "   gl_FragColor = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize);",
    //"   gl_FragColor = tile;",
    "}"
].join("\n");

this.material = new THREE.ShaderMaterial({
    attributes: {
        //not really sure what to use here, he uses some quadVertBuffer
        //for these values, but not sure how to translate.
        pos: { type: 'v2', value: new THREE.Vector2(0, 0) },
        texture: { type: 'v2', value: new THREE.Vector2(0, 0) }
    },
    uniforms: {
        viewportSize: { type: 'v2', value: new THREE.Vector2(viewport.width() / this.tileScale, viewport.height() / this.tileScale) },
        inverseSpriteTextureSize: { type: 'v2', value: new THREE.Vector2(1/tileset.image.width, 1/tileset.image.height) },
        tileSize: { type: 'f', value: this.tileSize },
        inverseTileSize: { type: 'f', value: 1/this.tileSize },

        tiles: { type: 't', value: tilemap },
        sprites: { type: 't', value: tileset },

        viewOffset: { type: 'v2', value: new THREE.Vector2(Math.floor(0), Math.floor(0)) },
        inverseTileTextureSize: { type: 'v2', value: new THREE.Vector2(1/tilemap.image.width, 1/tilemap.image.height) },
        //is 'i' the correct type for an int?
        repeatTiles: { type: 'i', value: 1 }
    },
    vertexShader: tilemapVS,
    fragmentShader: tilemapFS,
    transparent: false
});

/*this.material = new THREE.MeshBasicMaterial({
    color: 0xCC0000
})*/

this.plane = new THREE.PlaneGeometry(
    tilemap.image.width * this.tileSize * this.tileScale, //width
    tilemap.image.height * this.tileSize * this.tileScale//, //height
    //tilemap.image.width * this.tileScale, //width-segments
    //tilemap.image.height * this.tileScale //height-segments
);

this.plane.dynamic = true;

this.mesh = new THREE.Mesh(this.plane, this.material);

一旦我加载页面，就会出现以下错误：

TypeError: v1 is undefined
    customAttribute.array[ offset_custom ] = v1.x;

我确定这与我的属性设置有关，但我不确定应该是什么。由于Three.js中的自定义着色器文档很少或根本没有，因此任何帮助都将不胜感激。

编辑：以下是博客文章中用于填充顶点着色器（pos和texture）的2个属性的代码：

//in ctor
var quadVerts = [
    //x  y  u  v
    -1, -1, 0, 1,
     1, -1, 1, 1,
     1,  1, 1, 0,

    -1, -1, 0, 1,
     1,  1, 1, 0,
    -1,  1, 0, 0
];

this.quadVertBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(quadVerts), gl.STATIC_DRAW);

this.tilemapShader = GLUtil.createProgram(gl, tilemapVS, tilemapFS);

//...

//then on the draw method
gl.bindBuffer(gl.ARRAY_BUFFER, this.quadVertBuffer);

gl.enableVertexAttribArray(shader.attribute.position);
gl.enableVertexAttribArray(shader.attribute.texture);
gl.vertexAttribPointer(shader.attribute.position, 2, gl.FLOAT, false, 16, 0);
gl.vertexAttribPointer(shader.attribute.texture, 2, gl.FLOAT, false, 16, 8);

我真的不完全理解这里到底发生了什么，但如果我没错的话，我认为它正在将两个 Float32Array 填充到每个 quadVertBuffer 的一半数据中。我不仅不确定为什么，也不确定我是否正确，也不知道如何将其转换为 Three.js 的方法。

---

编辑2：目前我正在使用平面来显示（2D）背景，我是否应该改用精灵？

---

编辑3::

当我意识到Three.js会为我设置位置和uv向量时，我又前进了一步（这似乎与上面的例子中的位置/纹理相似甚至相同）。我还注意到，由于许多我的'v2'类型（调用uniform2f）实际上是通过uniform2fv加载的，所以我把它们改成了'v2v'并更新了值。现在我不再收到错误信息了，并且它确实绘制了某些东西，只是不完全是瓦片地图。

以下是更新后的顶点着色器：

var tilemapVS = [
    "varying vec2 pixelCoord;",
    "varying vec2 texCoord;",

    "uniform vec2 viewOffset;",
    "uniform vec2 viewportSize;",
    "uniform vec2 inverseTileTextureSize;",
    "uniform float inverseTileSize;",

    "void main(void) {",
    "   pixelCoord = (uv * viewportSize) + viewOffset;",
    "   texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;",
    "   gl_Position = vec4(position.x, position.y, 0.0, 1.0);",
    "}"
].join("\n");

和更新后的着色器材质：

this._material = new THREE.ShaderMaterial({
    uniforms: {
        viewportSize: { type: 'v2v', value: [new THREE.Vector2(viewport.width() / this.tileScale, viewport.height() / this.tileScale)] },
        inverseSpriteTextureSize: { type: 'v2v', value: [new THREE.Vector2(1/tileset.image.width, 1/tileset.image.height)] },
        tileSize: { type: 'f', value: this.tileSize },
        inverseTileSize: { type: 'f', value: 1/this.tileSize },

        tiles: { type: 't', value: tilemap },
        sprites: { type: 't', value: tileset },

        viewOffset: { type: 'v2', value: new THREE.Vector2(0, 0) },
        inverseTileTextureSize: { type: 'v2v', value: [new THREE.Vector2(1/tilemap.image.width, 1/tilemap.image.height)] },
        repeatTiles: { type: 'i', value: 1 }
    },
    vertexShader: tilemapVS,
    fragmentShader: tilemapFS,
    transparent: false
});

这是我得到的结果：

任何想法都受欢迎！

---

编辑4：

如果我将顶点着色器更改为使用我发现的“Three.js方法”来设置gl_Position，我可以更接近目标，但是精灵表中的偏移量不正确。我认为pixelCoord变量设置错误了（因为uv比texture略有不同）。

我将顶点着色器的主函数更改为：

void main(void) {
   pixelCoord = (uv * viewportSize) + viewOffset;
   texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;
   gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

现在我从纹理图中获取了实际的瓷砖，但它选择的实际瓷砖是错误的。

越来越接近了，仍然感谢任何帮助。

---

编辑5：

我猜这将是我的最后一次更新，因为我即将得到答案。在设置tileset.flipY = false;之后，其中tileset是实际的纹理图块，而不是红色地图。我得到了所有正确的图块落在正确的位置；除了它们都是上下颠倒的！

在此更改后，它看起来像这样：

有没有一种方式可以在不编辑图块集图像的情况下翻转每个单独的纹理沿Y轴？我感觉我可以在我的着色器中添加一些简单的向量数学来翻转它绘制的每个纹理并完成这个操作。

我注意到，如果我不翻转两个（tilemap.flipY = false;和tileset.flipY = false;），我会得到正确的纹理，在正确的位置上，正确地拼合在一起。但是整个地图是颠倒的！就差一步了...

- Chad

---

你能否分享一下你的完整代码链接？如果有一个可以调试错误的工作链接，那就更好了。 - mrdoob

@mrdoob 当然，https://github.com/englercj/lttp-webgl 是代码库。您可以克隆它并打开index.html。选择“加载资源”，然后选择“启动游戏”。相关的代码主要在 js/game/lib/core/TileMap.js 中找到，并在 js/game/lib/core/Engine.js 中实例化并添加到场景中。 resources 对象中的所有属性都是使用 THREE.TextureLoader 加载的 THREE.Texture。谢谢！ - Chad

我还在那里放了Brandon的代码作为参考，尽管它们没有被使用（它们以“brandons_”为前缀）。 - Chad

@mrdoob 自您上次请求代码以来，代码库已经发生了重大变化。您应该能够从第4和第5个编辑中获取所需的所有信息，但是如果您仍然需要完整的代码，则可以在该github链接上获取最新版本。我目前正在使用主分支进行工作。 - Chad

@mrdoob 有没有一种干净的方法可以在Three.js中使用gl.UNPACK_FLIP_Y_WEBGL？（或者如果已经存在，可能将其关闭？）这可能会解决他的问题。 - Toji

@Toji，这就是我设置为false的.flipY属性的作用。它来自于_gl.pixelStorei(_gl.UNPACK_FLIP_Y_WEBGL, texture.flipY)，但是生成的纹理仍然是倒置的。如果我不在tilemap和tileset纹理上都设置这个标志，那么地图就无法对齐，会使用错误的纹理。 - Chad

Answer 1

我设法让它“工作”，尽管我不认为它已经“修复”了。

我翻转了瓦片地图（tilemap.flipY = true），取消了瓦片集的翻转（tileset.flipY = false），然后修改了 mapmaker.html（Toji编写的将创建这些瓦片地图的文件），以在精灵表（瓦片集）上倒置每个瓦片。

我非常希望有一个不同的答案，可以真正解决问题，而不是像这样绕过它，但现在这是我的解决方案。

以下是完整的相关代码。

着色器：

var tilemapVS = [
    "varying vec2 pixelCoord;",
    "varying vec2 texCoord;",

    "uniform vec2 viewOffset;",
    "uniform vec2 viewportSize;",
    "uniform vec2 inverseTileTextureSize;",
    "uniform float inverseTileSize;",

    "void main(void) {",
    "    pixelCoord = (uv * viewportSize) + viewOffset;",
    "    texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;",
    "    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
    "}"
].join("\n");

var tilemapFS = [
    //"precision highp float;",

    "varying vec2 pixelCoord;",
    "varying vec2 texCoord;",

    "uniform sampler2D tiles;",
    "uniform sampler2D sprites;",

    "uniform vec2 inverseTileTextureSize;",
    "uniform vec2 inverseSpriteTextureSize;",
    "uniform float tileSize;",
    "uniform int repeatTiles;",

    "void main(void) {",
    "    vec4 tile = texture2D(tiles, texCoord);", //load this pixel of the tilemap
    "    if(tile.x == 1.0 && tile.y == 1.0) { discard; }", //discard if R is 255 and G is 255
    "    vec2 spriteOffset = floor(tile.xy * 256.0) * tileSize;", //generate the offset in the tileset this pixel represents
    "    vec2 spriteCoord = mod(pixelCoord, tileSize);",
    "    vec4 texture = texture2D(sprites, (spriteOffset + spriteCoord) * inverseSpriteTextureSize);",
    "    gl_FragColor = texture;",
    "}"
].join("\n");

着色器材质（其中tilemap和tileset是THREE.Texture）：

//Setup Tilemap
tilemap.magFilter = THREE.NearestFilter;
tilemap.minFilter = THREE.NearestMipMapNearestFilter;
if(this.repeat) {
    tilemap.wrapS = tilemap.wrapT = THREE.RepeatWrapping;
} else {
    tilemap.wrapS = tilemap.wrapT = THREE.ClampToEdgeWrapping;
}

//Setup Tileset
tileset.wrapS = tileset.wrapT = THREE.ClampToEdgeWrapping;
tileset.flipY = false;
if(this.filtered) {
    tileset.magFilter = THREE.LinearFilter;
    tileset.minFilter = THREE.LinearMipMapLinearFilter;
} else {
    tileset.magFilter = THREE.NearestFilter;
    tileset.minFilter = THREE.NearestMipMapNearestFilter;
}

//setup shader uniforms
this.offset = new THREE.Vector2(0, 0);
this._uniforms = {
    viewportSize: { type: 'v2', value: new THREE.Vector2(viewport.width / this.tileScale, viewport.height / this.tileScale) },
    inverseSpriteTextureSize: { type: 'v2', value: new THREE.Vector2(1/tileset.image.width, 1/tileset.image.height) },
    tileSize: { type: 'f', value: this.tileSize },
    inverseTileSize: { type: 'f', value: 1/this.tileSize },

    tiles: { type: 't', value: tilemap },
    sprites: { type: 't', value: tileset },

    viewOffset: { type: 'v2', value: this.offset },
    inverseTileTextureSize: { type: 'v2', value: new THREE.Vector2(1/tilemap.image.width, 1/tilemap.image.height) },
    repeatTiles: { type: 'i', value: this.repeat ? 1 : 0 }
};

//create the shader material
this._material = new THREE.ShaderMaterial({
    uniforms: this._uniforms,
    vertexShader: tilemapVS,
    fragmentShader: tilemapFS,
    transparent: false
});

this._plane = new THREE.PlaneGeometry(viewport.width, viewport.height, this.tileSize, this.tileSize);

this._mesh = new THREE.Mesh(this._plane, this._material);

修改后的地图制作者部分：

MapMaker.prototype.processTile = function(x, y) {
    //rotate upside down, and draw
    this.tileCtx.save();
    this.tileCtx.translate(0, this.tileSize);
    this.tileCtx.scale(1, -1);
    this.tileCtx.drawImage(this.srcImage, 
        x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize, 
        0, 0, this.tileSize, this.tileSize);

    var sprite = this.cacheSprite();

    this.tileCtx.restore();

    this.mapCtx.fillStyle="rgb(" + sprite.x + "," + sprite.y + ", 0)";
    this.mapCtx.fillRect(x,y,1,1);

    /* Why was this thing drawing 2 times?
    this.tileCtx.drawImage(this.srcImage, 
        x * this.tileSize, y * this.tileSize, this.tileSize, this.tileSize, 
        0, 0, this.tileSize, this.tileSize);*/
};

如果有人有不同的答案，请不要害羞地发表。

- Chad