playcanvas
Version:
PlayCanvas WebGL game engine
147 lines (144 loc) • 7.18 kB
JavaScript
import { TYPE_FLOAT32, SEMANTIC_POSITION, SEMANTIC_TEXCOORD0, BUFFER_STREAM, INDEXFORMAT_UINT16, BUFFER_STATIC, PRIMITIVE_TRIANGLES, SHADERLANGUAGE_WGSL, SHADERLANGUAGE_GLSL, CULLFACE_NONE, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDMODE_ONE } from '../../platform/graphics/constants.js';
import { DepthState } from '../../platform/graphics/depth-state.js';
import { BlendState } from '../../platform/graphics/blend-state.js';
import { GraphNode } from '../../scene/graph-node.js';
import { MeshInstance } from '../../scene/mesh-instance.js';
import { Mesh } from '../../scene/mesh.js';
import { IndexBuffer } from '../../platform/graphics/index-buffer.js';
import { VertexBuffer } from '../../platform/graphics/vertex-buffer.js';
import { VertexFormat } from '../../platform/graphics/vertex-format.js';
import { ShaderMaterial } from '../../scene/materials/shader-material.js';
var vertexShaderGLSL = "\n attribute vec3 vertex_position;\n attribute vec4 vertex_texCoord0;\n varying vec4 uv0;\n varying float wordFlag;\n void main(void) {\n gl_Position = vec4(vertex_position.xy * 2.0 - 1.0, 0.5, 1.0);\n uv0 = vertex_texCoord0;\n wordFlag = vertex_position.z;\n }\n";
var vertexShaderWGSL = "\n attribute vertex_position: vec3f; // unnormalized xy, word flag\n attribute vertex_texCoord0: vec4f; // unnormalized texture space uv, normalized uv\n\n varying uv0: vec4f;\n varying wordFlag: f32;\n\n @vertex fn vertexMain(input : VertexInput) -> VertexOutput {\n var output : VertexOutput;\n output.position = vec4(input.vertex_position.xy * 2.0 - 1.0, 0.5, 1.0);\n output.uv0 = input.vertex_texCoord0;\n output.wordFlag = input.vertex_position.z;\n return output;\n }\n";
var fragmentShaderGLSL = "\n varying vec4 uv0;\n varying float wordFlag;\n uniform vec4 clr;\n uniform sampler2D graphTex;\n uniform sampler2D wordsTex;\n void main (void) {\n vec4 graphSample = texture2D(graphTex, uv0.xy);\n vec4 graph;\n if (uv0.w < graphSample.r)\n graph = vec4(0.7, 0.2, 0.2, 1.0);\n else if (uv0.w < graphSample.g)\n graph = vec4(0.2, 0.7, 0.2, 1.0);\n else if (uv0.w < graphSample.b)\n graph = vec4(0.2, 0.2, 0.7, 1.0);\n else\n graph = vec4(0.0, 0.0, 0.0, 1.0 - 0.25 * sin(uv0.w * 3.14159));\n vec4 words = texture2D(wordsTex, vec2(uv0.x, 1.0 - uv0.y));\n gl_FragColor = mix(graph, words, wordFlag) * clr;\n }\n";
var fragmentShaderWGSL = "\n varying uv0: vec4f;\n varying wordFlag: f32;\n\n uniform clr: vec4f;\n\n var graphTex : texture_2d<f32>;\n var graphTex_sampler : sampler;\n\n var wordsTex : texture_2d<f32>;\n var wordsTex_sampler : sampler;\n\n @fragment fn fragmentMain(input : FragmentInput) -> FragmentOutput {\n var uv0: vec4f = input.uv0;\n var graphSample: vec4f = textureSample(graphTex, graphTex_sampler, uv0.xy);\n\n var graph: vec4f;\n if (uv0.w < graphSample.r) {\n graph = vec4f(0.7, 0.2, 0.2, 1.0);\n } else if (uv0.w < graphSample.g) {\n graph = vec4f(0.2, 0.7, 0.2, 1.0);\n } else if (uv0.w < graphSample.b) {\n graph = vec4f(0.2, 0.2, 0.7, 1.0);\n } else {\n graph = vec4f(0.0, 0.0, 0.0, 1.0 - 0.25 * sin(uv0.w * 3.14159));\n }\n\n var words: vec4f = textureSample(wordsTex, wordsTex_sampler, vec2f(uv0.x, 1.0 - uv0.y));\n\n var output: FragmentOutput;\n output.color = mix(graph, words, input.wordFlag) * uniform.clr;\n return output;\n }\n";
class Render2d {
quad(x, y, w, h, u, v, uw, uh, texture, wordFlag) {
if (wordFlag === void 0) wordFlag = 0;
var rw = this.targetSize.width;
var rh = this.targetSize.height;
var x0 = x / rw;
var y0 = y / rh;
var x1 = (x + w) / rw;
var y1 = (y + h) / rh;
var tw = texture.width;
var th = texture.height;
var u0 = u / tw;
var v0 = v / th;
var u1 = (u + (uw != null ? uw : w)) / tw;
var v1 = (v + (uh != null ? uh : h)) / th;
this.data.set([
x0,
y0,
wordFlag,
u0,
v0,
0,
0,
x1,
y0,
wordFlag,
u1,
v0,
1,
0,
x1,
y1,
wordFlag,
u1,
v1,
1,
1,
x0,
y1,
wordFlag,
u0,
v1,
0,
1
], 4 * 7 * this.quads);
this.quads++;
this.prim.count += 6;
}
startFrame() {
this.quads = 0;
this.prim.count = 0;
this.targetSize.width = this.device.canvas.scrollWidth;
this.targetSize.height = this.device.canvas.scrollHeight;
}
render(app, layer, graphTexture, wordsTexture, clr, height) {
this.buffer.setData(this.data.buffer);
this.uniforms.clr.set(clr, 0);
this.material.setParameter('clr', this.uniforms.clr);
this.material.setParameter('graphTex', graphTexture);
this.material.setParameter('wordsTex', wordsTexture);
app.drawMeshInstance(this.meshInstance, layer);
}
constructor(device, maxQuads = 512){
var format = new VertexFormat(device, [
{
semantic: SEMANTIC_POSITION,
components: 3,
type: TYPE_FLOAT32
},
{
semantic: SEMANTIC_TEXCOORD0,
components: 4,
type: TYPE_FLOAT32
}
]);
var indices = new Uint16Array(maxQuads * 6);
for(var i = 0; i < maxQuads; ++i){
indices[i * 6 + 0] = i * 4;
indices[i * 6 + 1] = i * 4 + 1;
indices[i * 6 + 2] = i * 4 + 2;
indices[i * 6 + 3] = i * 4;
indices[i * 6 + 4] = i * 4 + 2;
indices[i * 6 + 5] = i * 4 + 3;
}
this.device = device;
this.buffer = new VertexBuffer(device, format, maxQuads * 4, {
usage: BUFFER_STREAM
});
this.data = new Float32Array(this.buffer.numBytes / 4);
this.indexBuffer = new IndexBuffer(device, INDEXFORMAT_UINT16, maxQuads * 6, BUFFER_STATIC, indices);
this.prim = {
type: PRIMITIVE_TRIANGLES,
indexed: true,
base: 0,
count: 0
};
this.quads = 0;
this.mesh = new Mesh(device);
this.mesh.vertexBuffer = this.buffer;
this.mesh.indexBuffer[0] = this.indexBuffer;
this.mesh.primitive = [
this.prim
];
var wgsl = device.isWebGPU;
var material = new ShaderMaterial({
uniqueName: 'MiniStats',
vertexCode: wgsl ? vertexShaderWGSL : vertexShaderGLSL,
fragmentCode: wgsl ? fragmentShaderWGSL : fragmentShaderGLSL,
shaderLanguage: wgsl ? SHADERLANGUAGE_WGSL : SHADERLANGUAGE_GLSL,
attributes: {
vertex_position: SEMANTIC_POSITION,
vertex_texCoord0: SEMANTIC_TEXCOORD0
}
});
this.material = material;
material.cull = CULLFACE_NONE;
material.depthState = DepthState.NODEPTH;
material.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE);
material.update();
this.meshInstance = new MeshInstance(this.mesh, material, new GraphNode('MiniStatsMesh'));
this.uniforms = {
clr: new Float32Array(4)
};
this.targetSize = {
width: device.width,
height: device.height
};
}
}
export { Render2d };