Skip to content

Commit

Permalink
[BREAKING] Implementation of BlendState (#5083)
Browse files Browse the repository at this point in the history 
* Implementation of BlendState

* lint

* fixed type

* Update src/platform/graphics/blend-state.js

Co-authored-by: Donovan Hutchence <slimbuck7@gmail.com>

* added clone function

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
Co-authored-by: Donovan Hutchence <slimbuck7@gmail.com>
  • Loading branch information
@mvaligursky @slimbuck
3 people authored Feb 23, 2023
1 parent 35a791d commit e7479a7
Show file tree
Hide file tree
Showing 24 changed files with 686 additions and 521 deletions.
14 changes: 7 additions & 7 deletions extras/mini-stats/render2d.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import {
shaderChunks,
IndexBuffer,
VertexBuffer,
VertexFormat
VertexFormat,
BlendState
} from 'playcanvas';

// render 2d textured quads
Expand Down Expand Up @@ -120,6 +121,9 @@ class Render2d {

this.screenTextureSizeId = device.scope.resolve('screenAndTextureSize');
this.screenTextureSize = new Float32Array(4);

this.blendState = new BlendState(true, BLENDEQUATION_ADD, BLENDMODE_SRC_ALPHA, BLENDMODE_ONE_MINUS_SRC_ALPHA,
BLENDEQUATION_ADD, BLENDMODE_ONE, BLENDMODE_ONE);
}

quad(texture, x, y, w, h, u, v, uw, uh, enabled) {
Expand Down Expand Up @@ -174,12 +178,8 @@ class Render2d {
device.setDepthTest(false);
device.setDepthWrite(false);
device.setCullMode(CULLFACE_NONE);
device.setBlending(true);
device.setBlendFunctionSeparate(BLENDMODE_SRC_ALPHA,
BLENDMODE_ONE_MINUS_SRC_ALPHA,
BLENDMODE_ONE,
BLENDMODE_ONE);
device.setBlendEquationSeparate(BLENDEQUATION_ADD, BLENDEQUATION_ADD);
device.setBlendState(this.blendState);

device.setVertexBuffer(buffer, 0);
device.setIndexBuffer(this.indexBuffer);
device.setShader(this.shader);
Expand Down
105 changes: 105 additions & 0 deletions src/deprecated/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import {
BLENDMODE_ZERO, BLENDMODE_ONE, BLENDMODE_SRC_COLOR, BLENDMODE_ONE_MINUS_SRC_COLOR,
BLENDMODE_DST_COLOR, BLENDMODE_ONE_MINUS_DST_COLOR, BLENDMODE_SRC_ALPHA, BLENDMODE_SRC_ALPHA_SATURATE,
BLENDMODE_ONE_MINUS_SRC_ALPHA, BLENDMODE_DST_ALPHA, BLENDMODE_ONE_MINUS_DST_ALPHA,
BLENDMODE_CONSTANT, BLENDMODE_ONE_MINUS_CONSTANT,
BUFFER_STATIC, BUFFER_DYNAMIC, BUFFER_STREAM,
CULLFACE_NONE, CULLFACE_BACK, CULLFACE_FRONT, CULLFACE_FRONTANDBACK,
FILTER_NEAREST, FILTER_LINEAR, FILTER_NEAREST_MIPMAP_NEAREST, FILTER_NEAREST_MIPMAP_LINEAR,
Expand Down Expand Up @@ -53,6 +54,7 @@ import { VertexFormat } from '../platform/graphics/vertex-format.js';
import { VertexIterator } from '../platform/graphics/vertex-iterator.js';
import { ShaderUtils } from '../platform/graphics/shader-utils.js';
import { GraphicsDeviceAccess } from '../platform/graphics/graphics-device-access.js';
import { BlendState } from '../platform/graphics/blend-state.js';

import { PROJECTION_ORTHOGRAPHIC, PROJECTION_PERSPECTIVE, LAYERID_IMMEDIATE, LINEBATCH_OVERLAY, LAYERID_WORLD } from '../scene/constants.js';
import { calculateTangents, createBox, createCapsule, createCone, createCylinder, createMesh, createPlane, createSphere, createTorus } from '../scene/procedural.js';
Expand Down Expand Up @@ -346,6 +348,11 @@ export const PIXELFORMAT_R4_G4_B4_A4 = PIXELFORMAT_RGBA4;
export const PIXELFORMAT_R8_G8_B8 = PIXELFORMAT_RGB8;
export const PIXELFORMAT_R8_G8_B8_A8 = PIXELFORMAT_RGBA8;

export const BLENDMODE_CONSTANT_COLOR = BLENDMODE_CONSTANT;
export const BLENDMODE_ONE_MINUS_CONSTANT_COLOR = BLENDMODE_ONE_MINUS_CONSTANT;
export const BLENDMODE_CONSTANT_ALPHA = BLENDMODE_CONSTANT;
export const BLENDMODE_ONE_MINUS_CONSTANT_ALPHA = BLENDMODE_ONE_MINUS_CONSTANT;

export function UnsupportedBrowserError(message) {
this.name = 'UnsupportedBrowserError';
this.message = (message || '');
Expand Down Expand Up @@ -572,6 +579,63 @@ GraphicsDevice.prototype.removeShaderFromCache = function (shader) {
getProgramLibrary(this).removeFromCache(shader);
};

const _tempBlendState = new BlendState();

GraphicsDevice.prototype.setBlendFunction = function (blendSrc, blendDst) {
Debug.deprecated(`pc.GraphicsDevice#setBlendFunction is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(currentBlendState.colorOp, blendSrc, blendDst);
_tempBlendState.setAlphaBlend(currentBlendState.alphaOp, blendSrc, blendDst);
this.setBlendState(_tempBlendState);
};

GraphicsDevice.prototype.setBlendFunctionSeparate = function (blendSrc, blendDst, blendSrcAlpha, blendDstAlpha) {
Debug.deprecated(`pc.GraphicsDevice#setBlendFunctionSeparate is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(currentBlendState.colorOp, blendSrc, blendDst);
_tempBlendState.setAlphaBlend(currentBlendState.alphaOp, blendSrcAlpha, blendDstAlpha);
this.setBlendState(_tempBlendState);
};

GraphicsDevice.prototype.setBlendEquation = function (blendEquation) {
Debug.deprecated(`pc.GraphicsDevice#setBlendEquation is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(blendEquation, currentBlendState.colorSrcFactor, currentBlendState.colorDstFactor);
_tempBlendState.setAlphaBlend(blendEquation, currentBlendState.alphaSrcFactor, currentBlendState.alphaDstFactor);
this.setBlendState(_tempBlendState);
};

GraphicsDevice.prototype.setBlendEquationSeparate = function (blendEquation, blendAlphaEquation) {
Debug.deprecated(`pc.GraphicsDevice#setBlendEquationSeparate is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(blendEquation, currentBlendState.colorSrcFactor, currentBlendState.colorDstFactor);
_tempBlendState.setAlphaBlend(blendAlphaEquation, currentBlendState.alphaSrcFactor, currentBlendState.alphaDstFactor);
this.setBlendState(_tempBlendState);
};

GraphicsDevice.prototype.setColorWrite = function (redWrite, greenWrite, blueWrite, alphaWrite) {
Debug.deprecated(`pc.GraphicsDevice#setColorWrite is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorWrite(redWrite, greenWrite, blueWrite, alphaWrite);
this.setBlendState(_tempBlendState);
};

GraphicsDevice.prototype.getBlending = function () {
return this.blendState.blend;
};

GraphicsDevice.prototype.setBlending = function (blending) {
Debug.deprecated(`pc.GraphicsDevice#setBlending is deprecated, use pc.GraphicsDevice.setBlendState instead.`);
_tempBlendState.copy(this.blendState);
_tempBlendState.blend = blending;
this.setBlendState(_tempBlendState);
};

// SCENE

export const PhongMaterial = StandardMaterial;
Expand Down Expand Up @@ -831,6 +895,47 @@ Material.prototype.setShader = function (shader) {
this.shader = shader;
};

// Note: this is used by the Editor
Object.defineProperty(Material.prototype, 'blend', {
set: function (value) {
Debug.deprecated(`pc.Material#blend is deprecated, use pc.Material.blendState.`);
this.blendState.blend = value;
},
get: function () {
return this.blendState.blend;
}
});

// Note: this is used by the Editor
Object.defineProperty(Material.prototype, 'blendSrc', {
set: function (value) {
Debug.deprecated(`pc.Material#blendSrc is deprecated, use pc.Material.blendState.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(currentBlendState.colorOp, value, currentBlendState.colorDstFactor);
_tempBlendState.setAlphaBlend(currentBlendState.alphaOp, value, currentBlendState.alphaDstFactor);
this.blendState = _tempBlendState;
},
get: function () {
return this.blendState.colorSrcFactor;
}
});

// Note: this is used by the Editor
Object.defineProperty(Material.prototype, 'blendDst', {
set: function (value) {
Debug.deprecated(`pc.Material#blendDst is deprecated, use pc.Material.blendState.`);
const currentBlendState = this.blendState;
_tempBlendState.copy(currentBlendState);
_tempBlendState.setColorBlend(currentBlendState.colorOp, currentBlendState.colorSrcFactor, value);
_tempBlendState.setAlphaBlend(currentBlendState.alphaOp, currentBlendState.alphaSrcFactor, value);
this.blendState = _tempBlendState;
},
get: function () {
return this.blendState.colorDstFactor;
}
});

function _defineAlias(newName, oldName) {
Object.defineProperty(StandardMaterial.prototype, oldName, {
get: function () {
Expand Down
3 changes: 2 additions & 1 deletion src/framework/graphics/picker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { LayerComposition } from '../../scene/composition/layer-composition.js';
import { getApplication } from '../globals.js';
import { Entity } from '../entity.js';
import { Debug } from '../../core/debug.js';
import { BlendState } from '../../platform/graphics/blend-state.js';

const tempSet = new Set();

Expand Down Expand Up @@ -208,7 +209,7 @@ class Picker {
self.pickColor[1] = ((index >> 8) & 0xff) / 255;
self.pickColor[2] = (index & 0xff) / 255;
pickColorId.setValue(self.pickColor);
device.setBlending(false);
device.setBlendState(BlendState.DEFAULT);

// keep the index -> meshInstance index mapping
self.mapping[index] = meshInstance;
Expand Down
3 changes: 3 additions & 0 deletions src/framework/lightmapper/lightmapper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ import { BakeLightAmbient } from './bake-light-ambient.js';
import { BakeMeshNode } from './bake-mesh-node.js';
import { LightmapCache } from '../../scene/graphics/lightmap-cache.js';
import { LightmapFilters } from './lightmap-filters.js';
import { BlendState } from '../../platform/graphics/blend-state.js';

const MAX_LIGHTMAP_SIZE = 2048;

Expand Down Expand Up @@ -874,6 +875,8 @@ class Lightmapper {
this.lightmapFilters.prepareDenoise(this.scene.lightmapFilterRange, this.scene.lightmapFilterSmoothness);
}

device.setBlendState(BlendState.DEFAULT);

for (let node = 0; node < bakeNodes.length; node++) {
const bakeNode = bakeNodes[node];

Expand Down
1 change: 1 addition & 0 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ export * from './platform/audio/constants.js';
// PLATFORM / GRAPHICS
export * from './platform/graphics/constants.js';
export { createGraphicsDevice } from './platform/graphics/graphics-device-create.js';
export { BlendState } from './platform/graphics/blend-state.js';
export { GraphicsDevice } from './platform/graphics/graphics-device.js';
export { IndexBuffer } from './platform/graphics/index-buffer.js';
export { RenderTarget } from './platform/graphics/render-target.js';
Expand Down
Loading

0 comments on commit e7479a7

Please sign in to comment.