From 67f95708450bb7bbe505d500e111095389a13743 Mon Sep 17 00:00:00 2001 From: Ben Coleman Date: Thu, 28 Mar 2024 10:19:40 +0000 Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9E=20Blending=20options?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 4 ++-- package.json | 2 +- src/core/context.ts | 22 +++++++++++++++++++--- src/engine/material.ts | 11 +---------- src/renderable/builder.ts | 15 ++++++++------- src/renderable/instance.ts | 6 ------ 6 files changed, 31 insertions(+), 29 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2cfe1bd..e83b8a8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "gsots3d", - "version": "0.0.5", + "version": "0.0.6-alpha.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "gsots3d", - "version": "0.0.5", + "version": "0.0.6-alpha.0", "license": "MIT", "dependencies": { "cannon-es": "^0.20.0", diff --git a/package.json b/package.json index b23e578..291bb3e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gsots3d", - "version": "0.0.5", + "version": "0.0.6-alpha.0", "description": "Getting S**t On The Screen in 3D. A library for doing 3D graphics in the browser.", "author": "Ben Coleman", "license": "MIT", diff --git a/src/core/context.ts b/src/core/context.ts index 321bd0c..0d4ea04 100644 --- a/src/core/context.ts +++ b/src/core/context.ts @@ -91,6 +91,12 @@ export class Context { /** Backface culling */ public disableCulling = false + /** + * Blend mode for non-opaque instances + * 'NORMAL' is the default, 'ADDITIVE' is useful for particles and glowing effects + */ + public blendMode: 'NORMAL' | 'ADDITIVE' = 'NORMAL' + // ==== Getters ============================================================= /** Get the active camera */ @@ -370,7 +376,12 @@ export class Context { }) this.gl.disable(this.gl.CULL_FACE) - // eslint-disable-next-line @typescript-eslint/no-unused-vars + this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA) + // Secret undocumented feature, allows you to set blend mode on a per instance basis + if (this.blendMode === 'ADDITIVE') { + this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE) + } + for (const instance of instancesTransArray) { instance.render(this.gl, uniforms, programOverride) @@ -518,14 +529,19 @@ export class Context { * Create a new model instance, which should have been previously loaded into the cache * @param modelName - Name of the model previously loaded into the cache, don't include the file extension */ - createModelInstance(modelName: string) { + createModelInstance(modelName: string, transparent = false) { const model = ModelCache.instance.get(modelName) if (!model) { throw new Error(`💥 Unable to create model instance for ${modelName}`) } const instance = new Instance(model) - this.instances.set(instance.id, instance) + if (!transparent) { + this.instances.set(instance.id, instance) + } else { + this.instancesTrans.set(instance.id, instance) + } + Stats.triangles += model.triangleCount Stats.instances++ diff --git a/src/engine/material.ts b/src/engine/material.ts index 02c8f3a..62cf289 100644 --- a/src/engine/material.ts +++ b/src/engine/material.ts @@ -6,7 +6,7 @@ import * as twgl from 'twgl.js' import { RGB } from './tuples.ts' import { MtlMaterial } from '../parsers/mtl-parser.ts' -import { UniformSet, TextureOptions, getGl } from '../core/gl.ts' +import { UniformSet, TextureOptions } from '../core/gl.ts' import { TextureCache } from '../core/cache.ts' export class Material { @@ -245,15 +245,6 @@ export class Material { } twgl.setUniforms(programInfo, uni) - - const gl = getGl() - - if (gl) { - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) - if (this.additiveBlend) { - gl.blendFunc(gl.SRC_ALPHA, gl.ONE) - } - } } /** diff --git a/src/renderable/builder.ts b/src/renderable/builder.ts index a80c065..32ac28a 100644 --- a/src/renderable/builder.ts +++ b/src/renderable/builder.ts @@ -25,11 +25,9 @@ import { XYZ } from '../engine/tuples.ts' */ export class ModelBuilder { public readonly parts: Map - // public readonly materials: Map constructor() { this.parts = new Map() - // this.materials = new Map() } /** @@ -46,7 +44,6 @@ export class ModelBuilder { const builderPart = new BuilderPart(name, material) this.parts.set(name, builderPart) - // this.materials.set(name, material) return builderPart } @@ -121,9 +118,9 @@ export class BuilderPart { * Add a triangle to the renderable part * Each triangle must be defined by 3 vertices and will get a normal calculated * Each triangle will get a unique normal, so no smooth shading - * @param v1 Vertex one of the triangle - * @param v2 Vertex two of the triangle - * @param v3 Vertex three of the triangle + * @param v1 Vertex 1 of the triangle + * @param v2 Vertex 2 of the triangle + * @param v3 Vertex 3 of the triangle * @param tc1 Texture coordinate for vertex 1 * @param tc2 Texture coordinate for vertex 2 * @param tc3 Texture coordinate for vertex 3 @@ -159,7 +156,7 @@ export class BuilderPart { } } - /* + /** * Add a two triangle quad to the renderable part * Each quad must be defined by 4 vertices and will get a normal calculated * Each quad will get a unique normal, so no smooth shading @@ -167,6 +164,10 @@ export class BuilderPart { * @param v2 Vertex 2 of the quad * @param v3 Vertex 3 of the quad * @param v4 Vertex 4 of the quad + * @param tc1 UV texture coordinate for vertex 1 + * @param tc2 UV texture coordinate for vertex 2 + * @param tc3 UV texture coordinate for vertex 3 + * @param tc4 UV texture coordinate for vertex 4 */ addQuad(v1: XYZ, v2: XYZ, v3: XYZ, v4: XYZ, tc1 = [0, 0], tc2 = [0, 0], tc3 = [0, 0], tc4 = [0, 0]) { // Anti-clockwise winding order diff --git a/src/renderable/instance.ts b/src/renderable/instance.ts index bed0353..7db1e86 100644 --- a/src/renderable/instance.ts +++ b/src/renderable/instance.ts @@ -78,12 +78,6 @@ export class Instance extends Node { programOverride = ProgramCache.instance.get(this.customProgramName) } - if (this.metadata.additiveBlend) { - gl.blendFunc(gl.SRC_ALPHA, gl.ONE) - } else { - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) - } - const world = this.modelMatrix // Populate u_world - used for normals & shading