Skip to content

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

2.0.35

parent 7b0befe2
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 343 additions and 62 deletions
build/FYGE.d.ts
View file @ e14b99fa
declare namespace FYGE{export const VERSION = "2.0.34";
declare namespace FYGE{export const VERSION = "2.0.35";
export const osType: "ios" | "android" | "pc";
......@@ -8853,9 +8853,15 @@ export class SvgaAni extends AnimationNode {
* @param rotation
* @param anchorX
* @param anchorY
* @returns 返回添加的部件
*/
addAniPart<T extends Container>(imageKey: string, child: T, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): T;
/**
* 移动部件
* @param child
* @returns
*/
addAniPart(imageKey: string, child: Container, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): void;
removeAniPart<T extends Container>(child: T): T;
/**
* 给图层修改图片，一般用于出奖动效的奖品图片的替换，尺寸不一致时会做居中适配
* @param imagekey 会查找所有用了imagekey的图层
......@@ -9549,7 +9555,6 @@ export class Geometry extends HashObject {
_vertices: Float32Array | number[];
_colors: Float32Array | number[];
_uvs: Float32Array | number[];
_uvsOrigin: Float32Array | number[];
_normals: Float32Array | number[];
attrBufferNeedUpdate: boolean;
_indices: Uint16Array | number[];
......@@ -9650,6 +9655,14 @@ export class ShaderMaterial extends HashObject {
value: any;
};
};
/**
* 是否用线框形式绘制
*/
wireframe: boolean;
/**
* 材质渲染面
*/
side: RenderSideType;
/**
* key就是渲染器唯一id
*/
......@@ -9660,7 +9673,7 @@ export class ShaderMaterial extends HashObject {
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean;
get isShaderMaterial(): boolean;
constructor(vertexShader?: string, fragmentShader?: string, uniforms?: {
[key: string]: {
type: UniformType;
......@@ -9701,7 +9714,11 @@ export enum UniformType {
/**
* m4对象
*/
matrix4 = "m4"
matrix4 = "m4",
/**
* m3对象
*/
matrix3 = "m3"
}
export class Sprite3dMaterial extends ShaderMaterial {
......
build/fyge.min.js
View file @ e14b99fa
This diff is collapsed.
build/fyge.min.js.map
View file @ e14b99fa
This diff is collapsed.
build/types.d.ts
View file @ e14b99fa
export const VERSION = "2.0.34";
export const VERSION = "2.0.35";
export const osType: "ios" | "android" | "pc";
......@@ -8853,9 +8853,15 @@ export class SvgaAni extends AnimationNode {
* @param rotation
* @param anchorX
* @param anchorY
* @returns 返回添加的部件
*/
addAniPart<T extends Container>(imageKey: string, child: T, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): T;
/**
* 移动部件
* @param child
* @returns
*/
addAniPart(imageKey: string, child: Container, index: number, x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, anchorX?: number, anchorY?: number): void;
removeAniPart<T extends Container>(child: T): T;
/**
* 给图层修改图片，一般用于出奖动效的奖品图片的替换，尺寸不一致时会做居中适配
* @param imagekey 会查找所有用了imagekey的图层
......@@ -9549,7 +9555,6 @@ export class Geometry extends HashObject {
_vertices: Float32Array | number[];
_colors: Float32Array | number[];
_uvs: Float32Array | number[];
_uvsOrigin: Float32Array | number[];
_normals: Float32Array | number[];
attrBufferNeedUpdate: boolean;
_indices: Uint16Array | number[];
......@@ -9650,6 +9655,14 @@ export class ShaderMaterial extends HashObject {
value: any;
};
};
/**
* 是否用线框形式绘制
*/
wireframe: boolean;
/**
* 材质渲染面
*/
side: RenderSideType;
/**
* key就是渲染器唯一id
*/
......@@ -9660,7 +9673,7 @@ export class ShaderMaterial extends HashObject {
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean;
get isShaderMaterial(): boolean;
constructor(vertexShader?: string, fragmentShader?: string, uniforms?: {
[key: string]: {
type: UniformType;
......@@ -9701,7 +9714,11 @@ export enum UniformType {
/**
* m4对象
*/
matrix4 = "m4"
matrix4 = "m4",
/**
* m3对象
*/
matrix3 = "m3"
}
export class Sprite3dMaterial extends ShaderMaterial {
......
examples/previewSpine.html
View file @ e14b99fa
......@@ -161,16 +161,16 @@
var inputX = document.getElementById("x");
inputX.oninput = () => {
var x = parseInt(inputX.value)
if (x) {
spine.x = x;
}
// if (x) {
spine.x = x || 0;
// }
}
var inputY = document.getElementById("y");
inputY.oninput = () => {
var y = parseInt(inputY.value)
if (y) {
spine.y = y;
}
// if (y) {
spine.y = y || 0;
// }
}
}
})
......
examples/为了ppt.html
View file @ e14b99fa
......@@ -15,6 +15,7 @@
<!-- <script src="./js/svgaParser.min.js"></script> -->
<!-- 主引擎 -->
<script src="../build/fyge.min.js"></script>
<!-- <script src="//yun.duiba.com.cn/db_games/libs0924/fyge2030.min.js"></script> -->
<style>
html,
body {
......@@ -88,7 +89,7 @@
var tex = await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => { r(FYGE.Texture.fromImage(image)) }, "res/11.png")
})
//好多图
//好多图,iphone678/30帧以上
for (var i = 0; i < 20000; i++) {
let a = stage.addChild(new FYGE.Sprite(tex))
.addEventListener(FYGE.Event.ENTER_FRAME, () => {
......
package.json
View file @ e14b99fa
{
"name": "fyge",
"version": "2.0.34",
"version": "2.0.35",
"description": "canvas渲染引擎",
"main": "./build/fyge.min.js",
"types": "./build/types.d.ts",
......
record.txt
View file @ e14b99fa
......@@ -413,16 +413,43 @@
2.0.34 InputText的lineSpacing改成lineHeight，原先就是lineHeight
删除TextField的lineSpacing，新增lineHeight
2.0.35 Container的renderWebGL对mask进行判断纹理为空或不可用或者没有几何数据时直接return不渲染
RoundedRectangle的构造函数里对于圆角radius与最小边的半值相等时需要减个小数，防止相等，否则计算顶点会出现NaN
CanvasMaskManager的pushMask里setTransform里a和d不能为0，降级一个小数
SvgaAni的addAniPart增加泛型返回值
SvgaAni新增removeAniPart方法
D3Renderer的flush方法里自定义材质新增uniform类型matrix3
D3Renderer的flush方法里对于map新增uUvTransform（为了图集），去掉原先傻逼的处理方式
getCusShader里新增uUvTransform计算
D3Renderer里对于vao.draw绘制新增point的判断
Geometry去掉字段_uvsOrigin
Sprite3D的几何变成公用的
Sprite3dMaterial添加uvTransform，涉及顶点着色器，uniforms字段，map的set方法需要多处理uvTransform
ShaderMaterial新增字段wireframe，side，，isShaderMaterial变成只读
ShaderMaterial文件里UniformType新增matrix3类型
有些类以后用Particles3D,IMaterial,Points3dMaterial
大尺寸纹理首次传gpu使用时会掉帧，越大耗时越多。考虑如何处理
现在不改，索引数据过大时得用Uint32Array，同时开扩展gl.getExtension( "OES_element_index_uint" )和drawElements改参数类型为gl.UNSIGNED_INT
//现在不改，DisplayObject的getLocalBounds最后是否考虑计算一次updateTransform(不用计算自己的,为了计算子级的)
现在不改，D3Renderer里的aSkinIndex传值用了Uint8Array，类型是gl.UNSIGNED_BYTE，估计那个外星头是因为这个
现在不改，到时loadSpine要改成返回数据（方便创建多个实例）
//现在不改，到时loadSpine要改成返回数据（方便创建多个实例）
引擎内自执行的东西容易导致报错，以后考虑修改，改成方法获取（或者变量用到时再实例）比较安全
lottie的tm字段时啥
深度检测加透明度混合流程，
开启深度检测，gl.enable(gl.DEPTH_TEST)
绘制所有非透明对象，
锁定深度缓冲区（只读），gl.depthMask(false)
绘制所有带透明对象 a < 1.0，注意将物体按深度排序，a 最小最先绘制，（还是说按照离相机距离）
释放深度缓冲区，使之可读可写，gl.depthMask(true)
//滤镜遮罩，当Shape无指令时会导致后面绘制的东西无效，待排查
graphics一直画圆，到后面会画不出来，是超出限制了吗？
显示对象的update方法到时考虑加_（现在先加注释，避免重写覆盖，因为可能影响以前项目）
检查spine动画区间问题
......
scripts/mergeSpine.js
View file @ e14b99fa
......@@ -21,7 +21,7 @@ var json = Buffer.from(JSON.stringify(JSON.parse(fs.readFileSync(inUrl + ".json"
//头部信息
var header = new ArrayBuffer(12);
var headerView = new DataView(header);
var headerView = new DataView(header);//32位最高存储数值2^32-1，每个数值存储字节长度4
headerView.setUint32(0, img.byteLength, true);
headerView.setUint32(4, atlas.byteLength, true);
headerView.setUint32(8, json.byteLength, true);
......
src/2d/const.ts
View file @ e14b99fa
......@@ -7,7 +7,7 @@
* @name VERSION
* @type {string}
*/
export const VERSION = "2.0.34";
export const VERSION = "2.0.35";
/**
......
src/2d/display/Container.ts
View file @ e14b99fa
......@@ -39,7 +39,7 @@ export default class Container extends DisplayObject {
* children改变时触发，暂时没地方用到，考虑废弃
* @param {number} index
*/
onChildrenChange(index:number) {
onChildrenChange(index: number) {
//子类需要时重写
}
......@@ -427,6 +427,19 @@ export default class Container extends DisplayObject {
if (!this.visible || this._worldAlpha <= 0 || !this.renderable) {
return;
}
//如果有遮罩，但是遮罩无数据，直接return
if (this.mask) {
//Shape遮罩，或者Sprite遮罩
// if (this.mask.texture && this.mask.texture.valid) return//不能这么判断，因为此时valid肯定false
if (this.mask.texture) {
this.mask.updateShape && this.mask.updateShape();//更新一下
if (!this.mask.texture.valid) return;
}
//Graphics遮罩，其实这个判断也包括了Sprite的纹理为空的情况
else if (!this.mask.graphicsData || !this.mask.graphicsData.length) {
return;
}
}
//是否有遮罩。到时如果有滤镜，
if (this.mask || (this.filters && this.filters.length)) {
this.renderAdvancedWebGL(renderer);
......
src/2d/graphics/shapes/RoundedRectangle.ts
View file @ e14b99fa
......@@ -45,7 +45,10 @@ export default class RoundedRectangle {
radius = radius < 0 ? -radius : radius;
//大于max取max
radius = radius > max ? max : radius;
//等于最大圆角时额外处理下，否则有点重合
if (radius == max) radius -= 0.0000000001
this.radius = radius;
this.type = SHAPES.RREC;
......
src/2d/renderers/managers/CanvasMaskManager.ts
View file @ e14b99fa
......@@ -30,10 +30,10 @@ export default class CanvasMaskManager extends HashObject {
renderer.context.globalAlpha = 0;//得加上，不绘制
const transform = maskData.transform.worldMatrix;
renderer.context.setTransform(
transform.a,
transform.a || 0.0000000001,//暂时发现a或d为0时，接下来绘制被遮对象用的setTransform时遮罩clip不起作用
transform.b,
transform.c,
transform.d,
transform.d || 0.0000000001,
transform.tx,
transform.ty
);
......
src/2d/ui/SvgaAni.ts
View file @ e14b99fa
......@@ -122,11 +122,11 @@ export class SvgaAni extends AnimationNode {
* @param rotation
* @param anchorX
* @param anchorY
* @returns
* @returns 返回添加的部件
*/
addAniPart(
addAniPart<T extends Container>(
imageKey: string,
child: Container,
child: T,
index: number,
x?: number,
y?: number,
......@@ -135,7 +135,7 @@ export class SvgaAni extends AnimationNode {
rotation?: number,
anchorX?: number,
anchorY?: number
) {
): T {
if (!child || !imageKey || !this.rawData || !this.animationClip) return;
var oriFrames: FrameEntity[], sprites = this.rawData.sprites;
for (var i = 0; i < sprites.length; i++) {
......@@ -154,6 +154,27 @@ export class SvgaAni extends AnimationNode {
this.addChildAt(child, index),
frames
))
//返回添加的部分
return child;
}
/**
* 移动部件
* @param child
* @returns
*/
removeAniPart<T extends Container>(child: T): T {
//先从父级移除
this.removeChild(child);
//再从tracks移除，为了不想加polyfill，不用find或findIndex
let tracks = this.animationClip["tracks"] as SvgaTrack[];
//找出track；
for (var i = 0; i < tracks.length; i++) {
if (tracks[i]["obj"] == child) {
tracks.splice(i, 1);
break;
}
}
return child
}
/**
* 给图层修改图片，一般用于出奖动效的奖品图片的替换，尺寸不一致时会做居中适配
......
src/3d/D3Renderer.ts
View file @ e14b99fa
......@@ -160,6 +160,9 @@ export class D3Renderer extends ObjectRenderer {
case UniformType.color:
uniforms[u] = hex2rgb(value)
break;
case UniformType.matrix3:
uniforms[u] = value.toArray(true);
break;
case UniformType.vector2:
case UniformType.vector3:
case UniformType.vector4:
......@@ -218,14 +221,8 @@ export class D3Renderer extends ObjectRenderer {
if (!map.transform) map.transform = new TextureMatrix(map);
//更新下
map.transform.update();
//计算下
let uvs = map.transform.multiplyUvs(geo._uvsOrigin, []);
//判断下map的uv和几何_uv是否一致，原先几何的uv估计需要存下来
if (!isArrayEqual(geo._uvs, uvs)) {
geo._uvs = uvs;
//标记下
geo.attrBufferNeedUpdate = true
}
//赋值偏移
uniforms["uUvTransform"] = map.transform.mapCoord.toArray(true);
}
//是否带环境贴图
if (mat.envMap) {//环境贴图先不考虑图集的情况，一般一张大jpg
......@@ -391,7 +388,7 @@ export class D3Renderer extends ObjectRenderer {
this.renderer.state.setFrontFace(mat.side)
}
//绘制
vao.draw(mat.wireframe ? gl.LINES : gl.TRIANGLES);
vao.draw(mat["isPointsMaterial"] ? gl.POINTS : mat.wireframe ? gl.LINES : gl.TRIANGLES);
}
this.meshes.length = 0
}
......@@ -493,6 +490,7 @@ function addMorphtargetsAttr(
gl: WebGLRenderingContext,
): UploadBufferData[] {
var morphTargets = geo._morphPositions;
//这里的判断是有问题的，讲道理应该是mat.morphNormals&&geo._morphNormals;但是现在变形动画都由glb提供，里面只要有法线变形就会设置mat.morphNormals=true
var morphNormals = geo._morphNormals;
var length = objectInfluences.length;//权重数据总长度，基本不会被手动修改，到时排序只取权重大的，最多8
......@@ -778,7 +776,8 @@ function getShadowMap(
}
//绘制
vao.draw(mat.wireframe ? gl.LINES : gl.TRIANGLES);
// vao.draw(mat.wireframe ? gl.LINES : gl.TRIANGLES);
vao.draw(mat["isPointsMaterial"] ? gl.POINTS : mat.wireframe ? gl.LINES : gl.TRIANGLES)
})
//纹理绑定回去
......
src/3d/Geometry.ts
View file @ e14b99fa
......@@ -23,7 +23,7 @@ export class Geometry extends HashObject {
_vertices: Float32Array | number[];
_colors: Float32Array | number[];
_uvs: Float32Array | number[]; _uvsOrigin: Float32Array | number[];
_uvs: Float32Array | number[];
_normals: Float32Array | number[];
//记录上面四项数据是否修改了，自行赋值
......@@ -97,7 +97,7 @@ export class Geometry extends HashObject {
for (var i = 0; i < vertices.length; i++)f[i] = 1;
return f;
})()//new Float32Array(vertices.length).map(() => { return 1 });//不传就全是白色
this._uvs = this._uvsOrigin = uvs || new Float32Array(vertices.length / 3 * 2);
this._uvs = uvs || new Float32Array(vertices.length / 3 * 2);
//索引直接用，可能没有，需要转成类型化数组，会直接upload
this._indices = indices ? new Uint16Array(indices) : null;
//顶点长度先记录，渲染时再加了，先去掉
......
src/3d/Mesh3D.ts
View file @ e14b99fa
......@@ -12,7 +12,7 @@ const templeSphere: Sphere = new Sphere();
const tempMatrix: Matrix4 = new Matrix4();
const tempRay: Ray = new Ray();
const tempPoint = new Vector3();
//现在基本所有3d的显示对象(sprite3d以及所有help)都继承自Mesh3D，但是以后尽量分开，包括line和point，以及材质也需要分开，TODO
export class Mesh3D extends Object3D {
/**
* 用于变形权重，只能获取，修改只能内部修改
......
src/3d/d3Objects/Particles3D.ts 0 → 100644
View file @ e14b99fa
//3d例子对象
//提前设定好最大粒子数。也就是几何的顶点数
//考虑各种参数在cpu计算，然后传数据，比如attribute位置，透明度，颜色，尺寸，是否渲染等等，都是数组，
//暂时这些信息都在cpu内托管，以后有时间参考babylon的gpu粒子，一次gpuupdate，一次gpurender
//暂时不好写，到时得修改下Geometry才行，否则很多attribute没法传
import { Mesh3D } from "../Mesh3D";
//又是继承Mesh3D，以后有时间注意修改，区分mesh，point，line
export class Particles3D extends Mesh3D {
// constructor(public count: number = 1000) {
// super()
// this._instanceType = "Particles3D"
// }
}
\ No newline at end of file
src/3d/d3Objects/Sprite3D.ts
View file @ e14b99fa
......@@ -2,22 +2,26 @@ import { Geometry } from "../Geometry";
import { Sprite3dMaterial } from "../materials";
import { Mesh3D } from "../Mesh3D";
//所有sprite公用一个几何
let geometrySpirte3D: Geometry;
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
]
if (!geometrySpirte3D) {
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
];
geometrySpirte3D = new Geometry(vertices, [0, 1, 2, 0, 2, 3], null, null, uvs);
}
//@ts-ignore
super(new Geometry(vertices, [0, 1, 2, 0, 2, 3], null, null,uvs), material);
super(geometrySpirte3D, material);
}
}
\ No newline at end of file
src/3d/materials/IMaterial.ts 0 → 100644
View file @ e14b99fa
import { BLEND_MODES } from "../../2d/const";
import { HashObject } from "../../2d/HashObject";
/**
* 材质基类，一些公用的属性,，一般是渲染状态机的属性，不会包括uniform的属性
* 到时着色器还需要分块，否则自定义着色器不好拼
* 感觉改得越来越像three了
* 暂时还没启用
*/
export class IMaterial extends HashObject {
/**
* 是否用线框形式绘制
*/
wireframe: boolean = false;
/**
* 材质渲染面
*/
// side: RenderSideType = RenderSideType.FrontSide;
/**
* BLEND_MODES到时都得重新整理下，现在很多是无效的
* 暂时不加three得自定义混色，也不设置是否预乘透明度，只用引擎给的
*/
blending: BLEND_MODES = BLEND_MODES.NORMAL
/**
* 是否允许透明，
*/
transparent: boolean;
/**
* 是否进行深度检测，默认true depthFunc先不加
*/
depthTest: boolean = true;
/**
* 是否进行深度写入,默认true
*/
depthWrite: boolean = true;
/**
* 是否需要更新材质
*/
needsUpdate: boolean = true;
constructor() {
super();
this._instanceType = "IMaterial"
}
destroy() {
}
}
\ No newline at end of file
src/3d/materials/Points3dMaterial.ts 0 → 100644
View file @ e14b99fa
import { DEG_TO_RAD, RAD_TO_DEG } from "../../2d/const";
import { Matrix } from "../../2d/math";
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 points3dVertexShader =
`precision mediump float;
attribute vec3 aPosition;
uniform mat4 uViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uModelMatrix;
uniform float size;
uniform float scale;
void main() {
vec4 mvPosition = uViewMatrix * uModelMatrix * vec4( aPosition, 1.0 );
gl_Position = uProjectionMatrix * mvPosition;
gl_PointSize = size;
#ifdef USE_SIZEATTENUATION
bool isPerspective = ( uProjectionMatrix[ 2 ][ 3 ] == - 1.0 );
if ( isPerspective ) gl_PointSize *= ( scale / - mvPosition.z );
#endif
}`;
const points3dFragmentShader =
`precision mediump float;
uniform vec3 color;
uniform float alpha;
uniform sampler2D map;
uniform mat3 uvTransform;
void main() {
vec2 uv = ( uvTransform * vec3( gl_PointCoord.x, 1.0 - gl_PointCoord.y, 1 ) ).xy;
vec4 mapColor = texture2D( map, uv );
gl_FragColor = vec4( color*alpha, alpha )*mapColor;
}`;
/**
* 为了粒子系统的点材料，其实也可能是顶点变形动画网格，
* 暂时只用作粒子系统，到时候glsl都规范后仿three的chunk写，通通可以拼，
* 所以暂时命名为ParticlesMaterial，不用point，
* 新版three的Points是支持变形动画的
* three貌似是分开的，考虑按three的方式来，网格点分开，材质也分开
* 暂时按照自定义着色器来
* 透明度和深度检测是个大问题，到时候大改的时候再用，暂时不用
*/
export class Points3dMaterial extends ShaderMaterial {
sizeAttenuation: boolean = true;
get isPointsMaterial() {
return true
}
constructor() {
super(points3dVertexShader, points3dFragmentShader, {
color: { type: UniformType.color, value: 0xffffff },
alpha: { type: UniformType.float, value: 1.0 },
map: { type: UniformType.texture, value: Texture.WHITE },
uvTransform: { type: UniformType.matrix3, value: new Matrix() },
scale: { type: UniformType.float, value: 100.0 },//一般是一半的画布高度
size: { type: UniformType.float, value: 1.0 }
})
}
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];
}
}
\ No newline at end of file
src/3d/materials/ShaderMaterial.ts
View file @ e14b99fa
import { HashObject } from "../../2d/HashObject";
import { WebglRenderer } from "../../2d/renderers/WebglRenderer";
import { GLShader } from "../../glCore";
import { RenderSideType } from "./BaseMaterial";
// precision mediump float;
// precision mediump int;
......@@ -31,6 +32,14 @@ export const defaultFragmentShader3d =
* uniform mat4 uModelMatrix;
*/
export class ShaderMaterial extends HashObject {
/**
* 是否用线框形式绘制
*/
wireframe: boolean = false;
/**
* 材质渲染面
*/
side: RenderSideType = RenderSideType.FrontSide;
/**
* key就是渲染器唯一id
*/
......@@ -39,7 +48,9 @@ export class ShaderMaterial extends HashObject {
* 标记下。
* 本来想直接用_instanceType判断，但是后续考虑到SpriteMaterial，SkyMaterial都会继承这个，会重写_instanceType
*/
isShaderMaterial: boolean = true;
get isShaderMaterial(): boolean {
return true;
};
constructor(
protected vertexShader = defaultVertexShader3d,
protected fragmentShader = defaultFragmentShader3d,
......@@ -106,4 +117,8 @@ export enum UniformType {
* m4对象
*/
matrix4 = "m4",
/**
* m3对象
*/
matrix3 = "m3",
}
\ No newline at end of file
src/3d/materials/Sprite3dMaterial.ts
View file @ e14b99fa
import { DEG_TO_RAD, RAD_TO_DEG } from "../../2d/const";
import { Matrix } from "../../2d/math";
import { WebglRenderer } from "../../2d/renderers/WebglRenderer";
import { Texture } from "../../2d/texture";
import TextureMatrix from "../../2d/texture/TextureMatrix";
import { GLShader } from "../../glCore";
import { Vector2 } from "../math/Vector2";
import { ShaderMaterial, UniformType } from "./ShaderMaterial";
......@@ -19,8 +21,10 @@ uniform vec2 center;
uniform float rotation;
uniform mat3 uvTransform;
void main() {
vTextureCoord = aTextureCoord;
vTextureCoord = ( uvTransform * vec3( aTextureCoord, 1 ) ).xy;
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 ) );
......@@ -49,7 +53,7 @@ uniform sampler2D map;
varying vec2 vTextureCoord;
void main() {
vec4 mapColor = texture2D( map, vTextureCoord );
gl_FragColor = vec4( color, alpha )*mapColor;
gl_FragColor = vec4( color*alpha, alpha )*mapColor;
}`;
export class Sprite3dMaterial extends ShaderMaterial {
......@@ -61,6 +65,7 @@ export class Sprite3dMaterial extends ShaderMaterial {
color: { type: UniformType.color, value: 0xffffff },
alpha: { type: UniformType.float, value: 1.0 },
map: { type: UniformType.texture, value: Texture.WHITE },
uvTransform: { type: UniformType.matrix3, value: new Matrix() },
});
this._instanceType = "Sprite3dMaterial";
}
......@@ -106,5 +111,12 @@ export class Sprite3dMaterial extends ShaderMaterial {
}
set map(v: Texture) {
this.uniforms.map.value = v;
//纹理坐标矩阵
//没加的加一个
if (!v.transform) v.transform = new TextureMatrix(v);
//更新下
v.transform.update();
//赋值偏移
(this.uniforms.uvTransform.value as Matrix).copy(v.transform.mapCoord);
}
}
\ No newline at end of file
src/3d/shaders/getCusShader.ts
View file @ e14b99fa
......@@ -290,6 +290,7 @@ const VERT = [
"#ifdef USE_MAP",//有贴图才用到纹理坐标
" attribute vec2 aTextureCoord;",//纹理坐标，
" varying vec2 vTextureCoord;",//传到着色器的纹理坐标
" uniform mat3 uUvTransform;",//纹理uv偏移，为了图集
"#endif",
//使用环境贴图或灯光
'#if defined( USE_ENVMAP ) || defined( USE_LIGHT )',
......@@ -410,7 +411,8 @@ const VERT = [
" #endif",
//纹理坐标
" #ifdef USE_MAP",
" vTextureCoord = aTextureCoord;",
// " vTextureCoord = aTextureCoord;",
" vTextureCoord = ( uUvTransform * vec3( aTextureCoord, 1 ) ).xy;",//转换下uv
" #endif",
//使用环境贴图或灯光
' #if defined( USE_ENVMAP ) || defined( USE_LIGHT )',
......
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