Three.js自定义着色器
请注意，此代码中的大部分内容已在下面的编辑3中更改。
所以我非常喜欢布兰登·琼斯（found here）的博客文章。我想将他的代码转换为Three.js，但我遇到了一些问题。你可以找到他的完整代码here。这是我到目前为止的尝试，对我提出的问题有一些评论：
// 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);
我真的不完全明白这里发生了什么，但如果我是正确的，我认为它填充了2 Float32Array s，每个quadVertBuffer的数据的一半。我不仅不确定为什么，我不确定我是否正确，也不知道如何将其转换为Three.js方法。
EDIT2 ：现在我正在使用飞机显示（2D）背景，我应该使用精灵吗？
EDIT3 ：
所以当我意识到Three.js将为我设置位置和uv向量时，我得到了一点距离（如果与上面例子中的位置/纹理不同，它似乎相似）。我还注意到我可能有一些类型错误，因为我拥有的许多'v2'类型（调用uniform2f）实际上是通过uniform2fv加载的，所以我将它们更改为{{ 1}}并更新了值。现在我没有得到错误，它确实绘制了某些东西，只是不完整的tilemap。
这是更新的顶点着色器：
'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");
以下是我得到的结果：
欢迎任何想法！
编辑4 ：
如果我更改Vertex着色器以使用我发现的设置为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
});
的“Three.js方法”，我可以更接近，但是精灵表中的偏移是错误的。我认为gl_Position变化设置错误（因为pixelCoord的值与我认为的uv略有不同。
我将Vertex Shader的主要功能更改为：
texture现在我从纹理表中获得了实际的瓷砖，但它选择的实际瓷砖是错误的：
越来越近，任何帮助仍然受到赞赏。
编辑5 ：
我怀疑这将是我的最后一次更新，因为我接近得到答案。设置void main(void) {
pixelCoord = (uv * viewportSize) + viewOffset;
texCoord = pixelCoord * inverseTileTextureSize * inverseTileSize;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
后，其中tileset是实际纹理贴图，而不是红色贴图。我把所有合适的瓷砖都放到了正确的位置;除了他们都颠倒了！
以下是此次更改后的样子：
有没有办法在Y轴上翻转每个单独的纹理（不编辑图块集图像）？我觉得有一些简单的矢量数学可以添加到我的着色器中来翻转它绘制的每个纹理并最终确定它。
我注意到如果我不翻转两个（tileset.flipY = false;和tilemap.flipY = false;），我会得到正确的纹理，在正确的位置，正确地装配在一起。但整个地图都颠倒了！如此接近......
1 个答案:
答案 0 :(得分：1)
我设法让这个“工作”，虽然我不认为它“固定”。
我翻转了tilemap（tilemap.flipY = true），解开了tileset（tileset.flipY = false），然后修改了mapmaker.html（Toji写的会创建这些tilemaps）来绘制每个tile 在精灵表（tileset）上颠倒。
我会更喜欢一个能够解决问题而不是像这样解决问题的不同答案，但现在这是我的解决方案。
以下是完整的相关代码。
着色器：
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 s）：
//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部分：
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);*/
};
如果有人有不同的答案，请不要害羞发布。
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？