Skip to content

F
fyge_for_tb
Commit 5acaa1b1 authored by wjf's avatar wjf
Browse files
Options

2.0.21

parent 916af005
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1064 additions and 133 deletions
build/FYGE.d.ts
View file @ 5acaa1b1
declare namespace FYGE{export const VERSION = "2.0.19";
declare namespace FYGE{export const VERSION = "2.0.21";
export const osType: "ios" | "android" | "pc";
......@@ -3174,6 +3174,140 @@ export class BlurFilterNew extends Filter {
constructor(blur?: number);
}
export class ExtractBrightnessFilter extends Filter {
constructor(threshold?: number);
/**
* Defines how bright a color needs to be extracted.
*
* @member {number}
* @default 0.5
*/
get threshold(): any;
set threshold(value: any);
}
export class KawaseBlurFilter extends Filter {
private _pixelSize;
private _clamp;
private _kernels;
private _blur;
private _quality;
constructor(blur?: number, quality?: number, clamp?: boolean);
/**
* Overrides apply
* @private
*/
apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear: any): void;
/**
* Auto generate kernels by blur & quality
* @private
*/
_generateKernels(): void;
/**
* The kernel size of the blur filter, for advanced usage.
*
* @member {number[]}
* @default [0]
*/
get kernels(): any;
set kernels(value: any);
/**
* Get the if the filter is clampped.
*
* @readonly
* @member {boolean}
* @default false
*/
get clamp(): boolean;
/**
* Sets the pixel size of the filter. Large size is blurrier. For advanced usage.
*
* @member {Point|number|number[]}
* @default [1, 1]
*/
set pixelSize(value: any);
get pixelSize(): any;
/**
* The quality of the filter, integer greater than `1`.
*
* @member {number}
* @default 3
*/
get quality(): number;
set quality(value: number);
/**
* The amount of blur, value greater than `0`.
*
* @member {number}
* @default 4
*/
get blur(): number;
set blur(value: number);
}
export class AdvancedBloomFilter extends Filter {
private _extractFilter;
private _blurFilter;
bloomScale: number;
brightness: number;
private _resolution;
constructor(options?: OptionsInt);
/**
* Override existing apply method in Filter
* @private
*/
apply(filterManager: FilterManager, input: any, output: any, clear: any): void;
/**
* The resolution of the filter.
*
* @member {number}
*/
get resolution(): number;
set resolution(value: number);
/**
* Defines how bright a color needs to be to affect bloom.
*
* @member {number}
* @default 0.5
*/
get threshold(): any;
set threshold(value: any);
/**
* Sets the kernels of the Blur Filter
*
* @member {number}
* @default 4
*/
get kernels(): any;
set kernels(value: any);
/**
* Sets the strength of the Blur properties simultaneously
*
* @member {number}
* @default 2
*/
get blur(): number;
set blur(value: number);
/**
* Sets the quality of the Blur Filter
*
* @member {number}
* @default 4
*/
get quality(): number;
set quality(value: number);
/**
* Sets the pixelSize of the Kawase Blur filter
*
* @member {number|number[]|Point}
* @default 1
*/
get pixelSize(): any;
set pixelSize(value: any);
}
export {};
export class MaskManager {
renderer: WebglRenderer;
scissor: boolean;
......@@ -4999,7 +5133,7 @@ export class Graphics extends Container {
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
*
* @param {number} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number | string} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number} [alpha=1] - the alpha of the fill
* @return {Graphics} This Graphics object. Good for chaining method calls
*/
......@@ -6316,11 +6450,11 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 单色和RGBA格式
* @public
* @since 1.0.0
*/
beginFill(color: number, alpha?: number): this;
beginFill(color?: number | string, alpha?: number): this;
/**
* 线性或径向渐变填充
* @method beginGradientFill
......@@ -8903,7 +9037,14 @@ export class BaseMaterial extends HashObject {
* 是否用线框形式绘制
*/
wireframe: boolean;
/**
* 材质渲染面
*/
side: RenderSideType;
/**
* 场景的雾化是否对材质有效
*/
useFog: boolean;
/**
* 是否光照影响
*/
......@@ -8928,7 +9069,7 @@ export interface BaseMaterialParamsInt {
skinning?: boolean;
}
export function getCusShader(render: WebglRenderer, material: BaseMaterial, lights: LightsConfig, mesh: Mesh3D, maxBones?: number, useVertexTexture?: boolean): CusShader;
export function getCusShader(render: WebglRenderer, material: BaseMaterial, lights: LightsConfig, mesh: Mesh3D, maxBones?: number, useVertexTexture?: boolean, fog?: any): CusShader;
export class CusShader extends GLShader {
/**
......@@ -9179,6 +9320,89 @@ export class LightMaterial extends BaseMaterial {
clone(): any;
}
export const defaultVertexShader3d = "attribute vec3 aPosition;\nuniform mat4 uViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelMatrix;\nvoid main() {\n gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4( aPosition, 1.0 );\n}";
export const defaultFragmentShader3d = "void main() {\n gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n}";
export class ShaderMaterial extends HashObject {
protected vertexShader: string;
protected fragmentShader: string;
uniforms: {
[key: string]: {
type: UniformType;
value: any;
};
};
/**
* key就是渲染器唯一id
*/
protected shaders: {
[key: string]: GLShader;
};
/**
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean;
constructor(vertexShader?: string, fragmentShader?: string, uniforms?: {
[key: string]: {
type: UniformType;
value: any;
};
});
/**
* 自定义着色器不考虑缓存了，自己注意，
* 多个完全一样的自定义材质，用同一个就行了
* @param renderer
*/
getShader(renderer: WebglRenderer): GLShader;
destroy(): void;
}
export enum UniformType {
float = "f",
/**
* 纹理对象
*/
texture = "t",
/**
* 十六进制数字
*/
color = "c",
/**
* v2对象
*/
vector2 = "v2",
/**
* v3对象
*/
vector3 = "v3",
/**
* v4对象
*/
vector4 = "v4",
/**
* m4对象
*/
matrix4 = "m4"
}
export class Sprite3dMaterial extends ShaderMaterial {
sizeAttenuation: boolean;
constructor();
getShader(renderer: WebglRenderer): GLShader;
get center(): Vector2;
set center(v: Vector2);
get rotation(): number;
set rotation(v: number);
get color(): number;
set color(v: number);
get alpha(): number;
set alpha(v: number);
get map(): Texture;
set map(v: Texture);
}
export class SkinnedMesh3D extends Mesh3D {
bindMode: "attached" | "detached";
bindMatrix: Matrix4;
......@@ -9203,6 +9427,14 @@ export class D3Renderer extends ObjectRenderer {
* 灯光数据，用来初始化着色器和着色器传值
*/
lightsConfig: LightsConfig;
/**
* 雾化参数
*/
fog: {
color: Float32Array;
near: number;
far: number;
};
/**
* 顶点着色器可传的最大uniform通道
*/
......@@ -9319,6 +9551,10 @@ export class Scene3D extends Object3D {
private _viewHeight;
get viewHeight(): number;
set viewHeight(value: number);
setViewRect(x: number, y: number, width: number, height: number): void;
private _fog;
setFog(color?: number, near?: number, far?: number): void;
removeFog(): void;
/**
* 父级是2d元素，用于修改视窗位置
*/
......@@ -9329,9 +9565,20 @@ export class Scene3D extends Object3D {
*/
camera: Camera;
private raycaster;
/**
* 滤镜数组
*/
private _filters;
get filters(): Filter[];
set filters(value: Filter[]);
/**
* 可用的滤镜数据，_filters筛选过的
*/
protected _enabledFilters: Filter[];
constructor();
updateTransform(): void;
renderWebGL(renderer: WebglRenderer): void;
getBounds(): Rectangle;
getLightConfig(con?: Object3D, arr?: LightsConfig): LightsConfig;
/**
* 点击事件，只算场景的先，待mesh等写完所有2d包围盒再说，将几何转成2d的点后，根据索引的所有三角面计算是否选中
......@@ -9568,9 +9815,10 @@ export class Mesh3D extends Object3D {
raycast(raycaster: Raycaster, intersects: IntersectData[]): void;
copy(source: Mesh3D, recursive?: boolean): this;
/**
*
* 克隆方法
* @param recursive 默认克隆子级
*/
clone(): Mesh3D;
clone(recursive?: boolean): Mesh3D;
}
export class SphereGeometry extends Geometry {
......@@ -10048,6 +10296,10 @@ export class InterleavedBufferAttribute {
export {};
export class Sprite3D extends Mesh3D {
constructor(material: Sprite3dMaterial);
}
export class Bone extends Container {
data: IBoneData;
root: Container;
......
build/fyge.min.js
View file @ 5acaa1b1
This diff is collapsed.
build/fyge.min.js.map
View file @ 5acaa1b1
This diff is collapsed.
build/types.d.ts
View file @ 5acaa1b1
export const VERSION = "2.0.19";
export const VERSION = "2.0.21";
export const osType: "ios" | "android" | "pc";
......@@ -3174,6 +3174,140 @@ export class BlurFilterNew extends Filter {
constructor(blur?: number);
}
export class ExtractBrightnessFilter extends Filter {
constructor(threshold?: number);
/**
* Defines how bright a color needs to be extracted.
*
* @member {number}
* @default 0.5
*/
get threshold(): any;
set threshold(value: any);
}
export class KawaseBlurFilter extends Filter {
private _pixelSize;
private _clamp;
private _kernels;
private _blur;
private _quality;
constructor(blur?: number, quality?: number, clamp?: boolean);
/**
* Overrides apply
* @private
*/
apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear: any): void;
/**
* Auto generate kernels by blur & quality
* @private
*/
_generateKernels(): void;
/**
* The kernel size of the blur filter, for advanced usage.
*
* @member {number[]}
* @default [0]
*/
get kernels(): any;
set kernels(value: any);
/**
* Get the if the filter is clampped.
*
* @readonly
* @member {boolean}
* @default false
*/
get clamp(): boolean;
/**
* Sets the pixel size of the filter. Large size is blurrier. For advanced usage.
*
* @member {Point|number|number[]}
* @default [1, 1]
*/
set pixelSize(value: any);
get pixelSize(): any;
/**
* The quality of the filter, integer greater than `1`.
*
* @member {number}
* @default 3
*/
get quality(): number;
set quality(value: number);
/**
* The amount of blur, value greater than `0`.
*
* @member {number}
* @default 4
*/
get blur(): number;
set blur(value: number);
}
export class AdvancedBloomFilter extends Filter {
private _extractFilter;
private _blurFilter;
bloomScale: number;
brightness: number;
private _resolution;
constructor(options?: OptionsInt);
/**
* Override existing apply method in Filter
* @private
*/
apply(filterManager: FilterManager, input: any, output: any, clear: any): void;
/**
* The resolution of the filter.
*
* @member {number}
*/
get resolution(): number;
set resolution(value: number);
/**
* Defines how bright a color needs to be to affect bloom.
*
* @member {number}
* @default 0.5
*/
get threshold(): any;
set threshold(value: any);
/**
* Sets the kernels of the Blur Filter
*
* @member {number}
* @default 4
*/
get kernels(): any;
set kernels(value: any);
/**
* Sets the strength of the Blur properties simultaneously
*
* @member {number}
* @default 2
*/
get blur(): number;
set blur(value: number);
/**
* Sets the quality of the Blur Filter
*
* @member {number}
* @default 4
*/
get quality(): number;
set quality(value: number);
/**
* Sets the pixelSize of the Kawase Blur filter
*
* @member {number|number[]|Point}
* @default 1
*/
get pixelSize(): any;
set pixelSize(value: any);
}
export {};
export class MaskManager {
renderer: WebglRenderer;
scissor: boolean;
......@@ -4999,7 +5133,7 @@ export class Graphics extends Container {
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
*
* @param {number} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number | string} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number} [alpha=1] - the alpha of the fill
* @return {Graphics} This Graphics object. Good for chaining method calls
*/
......@@ -6316,11 +6450,11 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 单色和RGBA格式
* @public
* @since 1.0.0
*/
beginFill(color: number, alpha?: number): this;
beginFill(color?: number | string, alpha?: number): this;
/**
* 线性或径向渐变填充
* @method beginGradientFill
......@@ -8903,7 +9037,14 @@ export class BaseMaterial extends HashObject {
* 是否用线框形式绘制
*/
wireframe: boolean;
/**
* 材质渲染面
*/
side: RenderSideType;
/**
* 场景的雾化是否对材质有效
*/
useFog: boolean;
/**
* 是否光照影响
*/
......@@ -8928,7 +9069,7 @@ export interface BaseMaterialParamsInt {
skinning?: boolean;
}
export function getCusShader(render: WebglRenderer, material: BaseMaterial, lights: LightsConfig, mesh: Mesh3D, maxBones?: number, useVertexTexture?: boolean): CusShader;
export function getCusShader(render: WebglRenderer, material: BaseMaterial, lights: LightsConfig, mesh: Mesh3D, maxBones?: number, useVertexTexture?: boolean, fog?: any): CusShader;
export class CusShader extends GLShader {
/**
......@@ -9179,6 +9320,89 @@ export class LightMaterial extends BaseMaterial {
clone(): any;
}
export const defaultVertexShader3d = "attribute vec3 aPosition;\nuniform mat4 uViewMatrix;\nuniform mat4 uProjectionMatrix;\nuniform mat4 uModelMatrix;\nvoid main() {\n gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4( aPosition, 1.0 );\n}";
export const defaultFragmentShader3d = "void main() {\n gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );\n}";
export class ShaderMaterial extends HashObject {
protected vertexShader: string;
protected fragmentShader: string;
uniforms: {
[key: string]: {
type: UniformType;
value: any;
};
};
/**
* key就是渲染器唯一id
*/
protected shaders: {
[key: string]: GLShader;
};
/**
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean;
constructor(vertexShader?: string, fragmentShader?: string, uniforms?: {
[key: string]: {
type: UniformType;
value: any;
};
});
/**
* 自定义着色器不考虑缓存了，自己注意，
* 多个完全一样的自定义材质，用同一个就行了
* @param renderer
*/
getShader(renderer: WebglRenderer): GLShader;
destroy(): void;
}
export enum UniformType {
float = "f",
/**
* 纹理对象
*/
texture = "t",
/**
* 十六进制数字
*/
color = "c",
/**
* v2对象
*/
vector2 = "v2",
/**
* v3对象
*/
vector3 = "v3",
/**
* v4对象
*/
vector4 = "v4",
/**
* m4对象
*/
matrix4 = "m4"
}
export class Sprite3dMaterial extends ShaderMaterial {
sizeAttenuation: boolean;
constructor();
getShader(renderer: WebglRenderer): GLShader;
get center(): Vector2;
set center(v: Vector2);
get rotation(): number;
set rotation(v: number);
get color(): number;
set color(v: number);
get alpha(): number;
set alpha(v: number);
get map(): Texture;
set map(v: Texture);
}
export class SkinnedMesh3D extends Mesh3D {
bindMode: "attached" | "detached";
bindMatrix: Matrix4;
......@@ -9203,6 +9427,14 @@ export class D3Renderer extends ObjectRenderer {
* 灯光数据，用来初始化着色器和着色器传值
*/
lightsConfig: LightsConfig;
/**
* 雾化参数
*/
fog: {
color: Float32Array;
near: number;
far: number;
};
/**
* 顶点着色器可传的最大uniform通道
*/
......@@ -9319,6 +9551,10 @@ export class Scene3D extends Object3D {
private _viewHeight;
get viewHeight(): number;
set viewHeight(value: number);
setViewRect(x: number, y: number, width: number, height: number): void;
private _fog;
setFog(color?: number, near?: number, far?: number): void;
removeFog(): void;
/**
* 父级是2d元素，用于修改视窗位置
*/
......@@ -9329,9 +9565,20 @@ export class Scene3D extends Object3D {
*/
camera: Camera;
private raycaster;
/**
* 滤镜数组
*/
private _filters;
get filters(): Filter[];
set filters(value: Filter[]);
/**
* 可用的滤镜数据，_filters筛选过的
*/
protected _enabledFilters: Filter[];
constructor();
updateTransform(): void;
renderWebGL(renderer: WebglRenderer): void;
getBounds(): Rectangle;
getLightConfig(con?: Object3D, arr?: LightsConfig): LightsConfig;
/**
* 点击事件，只算场景的先，待mesh等写完所有2d包围盒再说，将几何转成2d的点后，根据索引的所有三角面计算是否选中
......@@ -9568,9 +9815,10 @@ export class Mesh3D extends Object3D {
raycast(raycaster: Raycaster, intersects: IntersectData[]): void;
copy(source: Mesh3D, recursive?: boolean): this;
/**
*
* 克隆方法
* @param recursive 默认克隆子级
*/
clone(): Mesh3D;
clone(recursive?: boolean): Mesh3D;
}
export class SphereGeometry extends Geometry {
......@@ -10048,6 +10296,10 @@ export class InterleavedBufferAttribute {
export {};
export class Sprite3D extends Mesh3D {
constructor(material: Sprite3dMaterial);
}
export class Bone extends Container {
data: IBoneData;
root: Container;
......
package.json
View file @ 5acaa1b1
{
"name": "fyge",
"version": "2.0.20",
"version": "2.0.21",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......
record.txt
View file @ 5acaa1b1
......@@ -255,6 +255,20 @@
toDisplayDataURL绘制完设置_parentID = -1;
Scene3D修改_localId为_viewId，记录_viewport
2.0.21 新增ShaderMaterial
D3Renderer加入自定义着色器，其他的uniforms变量单独引用自cusShader，新增fog雾化参数
新增Spirte3D和Sprite3dMaterial
GLTFLoader里new Geometry参数normalAttribute加了判断
Mesh3D的clone方法加上参数
Scene3D添加setViewRect方法
Scene3D添加雾化方法setFog，removeFog
Scene3D添加滤镜
Scene3D添加getBounds方法
BaseMaterial添加useFog属性
getCusShader添加了很多关于fog的
GLFramebuffers的静态方法createRGBA打开注释fbo.enableStencil()
现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT
//现在不改，DisplayObject的getLocalBounds最后是否考虑计算一次updateTransform(不用计算自己的,为了计算子级的)
......@@ -270,6 +284,8 @@
Scene3D的renderWebgl里的viewport需要修改，参数计算考虑缓存，viewport必执行
uViewMatrix * uModelMatrix等一些量，到时都用传入，减轻着色器计算负担
2.0.0以后的都是3d版本,前面版本有需要,index.ts修改引入后build
以后注意提交的时候带版本号，方便搜索修改记录，const里的版本要修改
......
src/2d/const.ts
View file @ 5acaa1b1
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.20";
export const VERSION = "2.0.21";
/**
......
src/2d/filter/index.ts
View file @ 5acaa1b1
......@@ -34,3 +34,5 @@ export { default as AlphaFilter } from './alpha/AlphaFilter';
export { default as SpriteMaskFilter } from './spriteMask/SpriteMaskFilter';
export { default as BlurFilterNew } from './blur/BlurFilterNew';
export * from './advanced-bloom/AdvancedBloomFilter';
src/2d/graphics/Graphics.ts
View file @ 5acaa1b1
......@@ -597,7 +597,7 @@ export default class Graphics extends Container {
* Specifies a simple one-color fill that subsequent calls to other Graphics methods
* (such as lineTo() or drawCircle()) use when drawing.
*
* @param {number} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number | string} [color=0] - the color of the fill 十六进制颜色0xffffff
* @param {number} [alpha=1] - the alpha of the fill
* @return {Graphics} This Graphics object. Good for chaining method calls
*/
......
src/2d/graphics/Shape.ts
View file @ 5acaa1b1
......@@ -2,7 +2,7 @@ import Texture from "../texture/Texture";
import { SCALE_MODES, LINE_CAP, LINE_JOIN } from "../const";
import { Rectangle, Point } from "../math";
import { DisplayObject } from "../display/DisplayObject";
import { hex2string, getRGBA, getGradientColor, getBackupCanvasCtx, getCanvasBitmapStyle, createCanvas } from "../utils";
import { hex2string, getRGBA, getGradientColor, getBackupCanvasCtx, getCanvasBitmapStyle, createCanvas, string2hex } from "../utils";
import Sprite from "../display/Sprite";
/**
......@@ -333,11 +333,14 @@ export class Shape extends Sprite {
/**
* 开始绘画填充,如果想画的东西有颜色填充,一定要从此方法开始
* @method beginFill
* @param {number} color 颜色值 单色和RGBA格式
* @param {number|string} color 颜色值 单色和RGBA格式
* @public
* @since 1.0.0
*/
public beginFill(color: number, alpha: number = 1): this {
public beginFill(color: number | string = 0, alpha: number = 1): this {
//颜色做个兼容
if (typeof (color) == "string") color = string2hex(color);
var sColor = getRGBA(hex2string(color), alpha);
this._fill(sColor);
return this;
......
src/2d/renderers/webgl/WebGLState.ts
View file @ 5acaa1b1
......@@ -203,7 +203,7 @@ export default class WebGLState {
for (let i = 0; i < this.activeState.length; ++i) {
this.activeState[i] = 32;
}
// 翻转Y纹理，gl状态默认不翻转false
this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, false);
this.setState(this.defaultState);
......
src/3d/D3Renderer.ts
View file @ 5acaa1b1
This diff is collapsed.
src/3d/Mesh3D.ts
View file @ 5acaa1b1
......@@ -32,7 +32,7 @@ export class Mesh3D extends Object3D {
this.updateMorphTargets();
}
_render(renderer) {
if (!this.visible) return
if (!this.visible) return;
renderer.batchManager.setObjectRenderer(renderer.plugins["d3"]);
renderer.plugins["d3"].render(this)
}
......@@ -137,10 +137,11 @@ export class Mesh3D extends Object3D {
return this
}
/**
*
* 克隆方法
* @param recursive 默认克隆子级
*/
clone() {
return new Mesh3D(this.geometry, this.material).copy(this);
clone(recursive: boolean = true) {
return new Mesh3D(this.geometry, this.material).copy(this, recursive);
}
}
......
src/3d/Scene3D.ts
View file @ 5acaa1b1
......@@ -7,10 +7,12 @@ import { Light } from "./lights/Light";
import { PointLight } from "./lights/PointLight";
import { DirectionalLight } from "./lights/DirectionalLight";
import { Vector3 } from "./math/Vector3";
import { Point, Matrix } from "../2d/math";
import { Point, Matrix, Rectangle } from "../2d/math";
import { Vector2 } from "./math/Vector2";
import { MouseEvent } from "../2d/events";
import { Raycaster } from "./Raycaster";
import { Filter } from "../2d/filter";
import { hex2rgb } from "../2d/utils";
/**
......@@ -44,7 +46,7 @@ export class Scene3D extends Object3D {
this._viewId = -1;
}
private _viewWidth: number = 300;
private _viewWidth: number = 750;
get viewWidth() {
return this._viewWidth;
}
......@@ -54,7 +56,7 @@ export class Scene3D extends Object3D {
this._viewWidth = value;
this._viewId = -1;
}
private _viewHeight: number = 300;
private _viewHeight: number = 1624;
get viewHeight() {
return this._viewHeight;
}
......@@ -64,6 +66,30 @@ export class Scene3D extends Object3D {
this._viewHeight = value;
this._viewId = -1;
}
setViewRect(x: number, y: number, width: number, height: number) {
this.viewX = x;
this.viewY = y;
this.viewWidth = width;
this.viewHeight = height;
this._viewId = -1;
}
private _fog: { color: Float32Array, near: number, far: number /*density: number*/ }
setFog(color: number = 0xffffff, near: number = 0, far: number = 100 /*density: number = 0.00025*/) {
var arr = hex2rgb(color)
if (this._fog) {
this._fog.color[0] = arr[0];
this._fog.color[1] = arr[1];
this._fog.color[2] = arr[2];
// this._fog.density = density
this._fog.near = near;
this._fog.far = far;
} else {
this._fog = { color: new Float32Array(arr), near, far/*density*/ }
}
}
removeFog() {
this._fog = null;
}
/**
* 父级是2d元素，用于修改视窗位置
......@@ -76,7 +102,18 @@ export class Scene3D extends Object3D {
*/
camera: Camera;
private raycaster: Raycaster = new Raycaster()
private raycaster: Raycaster = new Raycaster();
/**
* 滤镜数组
*/
private _filters: Filter[];
get filters(): Filter[] { return this._filters && this._filters.slice(); }
set filters(value: Filter[]) { this._filters = value && value.slice(); }
/**
* 可用的滤镜数据，_filters筛选过的
*/
protected _enabledFilters: Filter[];
constructor() {
super()
this._instanceType = "Scene3D";
......@@ -102,7 +139,8 @@ export class Scene3D extends Object3D {
plugin.camera = this.camera;
//处理所有灯，只找同一级的？还是递归找灯
plugin.lightsConfig = this.getLightConfig();
//查找有哪些材质，确定需要初始化哪些着色器
//雾化
plugin.fog = this._fog || null;
//设置插件，会调用start，如果是两个场景，会有问题，因为是同一个插件不会flush上一个，到时注意修改
renderer.batchManager.setObjectRenderer(plugin);
......@@ -133,9 +171,34 @@ export class Scene3D extends Object3D {
this._viewport.height
);
//处理子级东西
this.render(renderer);
}
if (this.filters && this.filters.length) {
//估计没必要
// renderer.batchManager.flush();
const filters = this.filters;
if (filters) {
if (!this._enabledFilters) this._enabledFilters = [];
//重置
this._enabledFilters.length = 0;
//筛选可用的
for (let i = 0; i < filters.length; i++) {
if (filters[i].enabled) this._enabledFilters.push(filters[i]);
}
//@ts-ignore
if (this._enabledFilters.length) renderer.filterManager.pushFilter(this, this._enabledFilters);
}
this.render(renderer);
//刷掉批处理
renderer.batchManager.flush();
//移除滤镜
if (filters && this._enabledFilters && this._enabledFilters.length) renderer.filterManager.popFilter();
} else {
this.render(renderer);
}
}
getBounds() {
return new Rectangle(this._viewX, this._viewY, this._viewWidth, this._viewHeight)
}
getLightConfig(
con: Object3D = this,
arr: LightsConfig = { pointLights: [], directionalLights: [], ambientLightColor: [0, 0, 0] }
......
src/3d/d3Objects/Sprite3D.ts 0 → 100644
View file @ 5acaa1b1
import { Geometry } from "../Geometry";
import { Sprite3dMaterial } from "../materials";
import { Mesh3D } from "../Mesh3D";
export class Sprite3D extends Mesh3D {
constructor(material: Sprite3dMaterial) {
var vertices = [
- 0.5, - 0.5, 0,// 0, 0,
0.5, - 0.5, 0,// 1, 0,
0.5, 0.5, 0, //1, 1,
- 0.5, 0.5, 0,// 0, 1
];
var uvs = [
0, 1,
1, 1,
1, 0,
0, 0
]
//@ts-ignore
super(new Geometry(vertices, [0, 1, 2, 0, 2, 3], null, null,uvs), material);
}
}
\ No newline at end of file
src/3d/d3Objects/index.ts 0 → 100644
View file @ 5acaa1b1
export * from "./Sprite3D"
\ No newline at end of file
src/3d/gltf/GLTFLoader.ts
View file @ 5acaa1b1
......@@ -2359,7 +2359,7 @@ function addPrimitiveAttributes(primitiveDef, accessors) {
var geo = new Geometry(
attributeToArray(verticesAttribute),
attributeToArray(accessors[primitiveDef.indices]),
attributeToArray(normalAttribute),
normalAttribute ? attributeToArray(normalAttribute) : null,
null,
uvAttribute ? attributeToArray(uvAttribute) : null
)
......
src/3d/index.ts
View file @ 5acaa1b1
......@@ -32,4 +32,7 @@ export * from "./D3Renderer";
export * from "./gltf";
//动画
export * from "./animation"
export * from "./animation";
//其他封装的一些物体
export * from "./d3Objects"
src/3d/materials/BaseMaterial.ts
View file @ 5acaa1b1
......@@ -82,8 +82,14 @@ export class BaseMaterial extends HashObject {
* 是否用线框形式绘制
*/
wireframe: boolean = false;
/**
* 材质渲染面
*/
side: RenderSideType = RenderSideType.FrontSide;
/**
* 场景的雾化是否对材质有效
*/
useFog: boolean = true;
/**
* 是否光照影响
*/
......
src/3d/materials/ShaderMaterial.ts 0 → 100644
View file @ 5acaa1b1
import { HashObject } from "../../2d/HashObject";
import { WebglRenderer } from "../../2d/renderers/WebglRenderer";
import { GLShader } from "../../glCore";
// precision mediump float;
// precision mediump int;
//
// uniform mat4 uViewMatrix;
// uniform mat4 uProjectionMatrix;
// uniform mat4 uModelMatrix;
export const defaultVertexShader3d =
`attribute vec3 aPosition;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelMatrix;
void main() {
gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4( aPosition, 1.0 );
}`;
export const defaultFragmentShader3d =
`void main() {
gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}`
/**
* 不考虑宏定义，否则自行修改getShader及缓存方式
* 这三个必备，除非自己不需要几何的矩阵信息
* uniform mat4 uViewMatrix;
* uniform mat4 uProjectionMatrix;
* uniform mat4 uModelMatrix;
*/
export class ShaderMaterial extends HashObject {
/**
* key就是渲染器唯一id
*/
protected shaders: { [key: string]: GLShader } = {};
/**
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean = true;
constructor(
protected vertexShader = defaultVertexShader3d,
protected fragmentShader = defaultFragmentShader3d,
public uniforms: { [key: string]: { type: UniformType, value: any } } = {}
) {
super();
this.vertexShader = vertexShader || defaultVertexShader3d;
this.fragmentShader = fragmentShader || defaultFragmentShader3d;
this._instanceType = "ShaderMaterial";
}
/**
* 自定义着色器不考虑缓存了，自己注意，
* 多个完全一样的自定义材质，用同一个就行了
* @param renderer
*/
getShader(renderer: WebglRenderer): GLShader {
const id = renderer.CONTEXT_UID;
if (!this.shaders[id]) {
//生成
this.shaders[id] = new GLShader(
renderer.gl,
this.vertexShader,
this.fragmentShader
);
this.shaders[id]["_glShaderKey"] = `customShader${"id" + id}${"instanceId" + this.instanceId}`;
};
return this.shaders[id];
}
destroy() {
for (let id in this.shaders) {
this.shaders[id].destroy();
delete this.shaders[id];
}
this.shaders = null;
this.vertexShader = null;
this.fragmentShader = null
}
}
export enum UniformType {
float = "f",
/**
* 纹理对象
*/
texture = "t",
/**
* 十六进制数字
*/
color = "c",
/**
* v2对象
*/
vector2 = "v2",
/**
* v3对象
*/
vector3 = "v3",
/**
* v4对象
*/
vector4 = "v4",
/**
* m4对象
*/
matrix4 = "m4",
}
\ No newline at end of file
src/3d/materials/Sprite3dMaterial.ts 0 → 100644
View file @ 5acaa1b1
import { DEG_TO_RAD, RAD_TO_DEG } from "../../2d/const";
import { WebglRenderer } from "../../2d/renderers/WebglRenderer";
import { Texture } from "../../2d/texture";
import { GLShader } from "../../glCore";
import { Vector2 } from "../math/Vector2";
import { ShaderMaterial, UniformType } from "./ShaderMaterial";
const sprite3dVertexShader =
`precision mediump float;
attribute vec3 aPosition;
attribute vec2 aTextureCoord;
varying vec2 vTextureCoord;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelMatrix;
uniform vec2 center;
uniform float rotation;
void main() {
vTextureCoord = aTextureCoord;
vec4 mvPosition = uViewMatrix * uModelMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
vec2 scale;
scale.x = length( vec3( uModelMatrix[ 0 ].x, uModelMatrix[ 0 ].y, uModelMatrix[ 0 ].z ) );
scale.y = length( vec3( uModelMatrix[ 1 ].x, uModelMatrix[ 1 ].y, uModelMatrix[ 1 ].z ) );
#ifndef USE_SIZEATTENUATION
bool isPerspective = ( uProjectionMatrix[ 2 ][ 3 ] == - 1.0 );
if ( isPerspective ) scale *= - mvPosition.z;
#endif
vec2 alignedPosition = ( aPosition.xy - ( center - vec2( 0.5 ) ) ) * scale;
vec2 rotatedPosition;
rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
mvPosition.xy += rotatedPosition;
gl_Position = uProjectionMatrix * mvPosition;
}`;
const sprite3dFragmentShader =
`precision mediump float;
uniform vec3 color;
uniform float alpha;
uniform sampler2D map;
varying vec2 vTextureCoord;
void main() {
vec4 mapColor = texture2D( map, vTextureCoord );
gl_FragColor = vec4( color, alpha )*mapColor;
}`;
export class Sprite3dMaterial extends ShaderMaterial {
sizeAttenuation: boolean = true;
constructor() {
super(sprite3dVertexShader, sprite3dFragmentShader, {
center: { type: UniformType.vector2, value: new Vector2(0.5, 0.5) },
rotation: { type: UniformType.float, value: 0.0 },
color: { type: UniformType.color, value: 0xffffff },
alpha: { type: UniformType.float, value: 1.0 },
map: { type: UniformType.texture, value: Texture.WHITE },
});
this._instanceType = "Sprite3dMaterial";
}
getShader(renderer: WebglRenderer): GLShader {
const id = "" + renderer.CONTEXT_UID + this.sizeAttenuation;
if (!this.shaders[id]) {
//生成
this.shaders[id] = new GLShader(
renderer.gl,
(this.sizeAttenuation ? '#define USE_SIZEATTENUATION\n' : "") + this.vertexShader,
this.fragmentShader
);
this.shaders[id]["_glShaderKey"] = `customShader${"id" + id}${"instanceId" + this.instanceId}${"sizeAttenuation" + this.sizeAttenuation}`;
};
return this.shaders[id];
}
get center() {
return this.uniforms.center.value;
}
set center(v: Vector2) {
this.uniforms.center.value = v;
}
get rotation() {
return this.uniforms.rotation.value * RAD_TO_DEG;
}
set rotation(v: number) {
this.uniforms.rotation.value = v * DEG_TO_RAD;
}
get color() {
return this.uniforms.color.value;
}
set color(v: number) {
this.uniforms.color.value = v;
}
get alpha() {
return this.uniforms.alpha.value;
}
set alpha(v: number) {
this.uniforms.alpha.value = v;
}
get map() {
return this.uniforms.map.value;
}
set map(v: Texture) {
this.uniforms.map.value = v;
}
}
\ No newline at end of file
src/3d/materials/index.ts
View file @ 5acaa1b1
......@@ -3,4 +3,8 @@ export * from "./BaseMaterial";
export * from "./LightMaterial";
export * from "./ShaderMaterial"
export * from "./Sprite3dMaterial"
// export * from "./SkyBoxMaterial";//还有问题
\ No newline at end of file
src/3d/shaders/getCusShader.ts
View file @ 5acaa1b1
......@@ -18,7 +18,8 @@ export function getCusShader(
lights: LightsConfig,
mesh: Mesh3D,
maxBones?: number,
useVertexTexture?: boolean
useVertexTexture?: boolean,
fog?: any
) {
//所有参数
var parameters: ShaderParametersInt = {
......@@ -39,7 +40,9 @@ export function getCusShader(
useEnvMap: !!material.envMap,
combine: material.combine,
useVertexColor: !!material.useVertexColor
useVertexColor: !!material.useVertexColor,
useFog: fog && material.useFog,
}
//计算code，
var shaderKey = getShaderKey(parameters);
......@@ -129,6 +132,7 @@ class CusShader extends GLShader {
parameters.useMap ? '#define USE_MAP' : '',
parameters.useEnvMap ? '#define USE_ENVMAP' : '',
parameters.useVertexColor ? '#define USE_VERTEXCOLOR' : '',
parameters.useFog ? '#define USE_FOG' : '',
].filter(e => e !== '').join('\n');
//不为空加个换行
if (frontVert) frontVert += "\n";
......@@ -141,6 +145,7 @@ class CusShader extends GLShader {
parameters.useEnvMap ? '#define USE_ENVMAP' : '',
parameters.useEnvMap ? '#define ' + parameters.combine : '',
parameters.useVertexColor ? '#define USE_VERTEXCOLOR' : '',
parameters.useFog ? '#define USE_FOG' : '',
].filter(e => e !== '').join('\n');
if (frontFrag) frontFrag += "\n";
......@@ -198,6 +203,9 @@ function extractUniforms(gl: WebGLRenderingContext, program: WebGLProgram) {
*/
const cacheShaders: CusShader[] = [];
//////////////ShaderParametersInt和parameterNames这两个要对应的，否则缓存会出问题
/**
* 影响着色器编译的所有的参数
*
......@@ -219,6 +227,7 @@ const parameterNames = [
"useEnvMap",
"combine",
"useVertexColor",
"useFog",
]
/**
......@@ -239,6 +248,7 @@ interface ShaderParametersInt {
useEnvMap: boolean,
combine: EnvBlendType,
useVertexColor: boolean,
useFog: boolean
}
/**
......@@ -336,6 +346,11 @@ const VERT = [
' #endif',
'#endif',
//雾化
'#ifdef USE_FOG',
' varying float vFogDepth;',
'#endif',
"void main() {",
//赋值顶点坐标
" vec3 transformed = vec3( aPosition );",
......@@ -409,6 +424,10 @@ const VERT = [
" vReflect = reflect(cameraToVertex, worldNormal);",
' #endif',
' #endif',
//雾化深度
' #ifdef USE_FOG',
' vFogDepth = -mvPosition.z;',
' #endif',
"}"
].join("\n")
......@@ -481,6 +500,15 @@ const FRAG = [
'#endif',
//雾化声明量
'#ifdef USE_FOG',
' uniform vec3 uFogColor;',
' varying float vFogDepth;',
// ' uniform float uFogDensity;',
' uniform float uFogNear;',
' uniform float uFogFar;',
'#endif',
"void main() {",
//颜色计算，通用
" vec4 color = vec4( uMatColor, uMatAlpha );",
......@@ -581,6 +609,12 @@ const FRAG = [
' #endif',
' #endif',
' gl_FragColor = vec4( colorRgb, color.a );',
//雾化处理
'#ifdef USE_FOG',
// ' float fogFactor = 1.0 - clamp( exp2( - uFogDensity * uFogDensity * vFogDepth * vFogDepth * 1.442695 ), 0.0, 1.0 );',
' float fogFactor = smoothstep( uFogNear, uFogFar, vFogDepth );',
' gl_FragColor.rgb = mix( gl_FragColor.rgb, uFogColor, fogFactor );',
'#endif',
"}"
].join("\n")
......
src/glCore/GLFramebuffer.ts
View file @ 5acaa1b1
......@@ -154,14 +154,16 @@ export class GLFramebuffer {
* @param data {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} an array of data
*/
public static createRGBA(gl: WebGLRenderingContext, width: number, height: number, data?) {
var texture = GLTexture.fromData(gl, null, width, height);
// var texture = GLTexture.fromData(gl, null, width, height);
var texture = GLTexture.fromData(gl, data || null, width, height);
texture.enableNearestScaling();
texture.enableWrapClamp();
//now create the framebuffer object and attach the texture to it.
var fbo = new GLFramebuffer(gl, width, height);
fbo.enableTexture(texture);
//fbo.enableStencil(); // get this back on soon!
//加上了，待测试
fbo.enableStencil(); // get this back on soon!
//fbo.enableStencil(); // get this back on soon!
......@@ -178,7 +180,7 @@ export class GLFramebuffer {
* @param height {Number} the height of the drawing area of the frame buffer
* @param data {ArrayBuffer| SharedArrayBuffer|ArrayBufferView} an array of data
*/
public static createFloat32(gl: WebGLRenderingContext, width: number, height: number, data:any) {
public static createFloat32(gl: WebGLRenderingContext, width: number, height: number, data: any) {
// create a new texture..
var texture = GLTexture.fromData(gl, data, width, height);
texture.enableNearestScaling();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment