Skip to content

Commit

Permalink
Merge pull request #624 from lirongf/master
Browse files Browse the repository at this point in the history 
合并提交点选方案
  • Loading branch information
@lirongf
lirongf committed Apr 2, 2021
2 parents 1c548e5 + b85c2bc commit a5183a6
Show file tree
Hide file tree
Showing 12 changed files with 1,902 additions and 0 deletions.
99 changes: 99 additions & 0 deletions src/samples/3d/LayaAirIDE/EditorComponent/GridLine.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { Camera, CameraEventFlags } from "laya/d3/core/Camera";
import { RenderState } from "laya/d3/core/material/RenderState";
import { PixelLineMaterial } from "laya/d3/core/pixelLine/PixelLineMaterial";
import { PixelLineSprite3D } from "laya/d3/core/pixelLine/PixelLineSprite3D";
import { CommandBuffer } from "laya/d3/core/render/command/CommandBuffer";
import { Color } from "laya/d3/math/Color";
import { Vector3 } from "laya/d3/math/Vector3";
import { GridMaterial } from "../EditorMaterial/GridMaterial";


export class GridLine {

private gridLineCommand: CommandBuffer;
private axisLineCommand: CommandBuffer;

constructor(editorCamera: Camera) {

let gridLineCommand: CommandBuffer = this.gridLineCommand = new CommandBuffer();
let axisLineCommand: CommandBuffer = this.axisLineCommand = new CommandBuffer();

// todo Command buffer rendertexture bug
editorCamera.addCommandBuffer(CameraEventFlags.BeforeImageEffect, gridLineCommand);
editorCamera.addCommandBuffer(CameraEventFlags.BeforeSkyBox, axisLineCommand);

GridMaterial.__init__();

this._buildAxis(axisLineCommand);
this._buildGridLine(gridLineCommand);
}

private _buildAxis(axisLineCommand: CommandBuffer) {

let xnum = 200;
let ynum = 200;
let gridw = 10;
let minx = -xnum * gridw;
let miny = -ynum * gridw;
let maxx = xnum * gridw;
let maxy = ynum * gridw;

let xcolor = new Color(1, 0.5, 0.5, 1.0);
let ycolor = new Color(0.3, 0.8, 0, 0.5);
let zcolor = new Color(0, 0.5, 1, 1.0);

let axisXZLine: PixelLineSprite3D = new PixelLineSprite3D(2);
axisXZLine.addLine(new Vector3(minx, 0, 0), new Vector3(maxx, 0, 0), xcolor, xcolor);
axisXZLine.addLine(new Vector3(0, 0, minx), new Vector3(0, 0, maxx), zcolor, zcolor);

let lineXZMaterial: GridMaterial = new GridMaterial();
lineXZMaterial.step = 100;
axisLineCommand.drawRender(axisXZLine.pixelLineRenderer, lineXZMaterial, 0);

/*
let axisYLine: PixelLineSprite3D = new PixelLineSprite3D(1);
axisYLine.addLine(new Vector3(0, 0, 0), new Vector3(0, maxy, 0), ycolor, ycolor);
let lineYMaterial: PixelLineMaterial = new PixelLineMaterial();
axisLineCommand.drawRender(axisYLine.pixelLineRenderer, lineYMaterial, 0);
*/
}

private _buildGridLine(gridLineCommand: CommandBuffer) {
let gridLineCount = 10000;

let gridLine1: PixelLineSprite3D = new PixelLineSprite3D(gridLineCount);
this.addGridLine(gridLine1, 1000, 1);
let gridMaterial1: GridMaterial = new GridMaterial();
gridMaterial1.step = 1;

let gridLine10: PixelLineSprite3D = new PixelLineSprite3D(gridLineCount);
this.addGridLine(gridLine10, 1000, 10);
let gridMaterial10: GridMaterial = new GridMaterial();
gridMaterial10.step = 10;

let gridLine100: PixelLineSprite3D = new PixelLineSprite3D(gridLineCount);
this.addGridLine(gridLine100, 1000, 100);
let gridMaterial100: GridMaterial = new GridMaterial();
gridMaterial100.step = 100;

gridLineCommand.drawRender(gridLine1.pixelLineRenderer, gridMaterial1, 0);
gridLineCommand.drawRender(gridLine10.pixelLineRenderer, gridMaterial10, 0);
gridLineCommand.drawRender(gridLine100.pixelLineRenderer, gridMaterial100, 0);
}

private addGridLine(line: PixelLineSprite3D, area: number, step: number, color: Color = new Color(0.3, 0.3, 0.3, 1.0)) {
let lineColor: Color = color;
for (let index = -area + step; index < area; index += step) {
if (index != 0) {
var l1: Vector3 = new Vector3(index, 0, -area);
var l2: Vector3 = new Vector3(index, 0, area);
var l3: Vector3 = new Vector3(-area, 0, index);
var l4: Vector3 = new Vector3(area, 0, index);
line.addLine(l1, l2, lineColor, lineColor);
line.addLine(l3, l4, lineColor, lineColor);
}

}
}
}
85 changes: 85 additions & 0 deletions src/samples/3d/LayaAirIDE/EditorMaterial/GridMaterial.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Material } from "laya/d3/core/material/Material";
import { VertexMesh } from "laya/d3/graphics/Vertex/VertexMesh";
import { Shader3D } from "laya/d3/shader/Shader3D";
import { SubShader } from "laya/d3/shader/SubShader";

