Three.js自定義着色器
[英]Three.js Custom Shader
問題描述
請注意，此編碼的大部分內容已在下面的編輯3中進行了更改。
所以我真的很喜歡布蘭登瓊斯的博客文章（ 在這里找到 ）。 我想將他的代碼轉換為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);
我真的不完全清楚這里發生了什么，但如果我是正確的，我認為它填充了2個quadVertBuffer ，其中每個都有Float32Array的一半數據。 我不僅不確定為什么，我不確定我是否正確，也不知道如何將其轉換為Three.js方法。
編輯2 ：現在我正在使用飛機顯示（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 ：
如果我更改Vertex着色器以使用我發現的設置gl_Position的“Three.js方法”，我可以更接近，但是精靈表中的偏移是錯誤的。 我認為pixelCoord變化設置錯誤（因為uv值與我認為的texture略有不同）。
我將Vertex Shader的主要功能更改為：
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; ）我得到正確的紋理，在正確的位置，正確地裝配在一起。 但整個地圖都顛倒了！ 很近...
1 個解決方案
解決方案1
1 已采納 2012-10-26 13:00:30
我設法讓這個“工作”，雖然我不認為它“固定”。
我翻轉了tilemap（ tilemap.flipY = true ），解開了tileset（ tileset.flipY = false ），然后修改了mapmaker.html （Toji編寫了將創建這些tilemaps）以在sprite表上顛倒繪制每個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);*/
};
如果有人有不同的答案，請不要害羞發布。
自定義着色器不受Three.js中的霧影響
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.