请注意，在下面的编辑 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中一半的数据填充 2 秒quadVertBuffer。我不仅不确定为什么，我不确定我是否正确，也不知道如何将其转换为 Three.js 方法。
EDIT2：现在我正在使用平面来显示（2D）背景，我应该使用精灵来代替吗？
编辑3：
因此，当我意识到 Three.js 将为我设置位置和 uv 向量时，我走得更远了（如果与上面示例中的位置/纹理不同，这似乎是相似的）。我还注意到我可能有一些类型错误，因为'v2'我拥有的许多类型（调用uniform2f）实际上是通过 加载的uniform2fv，所以我将它们更改为'v2v'并更新了值。现在我没有得到错误，它确实绘制了一些东西，只是不完全是 tilemap。
这是更新的顶点着色器：
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;)，我会得到正确的纹理，在正确的位置，正确地组合在一起。但是整个地图是颠倒的！很近...
