Skip to content

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

l

parent 4abf3278
Expand all Show whitespace changes
Inline Side-by-side
Showing with 1092 additions and 483 deletions
build/3D.zip 0 → 100644
View file @ 1d455127
File added
build/fyge.min.js
View file @ 1d455127
This diff is collapsed.
build/fyge.min.js.map
View file @ 1d455127
This diff is collapsed.
src/2d/display/Stage.ts
View file @ 1d455127
......@@ -273,7 +273,8 @@ export class Stage extends Container {
* @private
*/
onMouseEvent(e: any): void {
e.preventDefault();
//@ts-ignore
if (!my) e.preventDefault();
let s: Stage = this;
//检查mouse或touch事件是否有，如果有的话，就触发事件函数
if (EventDispatcher._totalMEC > 0) {
......
src/3D/D3Renderer.ts
View file @ 1d455127
......@@ -11,15 +11,8 @@ import { Matrix4 } from "./math/Matrix4";
import { BLEND_MODES } from "../2d/const";
import { BatchBuffer } from "../2d/renderers/webgl/BatchBuffer";
import { BaseMaterial, RenderSideType } from "./materials/BaseMaterial";
import { getCusShader } from "./shaders/getCusShader";
const ShaderMap: { [key: string]: GLShader } = {
}
const ShaderIds = {
BaseMaterial: "BaseShader",
LightMaterial: "LightShader",
}
//需要管理渲染的状态 resetToDefault resetTo3D
export class D3Renderer extends ObjectRenderer {
......@@ -51,33 +44,6 @@ export class D3Renderer extends ObjectRenderer {
//this.renderer.state.setFrontFace(0);
//设置剔除，下面根据材质自行设置
//this.setCullFace(1);
//初始化着色器
//基础材质的
if (!ShaderMap[ShaderIds.BaseMaterial]) {
ShaderMap[ShaderIds.BaseMaterial] = new BaseShader(this.renderer.gl);
}
//@ts-ignore 普通材质的
ShaderMap[ShaderIds.BaseMaterial].hasAddedCamera = false;
//天空盒材质的，暂时只能放整张图，后面如果加了textureCube再改
//灯光材质的
var pointLightNum = this.lightsConfig.pointLights.length;
var dirLightNum = this.lightsConfig.directionalLights.length;
this.curLightkey = ShaderIds.LightMaterial + pointLightNum + dirLightNum
if (!ShaderMap[this.curLightkey]) {
ShaderMap[this.curLightkey] = new LightShader(
this.renderer.gl,
this.lightsConfig.pointLights.length,
this.lightsConfig.directionalLights.length
);
}
//@ts-ignore//当前只有一种光照材质
ShaderMap[this.curLightkey].hasAddedLights = false;
//@ts-ignore//当前只有一种光照材质
ShaderMap[this.curLightkey].hasAddedCamera = false;
}
stop() {
this.flush();
......@@ -100,7 +66,7 @@ export class D3Renderer extends ObjectRenderer {
// this.meshes.push(obj);
// } else {
for (var i = 0; i < this.meshes.length; i++) {
if (this.meshes[i].material.instanceType == mat.instanceType) {
if (this.meshes[i].material == mat) {//没啥软用
this.meshes.splice(i, 0, obj)
return
}
......@@ -110,7 +76,7 @@ export class D3Renderer extends ObjectRenderer {
}
flush() {
//同一材质的模型一起处理，同一个着色器，webglRenderer里会判断，不会重复绑定
var curShader: GLShader;
var curShader: GLShader = null;
var pointLightNum = this.lightsConfig.pointLights.length;
var dirLightNum = this.lightsConfig.directionalLights.length;
var gl: WebGLRenderingContext = this.renderer.gl;
......@@ -118,22 +84,17 @@ export class D3Renderer extends ObjectRenderer {
let mesh = this.meshes[i];//怎么判断是否要重新绑定
let mat: BaseMaterial = mesh.material;
let geo = mesh.geometry;
curShader = ShaderMap[ShaderIds[mat.instanceType]] || ShaderMap[this.curLightkey];
//绑定着色器
let shader = getCusShader(this.renderer, mat, this.lightsConfig);
if (curShader !== shader) {//同一着色器只需要传一次相机参数和光照参数（因为都是场景全局）
curShader = shader;
//先绑定着色器，project不设置
this.renderer.bindShader(curShader, false);
//找纹理，绑定纹理，多个纹理也是一样的方法
var location: number = this.renderer.textureManager.bindTexture(mat.map, undefined, false);
//传入uniform
curShader.uniforms["uMap"] = location;
//uniform参数修改，好像目前就几个，且固定的，以后得仿three建数组
curShader.uniforms["uMatColor"] = mat.colorArr;
curShader.uniforms["uMatAlpha"] = mat.alpha;
//这个估计最好只传一次，后续所有uniform都传一次，存一下
//光照参数
//@ts-ignore
if (mat._lightAffect && !curShader.hasAddedLights) {
//@ts-ignore
curShader.hasAddedLights = true
//相机
curShader.uniforms["uViewMatrix"] = this.camera.worldMatrixInverse.toArray();;
curShader.uniforms["uProjectionMatrix"] = this.camera.projectionMatrix.toArray();
//光照
if (mat._lightAffect) {
//只能给当前绑定的shader传值，否则location不存在
for (var j = 0; j < pointLightNum; j++) {
let key = "pointLights[" + j + "]";
......@@ -149,13 +110,15 @@ export class D3Renderer extends ObjectRenderer {
}
curShader.uniforms.uAmbientLightColor = this.lightsConfig.ambientLightColor;
}
//@ts-ignore
if (!curShader.hasAddedCamera) {
//@ts-ignore
curShader.hasAddedCamera = true;
curShader.uniforms["uViewMatrix"] = this.camera.worldMatrixInverse.toArray();;
curShader.uniforms["uProjectionMatrix"] = this.camera.projectionMatrix.toArray();
}
//找纹理，绑定纹理，多个纹理也是一样的方法
var location: number = this.renderer.textureManager.bindTexture(mat.map, undefined, false);
//传入uniform
curShader.uniforms["uMap"] = location;
//uniform参数修改，好像目前就几个，且固定的，以后得仿three建数组
curShader.uniforms["uMatColor"] = mat.colorArr;
curShader.uniforms["uMatAlpha"] = mat.alpha;
//mesh的模型矩阵
curShader.uniforms["uModelMatrix"] = mesh._worldMatrix.toArray();
//法线矩阵
......@@ -195,10 +158,13 @@ export class D3Renderer extends ObjectRenderer {
//uv
float32View[count++] = geo._uvs[j * 2];
float32View[count++] = geo._uvs[j * 2 + 1];
//法线
//法线,可能不需要法线的情况，也加上先
float32View[count++] = geo._normals[j * 3];
float32View[count++] = geo._normals[j * 3 + 1];
float32View[count++] = geo._normals[j * 3 + 2];
//如果存在mo
if (1) { }
}
}
//@ts-ignore
......@@ -229,7 +195,7 @@ export class D3Renderer extends ObjectRenderer {
if (geo._indices) glVaoBuffer.indexBuffer.upload(geo._indices, 0, false)
} else {
this.renderer.bindVao(vao);
//不修改，估计都不要变
//不修改，估计都不要变，需要修改时候
// glVaoBuffer.attrBuffer.upload(glVaoBuffer._attrBuffer.vertices, 0, true)
// glVaoBuffer.indexBuffer.upload(glVaoBuffer._indexBuffer, 0, true)
}
......@@ -260,3 +226,53 @@ interface renderObjInt {
}
WebglRenderer.registerPlugin('d3', D3Renderer);
// class FreeScroll extends FYGE.Container {
// viewWidth;
// viewHeight;
// maxWidth;
// maxHeight;
// view
// bg
// constructor(viewWidth, viewHeight, maxWidth, maxHeight) {
// super()
// this.viewWidth = viewWidth
// this.viewHeight = viewHeight
// this.maxWidth = maxWidth
// this.maxHeight = maxHeight
// //鼠标事件捕捉用
// this.bg = this.addChild(new FYGE.Graphics())
// .beginFill(0x000000)
// .drawRect(0, 0, viewWidth, viewHeight)
// .endFill()
// this.alpha = 0;
// //内容视图
// this.view = this.addChild(new FYGE.Container());
// //x范围viewWidth-maxWidth到0，y范围viewHeight-maxHeight到0
// this.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, (e: FYGE.MouseEvent) => {
// let offset = [e.stageX - this.view.x, e.stageY - this.view.y];
// //加移动事件
// this.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, move, this)
// this.addEventListener(FYGE.MouseEvent.MOUSE_UP, up, this)
// this.addEventListener(FYGE.MouseEvent.MOUSE_OUT, up, this)
// //移动
// function move(me: FYGE.MouseEvent) {
// //赋值x
// this.view.x = me.stageX - offset[0];
// this.view.y = me.stageY - offset[1];
// //x有限制
// if (this.view.x < this.viewWidth - this.maxWidth) this.view.x = this.viewWidth - this.maxWidth;
// if (this.view.x > 0) this.view.x = 0;
// //y限制
// if (this.view.y < this.viewHeight - this.maxHeight) this.view.y = this.viewHeight - this.maxHeight;
// if (this.view.y > 0) this.view.y = 0;
// }
// function up() {
// this.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, move, this);
// this.removeEventListener(FYGE.MouseEvent.MOUSE_UP, up, this);
// this.removeEventListener(FYGE.MouseEvent.MOUSE_OUT, up, this);
// }
// }, this)
// }
// }
\ No newline at end of file
src/3D/GLTFLoader.ts
View file @ 1d455127
This diff is collapsed.
src/3D/materials/BaseMaterial.ts
View file @ 1d455127
......@@ -51,7 +51,15 @@ export class BaseMaterial extends HashObject {
/**
* 纹理贴图，默认白图
*/
map: Texture = Texture.WHITE;
private _map: Texture = Texture.WHITE;
get map() {
return this._map
}
set map(value: Texture) {
this._map = value || Texture.WHITE;
}
morphTargets: boolean = false;
morphNormals: boolean = false;
/**
* 是否用线框形式绘制
*/
......@@ -62,7 +70,7 @@ export class BaseMaterial extends HashObject {
* 是否光照影响
*/
_lightAffect: boolean = false;
constructor(parameters?) {
constructor(parameters?: BaseMaterialParamsInt) {
super();
this._instanceType = "BaseMaterial";
......
src/3D/shaders/getCusShader.ts 0 → 100644
View file @ 1d455127
This diff is collapsed.
src/3D/shaders/index.ts
View file @ 1d455127
export * from "./BaseShader"
export * from "./LightShader"
// export * from "./BaseShader"
// export * from "./LightShader"
// export * from "./SkyboxShader"
\ No newline at end of file
test/test copy.html 0 → 100644
View file @ 1d455127
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport"
content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
<!-- 小程序分享得用这个 -->
<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> -->
<!-- 易盾js -->
<!-- <script type="text/javascript" src="//cstaticdun.126.net/load.min.js"></script> -->
<!-- <script src="libs/zepto.min.js"></script> -->
<!-- <script src="libs/p2.js"></script> -->
<script src="../build/fyge.min.js"></script>
<script src="./js/res.js"></script>
<script src="./js/egg_break.js"></script>
<script src="./js/egg_loop.js"></script>
<script src="./js/cloud_back.js"></script>
<script src="./js/cloud_front.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
background-color: #eeeeee;
}
</style>
</head>
<body>
<div id="cusEngine" style="line-height:0;font-size:0">
<canvas id="canvas" style="width: 100%;height: 100%"></canvas>
</div>
<!-- 帧率检测 -->
<!-- <script src="js/stats.js"></script> -->
</body>
<script>
window.addEventListener("load", async function () {
//获取canvas
var canvas = document.getElementById("canvas");
canvas.width = document.body.clientWidth * (window.devicePixelRatio || 1)
canvas.height = document.body.clientHeight * (window.devicePixelRatio || 1)
var stage = new FYGE.Stage(
canvas,
750,//设计宽度，按设计搞给的就行
1624,//设计高度
document.body.clientWidth,
document.body.clientHeight,
FYGE.RENDERER_TYPE.WEBGL
);
//鼠标事件
var mouseEvent = stage.onMouseEvent.bind(stage);
canvas.addEventListener("touchstart", mouseEvent, false);
canvas.addEventListener('touchmove', mouseEvent, false);
canvas.addEventListener('touchend', mouseEvent, false);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//添加个背景
// var a = stage.addChild(new FYGE.Graphics())
// .beginFill(0x000000, 0.7)
// .drawRect(0, 0, 750, 1624)
// .endFill()
var textureSky = await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => {
r(FYGE.Texture.fromImage(image))
}, "./res/asd.png")
})
//lottie的图片资源
await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => {
//会进TextureCache，res在res.js里面，图集数据
FYGE.createTextureSheet(new FYGE.BaseTexture(image), res)
r()
}, "./res/res.png")
})
//几个2d动画
var a = stage.addChild(new FYGE.Lottie(cloud_back))
a.play();
//加个lottie
var b = stage.addChild(new FYGE.Lottie(egg_break))
b.play(1, () => {
var s = stage.addChild(new FYGE.Sprite(textureSky))
s.anchorTexture.set(0.5, 0.5)
s.position.set(375, 800)
s.scale.set(0.1,0.1)
FYGE.Tween.get(s)
.to({scaleX:5,scaleY:5},500)
.call(()=>{
stage.removeChild(s)
})
});
// var b = stage.addChild(new FYGE.Lottie(egg_loop))
// b.play();
//上层2d的动画
var b = stage.addChild(new FYGE.Lottie(cloud_front))
b.mouseEnable = false;
b.mouseChildren = false;
b.y = 200
b.play()
}, this);
//循环
loop();
function loop() {
if (!window.paused) {
stage.flush();
}
FYGE.Tween.flush()
FYGE.getRequestAnimationFrame()(loop);
}
})
</script>
</html>
\ No newline at end of file
test/test.html
View file @ 1d455127
......@@ -91,6 +91,8 @@
canvas.addEventListener('touchend', mouseEvent, false);
//stage初始化
stage.addEventListener(FYGE.Event.INIT_STAGE, async () => {
//添加个背景
// var a = stage.addChild(new FYGE.Graphics())
// .beginFill(0x000000, 0.7)
......@@ -108,6 +110,11 @@
r(FYGE.Texture.fromImage(image))
}, "./res/aa.jpg")
})
// var sss = stage.addChild(new FreeScroll(750, 1624, 2000, 3000))
// var content = sss.view.addChild(new FYGE.Sprite(textureSky))
// content.scaleY = 3
// sss.scrollTo(200, 200)
// return
//lottie的图片资源
await new Promise((r) => {
FYGE.GlobalLoader.loadImage((s, image) => {
......@@ -119,9 +126,11 @@
//几个2d动画
var a = stage.addChild(new FYGE.Lottie(cloud_back))
a.play();
a.mouseEnable = a.mouseChildren = false
//加个lottie
var b = stage.addChild(new FYGE.Lottie(egg_break))
b.play();
b.mouseEnable = a.mouseChildren = false
// var b = stage.addChild(new FYGE.Lottie(egg_loop))
// b.play();
......@@ -161,7 +170,7 @@
.to({ y: 450 }, 500000 * 3)
// m.visible = false;
m.position.y = 0
m.addEventListener(FYGE.MouseEvent.CLICK,()=>{console.log(123123)},this)
m.addEventListener(FYGE.MouseEvent.CLICK, () => { console.log(123123) }, this)
//不带光找的材质
var mat1 = new FYGE.BaseMaterial();
......@@ -210,7 +219,7 @@
mat2.side = 1//从里往外看，可见材质面取顺时针，
mat2.map = textureSky;
var m = scene.addChildAt(new FYGE.Mesh3D(geos, mat2), 0)
m.mouseEnable=false
m.mouseEnable = false
// m.position.set(0, 2, 0)
// m.scale.set(1, 1, 1)
......@@ -241,9 +250,9 @@
a.position.copy(l.position)
a.scale.set(0.1, 0.1, 0.1)
a.addEventListener(FYGE.MouseEvent.MOUSE_DOWN,()=>{
a.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, () => {
console.log(654564)
},this)
}, this)
}
}, this);
......@@ -258,6 +267,57 @@
FYGE.getRequestAnimationFrame()(loop);
}
})
class FreeScroll extends FYGE.Container {
constructor(viewWidth, viewHeight, maxWidth, maxHeight) {
super()
this.viewWidth = viewWidth
this.viewHeight = viewHeight
this.maxWidth = maxWidth
this.maxHeight = maxHeight
//鼠标事件捕捉用
this.bg = this.addChild(new FYGE.Graphics())
.beginFill(0x000000)
.drawRect(0, 0, viewWidth, viewHeight)
.endFill()
this.bg.alpha = 0;
//内容视图,滚动内容都加入这里
this.view = this.addChild(new FYGE.Container());
//x范围viewWidth-maxWidth到0，y范围viewHeight-maxHeight到0
this.addEventListener(FYGE.MouseEvent.MOUSE_DOWN, (e) => {
let offset = [e.stageX - this.view.x, e.stageY - this.view.y];
//加移动事件
this.addEventListener(FYGE.MouseEvent.MOUSE_MOVE, move, this)
this.addEventListener(FYGE.MouseEvent.MOUSE_UP, up, this)
this.addEventListener(FYGE.MouseEvent.MOUSE_OUT, up, this)
//移动
function move(me) {
//赋值
this.view.position.set(me.stageX - offset[0], me.stageY - offset[1])
//x有限制
if (this.view.x < this.viewWidth - this.maxWidth) this.view.x = this.viewWidth - this.maxWidth;
if (this.view.x > 0) this.view.x = 0;
//y限制
if (this.view.y < this.viewHeight - this.maxHeight) this.view.y = this.viewHeight - this.maxHeight;
if (this.view.y > 0) this.view.y = 0;
}
function up() {
this.removeEventListener(FYGE.MouseEvent.MOUSE_MOVE, move, this);
this.removeEventListener(FYGE.MouseEvent.MOUSE_UP, up, this);
this.removeEventListener(FYGE.MouseEvent.MOUSE_OUT, up, this);
}
}, this)
}
scrollTo(x, y) {
this.view.position.set(-x, -y);
if (this.view.x < this.viewWidth - this.maxWidth) this.view.x = this.viewWidth - this.maxWidth;
if (this.view.x > 0) this.view.x = 0;
//y限制
if (this.view.y < this.viewHeight - this.maxHeight) this.view.y = this.viewHeight - this.maxHeight;
if (this.view.y > 0) this.view.y = 0;
}
}
</script>
</html>
\ No newline at end of file
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