import GridLineVS from "../EditorShader/GridLine.vs";
import GridLineFS from "../EditorShader/GridLine.fs";

import { ShaderPass } from "laya/d3/shader/ShaderPass";
import { RenderState } from "laya/d3/core/material/RenderState";
import { Vector4 } from "laya/d3/math/Vector4";

export class GridMaterial extends Material {

static COLOR: number = Shader3D.propertyNameToID("u_Color");
static STEP: number = Shader3D.propertyNameToID("u_Step");

static __init__(): void {
var attributeMap: any = {
'a_Position': VertexMesh.MESH_POSITION0,
'a_Color': VertexMesh.MESH_COLOR0
};

var uniformMap: any = {
'u_MvpMatrix': Shader3D.PERIOD_SPRITE,

'u_View': Shader3D.PERIOD_CAMERA,
'u_CameraPos': Shader3D.PERIOD_CAMERA,

'u_Color': Shader3D.PERIOD_MATERIAL,
'u_Step': Shader3D.PERIOD_MATERIAL // todo 位置
};

var shader: Shader3D = Shader3D.add("_GridShader", attributeMap, uniformMap, false, false);
var subShader: SubShader = new SubShader(attributeMap, uniformMap);
shader.addSubShader(subShader);
var shaderPass: ShaderPass = subShader.addShaderPass(GridLineVS, GridLineFS);

shaderPass.renderState.depthWrite = false;
shaderPass.renderState.blend = RenderState.BLEND_ENABLE_ALL;
shaderPass.renderState.srcBlend = RenderState.BLENDPARAM_SRC_ALPHA;
shaderPass.renderState.dstBlend = RenderState.BLENDPARAM_ONE_MINUS_SRC_ALPHA;
shaderPass.renderState.depthTest = RenderState.DEPTHTEST_LESS;
}

/**
* 获取颜色。
* @return 颜色。
*/
get color(): Vector4 {
return (<Vector4>this._shaderValues.getVector(GridMaterial.COLOR));
}

/**
* 设置颜色。
* @param value 颜色。
*/
set color(value: Vector4) {
this._shaderValues.setVector(GridMaterial.COLOR, value);
}

/**
*
*/
set step(value: number) {
this._shaderValues.setNumber(GridMaterial.STEP, value);
}

get step(): number {
return this._shaderValues.getNumber(GridMaterial.STEP);
}

constructor() {
super();
this.setShaderName("_GridShader");
this._shaderValues.setNumber(GridMaterial.STEP, 10);
this._shaderValues.setVector(GridMaterial.COLOR, new Vector4(1.0, 1.0, 1.0, 1.0));
}

clone(): any {
var dest: GridMaterial = new GridMaterial();
this.cloneTo(dest);
return dest;
}
}
167 changes: 167 additions & 0 deletions src/samples/3d/LayaAirIDE/EditorSceneManager/Show3DCoordScene.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
import { Laya } from "Laya";
import { Camera } from "laya/d3/core/Camera";
import { UnlitMaterial } from "laya/d3/core/material/UnlitMaterial";
import { MeshSprite3D } from "laya/d3/core/MeshSprite3D";
import { Scene3D } from "laya/d3/core/scene/Scene3D";
import { Vector3 } from "laya/d3/math/Vector3";
import { Event } from "laya/events/Event";
import { RenderTexture } from "laya/d3/resource/RenderTexture";
import { RenderTextureDepthFormat, RenderTextureFormat } from "laya/resource/RenderTextureFormat";
import { Texture } from "laya/resource/Texture";
import { Box } from "laya/ui/Box";
import { Image } from "laya/ui/Image";
import { Handler } from "laya/utils/Handler";
import { CameraControlScript, IDE_RotateDirectFlags } from "../EditorComponent/CameraControlScript";
import { BillboardMaterial } from "../EditorMaterial/BillboardMaterial";
import { Vector4 } from "laya/d3/math/Vector4";
import { EditPickUtil } from "../MouseInteraction/EditPickUtil";
import { Script3D } from "laya/d3/component/Script3D";
import { Sprite } from "laya/display/Sprite";

/**
* miner 用来显示旋转小场景
*/
export class Show3DCoordScene extends Script3D{
static CoordImageSize:number = 100;
static pickRect:number =5;
static CheckColorFZ:Vector4 = new Vector4(44,144,255,255);
static CheckColorZZ:Vector4 = new Vector4(40,144,255,255);
static CheckColorFX:Vector4 = new Vector4(247,52,100,255);
static CheckColorZX:Vector4 = new Vector4(247,52,81,255);
static CheckColorFY:Vector4 = new Vector4(135,212,2,255);
static CheckColorZY:Vector4 = new Vector4(135,212,3,255);

pickColorArray:Uint8Array = new Uint8Array((Show3DCoordScene.pickRect*2+1)*(Show3DCoordScene.pickRect*2+1)*4);
//小坐标场景
coord3DScene:Scene3D;
//图标相机
tubiaoCamera:Camera;
//图标相机贴图
tubiaoTarget:RenderTexture;
//图标Image
showImage:Image;
//主场景相机控制器
cameraControl:CameraControlScript;
//主场景panel
parent:Sprite;
//@private
private _tempVec:Vector3 = new Vector3();

constructor(){
super();
}

init(cameraControl:CameraControlScript,parent:Sprite){
//
this.cameraControl = cameraControl;
this.parent = parent;
//开启鼠标点击事件
Laya.stage.on(Event.MOUSE_DOWN,this,this.mouseDown);

Scene3D.load("res/3DEditorResource/LayaScene_tubiao/Conventional/tubiao.ls",Handler.create(this,function(scene:Scene3D):void{
Laya.stage.addChild(scene);
this.Coord3DScene = scene;
var camera = (<Camera>scene.getChildByName("Main Camera"));
camera.clearColor = new Vector4(0.0,0.0,0.0,0.0);
camera.viewport.width=Show3DCoordScene.CoordImageSize;
camera.viewport.height = Show3DCoordScene.CoordImageSize;
camera.orthographic = true;
camera.orthographicVerticalSize = 8;
this.tubiaoCamera = camera;
camera.enableHDR = false;
this.tubiaoTarget = camera.renderTarget = RenderTexture.createFromPool(Show3DCoordScene.CoordImageSize,Show3DCoordScene.CoordImageSize,RenderTextureFormat.R8G8B8A8,RenderTextureDepthFormat.DEPTH_16);
var tubiaoSprite = scene.getChildByName("tubiao");
//切换图标材质
for(let i = 0;i<6;i++){
var currentMat:UnlitMaterial;
var transMat:BillboardMaterial;
currentMat = <UnlitMaterial>(tubiaoSprite.getChildAt(i) as MeshSprite3D).meshRenderer.sharedMaterial;
transMat = new BillboardMaterial();
transMat.renderMode = BillboardMaterial.RENDERMODE_TRANSPARENT;
transMat.alphaTestValue = 0.5;
transMat.albedoTexture = currentMat.albedoTexture;
(tubiaoSprite.getChildAt(i) as MeshSprite3D).meshRenderer.sharedMaterial = transMat;
}
this.addImage();
}));
}



addImage(){
this.showImage = new Image();

this.showImage.source = new Texture(this.tubiaoTarget);
this.parent.addChild(this.showImage);
this.showImage.top = 10;
this.showImage.right = 10;
//Laya.timer.frameLoop(1,this,this.tongbuCameraDir);
}
onUpdate(){
this.tongbuCameraDir();
}
tongbuCameraDir(){
//@ts-ignore
if(this.tubiaoCamera)
//@ts-ignore
CameraControlScript.calByIcoXYZ(Vector3._ZERO,this._tempVec,10,this.cameraControl.currentRotate,this.tubiaoCamera);

}


mouseDown(e:Event){
var x = Laya.stage.mouseX;
var y = Laya.stage.mouseY;
if(x>this.showImage.x&&x<this.showImage.x+Show3DCoordScene.CoordImageSize){
if(y>this.showImage.y&&y<this.showImage.y+Show3DCoordScene.CoordImageSize){
console.log("pick Image");
EditPickUtil.pickRenderTextureColor(x-this.showImage.x,y-this.showImage.y,this.tubiaoTarget,this.pickColorArray,Show3DCoordScene.pickRect);
//拿出颜色来检测是否有合格的颜色值，再做相机动画
for(let i:number = 0,n=this.pickColorArray.length;i<n;i+=4){
switch(this.pickColorArray[i+1]){
case 144://z
if(this.pickColorArray[i]==44&&this.pickColorArray[i+2]==255){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Back);
return;
}
if(this.pickColorArray[i]==40&&this.pickColorArray[i+2]==255){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Front);
return;
}
break;
case 52://x
if(this.pickColorArray[i]==247&&this.pickColorArray[i+2]==100){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Left);
return;
}
if(this.pickColorArray[i]==247&&this.pickColorArray[i+2]==81){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Right);
return;
}
break;
case 212://y
if(this.pickColorArray[i]==135&&this.pickColorArray[i+2]==5){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Down);
return;
}
if(this.pickColorArray[i]==135&&this.pickColorArray[i+2]==3){
this.cameraControl.doRotateAnimator(IDE_RotateDirectFlags.Up);
return;
}
break;
default:
break;
}
}

}
}
}

destroy(){
this.showImage.destroy(true);
this.coord3DScene.destroy(true);
Laya.stage.off(Event.MOUSE_DOWN,this,this.mouseDown);

}
}
34 changes: 34 additions & 0 deletions src/samples/3d/LayaAirIDE/EditorShader/GridLine.fs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
#if defined(GL_FRAGMENT_PRECISION_HIGH)
precision highp float;
#else
precision mediump float;
#endif

#define SHADER_NAME gridlineFS

varying vec4 v_Color;
varying vec4 v_PositionWS;

uniform float u_Step;
uniform vec3 u_CameraPos;

void main()
{

gl_FragColor.xyz = v_Color.xyz;

float cameradepth = 1.0/gl_FragCoord.w;
float range = min(50.0 * u_Step, 1000.0);
float alphaDepth = clamp(cameradepth, 0.0, range);
float alpha = alphaDepth / range;

alpha = 1.0 - alpha * alpha;

vec3 viewRay = normalize(v_PositionWS.xyz - u_CameraPos);

float t = abs(dot(viewRay, vec3(0, 1, 0)));

gl_FragColor.a = alpha * t;

}

0 comments on commit a5183a6

Please sign in to comment.