Skip to content

Instantly share code, notes, and snippets.

@ShopifyEng

ShopifyEng/ShieldMaterial.ts Secret

Last active Dec 4, 2020
Embed
What would you like to do?
A World Rendered Beautifully: The Making of the BFCM 3D Data Visualization - ShieldMaterial.ts
import {MeshStandardMaterialParameters, IUniform} from 'three';
import {CustomMeshStandardMaterial} from '../CustomMeshStandardMaterial';
import fragmentShader from './shield.frag';
interface OptionalShieldMaterialParams {
maxOpacity?: number;
}
interface CustomUniforms {
maxOpacity: IUniform;
}
interface ShieldMaterialParams
extends MeshStandardMaterialParameters,
OptionalShieldMaterialParams {}
const DEFAULT_PARAMS: ShieldMaterialParams = {
maxOpacity: 0.9,
};
const DEFAULT_UNIFORMS: CustomUniforms = {
maxOpacity: {value: 0.9},
};
class ShieldMaterial extends CustomMeshStandardMaterial {
get maxOpacity(): number {
return this.getCustomUniform('maxOpacity');
}
set maxOpacity(value: number) {
this.setCustomUniform('maxOpacity', value);
}
constructor(params: ShieldMaterialParams) {
super(params, {
fragmentShader,
uniforms: {
maxOpacity: {value: params.maxOpacity || 0},
},
});
}
}
export {ShieldMaterial};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment