增加UI库

package.json

@@ -24,6 +24,7 @@
     "echarts": "^4.0.0",
     "element-ui": "2.15.8",
     "jquery": "^3.6.0",
+    "mint-ui": "^2.2.13",
     "qiniu-js": "^2.4.0",
     "three": "^0.154.0",
     "vue": "^2.6.14",

src/components/newBottomCom/viewMask/viewMask.vue

@@ -3,6 +3,7 @@
 </template>
 <script>
 	const util = require('@/utils/util.js').default;
+	import { MessageBox } from 'mint-ui';
 	// const config = require('@/services/url$config.js');
 	import touchHandle from '@/mixins/touchHandle.js';
 	// import requestConfig from '@/static/lib/requestConfig';
@@ -828,7 +829,25 @@
 						if(!hasResult){//没有结果
 							self.stopInterval();//停止轮询
 							// self.$message.warning("AI开了个小差，请稍后再试");
-							self.dialogVisible = true;//弹出超时提示
+							// self.dialogVisible = true;//弹出超时提示
+							MessageBox.confirm('',{
+								title: '提示',
+								message: '当前AI使用火爆，请继续尝试?',
+								showCancelButton: true,
+								confirmButtonText:'继续尝试',
+								cancelButtonText:'取消等待',
+							}).then(action => {
+								console.warn("***MessageBox-action***",action)
+								if(action == 'confirm'){
+									self.confirmHandle(1);
+								}
+							}).catch(err=>{
+								console.warn("***MessageBox-err***",err)
+								if(err == 'cancel'){
+									self.cancelHandle();
+								}
+							});
+							// MessageBox.confirm('确定执行此操作?')
 						}
 					}
 					clearTimeout(self.outTimer);
@@ -921,9 +940,25 @@
 				console.warn("***single***",single.status,single.progress,this.count,single);
 				let self = this;
 				if(single.status=='starting'){//启动中的逻辑
-					if(this.count>=20){
+					if(this.count>=1){
 						this.stopInterval();//停止轮询
-						this.dialogAIVisible = true;
+						// this.dialogAIVisible = true;
+						MessageBox.confirm('',{
+							title: '提示',
+							message: 'AI开了小差，是否重新生成?',
+							showCancelButton: true,
+							confirmButtonText:'继续生成',
+							cancelButtonText:'放弃生成',
+						}).then(action => {
+							console.warn("***MessageBox-action***",action)
+							if(action == 'confirm'){
+								this.confirmHandle(0);
+							}
+						}).catch(err=>{
+							if(err == 'cancel'){
+								this.cancelHandle();
+							}
+						});
 					}else{
 						this.myloading = true;
 						this.loadingMsg = '启动中';

src/main.js

@@ -9,6 +9,8 @@ import $ from 'jquery'; //引入JQuery
 import axios from '@/services/request.js'; //重新定义axios,向里面添加一些参数
 import '@/services/requestConfig.js'; //导入请求的拦截器
 // import '@/utils/rem.js'; //rem单位的使用
+import Mint from 'mint-ui';
+import 'mint-ui/lib/style.css';
 
 import '@/assets/common.css'; //公共样式
 import "@/assets/font/iconfont.css"; //引用公共icon库
@@ -22,6 +24,7 @@ import 'amfe-flexible';	//自动设置font-size的基准值
 // import checkPermission from "@/utils/permission";
 
 Vue.use(ElementUI); //导入ele-ui
+Vue.use(Mint);
 Vue.component('mynavbar', mynavbar)
 // Vue.prototype.$popUp = popUpComponent;
 // Vue.prototype.$preview = previewComponent;

src/mixins/filter.js

@@ -0,0 +1,185 @@
+function initVideoScene(videoId, containerId, callback) {
+    var _self = this;
+    var videoObj = document.getElementById(videoId);
+    var canvasObj;
+    var movieObj;
+    
+    var renderer;
+    var camera;
+    var scene;
+
+    var playflag = false;
+    var filter = 0;
+
+    /**
+     * 执行
+     */
+    _self.run = function(){
+        videoObj.play();
+        playflag = true;
+    }
+
+    /**
+     * 暂停
+     */
+    _self.pause = function(){
+        videoObj.pause();
+        playflag = false;
+    }
+
+    /**
+     * 修改滤镜
+     * @param {Number} type 可选 0 - 6; 
+     */
+    _self.changefilter = function(type){
+        if(type >= 0 && type <= 6){
+            filter = type;
+            movieObj.movieMaterial.uniforms.filterType.value = type;
+            movieObj.movieMaterial.uniforms.texture.needsUpdate = true;
+        }
+    }
+
+    /**
+     * 修改明暗
+     * @param {Number} value 可选 0.1 - 0.7; 
+     */
+    _self.changefilterLight = function(value){
+        if(filter == 3 && value <= 0.7 && value >= 0.1){
+            movieObj.movieMaterial.uniforms.lightLevel.value = value;
+            movieObj.movieMaterial.uniforms.texture.needsUpdate = true;
+        }
+    }
+
+    /**
+     * 修改噪点数
+     * @param {Number} value 可选 0.2 - 1.5; 
+     */
+    _self.changefilterGrid = function(value){
+        if(filter == 6 && value <= 1.5 && value >= 0.2){
+            movieObj.movieMaterial.uniforms.gridSize.value = value;
+            movieObj.movieMaterial.uniforms.texture.needsUpdate = true;
+        }
+    }
+
+    /**
+     * 加载图片纹理
+     */
+    _self.loadTexture = function(imgs,callback){
+        var len = imgs.length;
+        var Textures = [];
+
+        for (var i = 0; i < len; i++) {
+            var loader = new THREE.TextureLoader();
+            loader.load(
+                imgs[i],
+                function ( texture ) {
+                    Textures.push(texture);
+                    if(Textures.length == len && callback){
+                        callback(Textures);
+                    }
+                }
+            );
+        }
+    }
+
+    /**
+     * 添加图片
+     */
+    _self.addImg = function(imgTexture,transparent){
+        var imgObj;
+        var imageGeometry;
+        var imageMaterial;
+        imageGeometry = new THREE.PlaneGeometry(4, 3);
+        imageMaterial =  new THREE.MeshBasicMaterial();
+        imageMaterial.map = imgTexture;
+        imageMaterial.transparent = transparent;
+        imgObj = new THREE.Mesh(imageGeometry, imageMaterial);
+        // imgObj.position.set(0, 0, 0);
+        // imgObj.scale.set(1, 1, 1);
+        // imgObj.visible = true;
+        scene.add(imgObj);
+
+        return imageMaterial;
+    }
+
+    /**
+     * 修改图片
+     */
+    _self.changeImg = function(Material,imgTexture){
+        Material.map = imgTexture;
+    }
+
+    /**
+     * 初始化
+     */
+    function _init(){
+        _senceInit();
+        _movieInit();
+        _animate();
+    }
+    _init();
+
+    /**
+     * 动画
+     */
+    function _animate() {
+        if ((videoObj.currentTime > 0) && movieObj.movie.visible == false) {
+            movieObj.movie.visible = true;
+        }
+        
+        renderer.render(scene, camera);
+
+        if(playflag && callback){
+            var img = canvasObj.toDataURL("image/png")
+            callback(videoObj.currentTime,img);
+        }
+
+        requestAnimationFrame(function(){
+            _animate();
+        });
+    }
+
+    /**
+     * 场景初始化
+     */
+    function _senceInit(){
+        scene = new THREE.Scene();
+        window.scene = scene;
+
+        camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);
+        camera.position.set(0, 0, 1);
+        scene.add(camera);
+
+        renderer = new THREE.WebGLRenderer({
+            antialias: true,
+            alpha: true
+        });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        canvasObj = renderer.domElement;
+        document.getElementById(containerId).appendChild(canvasObj);
+        renderer.setClearColor(0xffffff, 0);
+        renderer.setSize(videoObj.width, videoObj.height);
+    }
+
+    /**
+     * 视频初始化
+     */
+    function _movieInit(){
+        var movie;
+        var movieGeometry;
+        var movieMaterial;
+        movieMaterial = new ChromaKeyMaterial(videoId, videoObj.width, videoObj.height, 0x00ff05, 0);
+        movieGeometry = new THREE.PlaneGeometry(4, 3);
+        movieMaterial.side = THREE.DoubleSide;
+        movie = new THREE.Mesh(movieGeometry, movieMaterial);
+        movie.position.set(0, 0, 0);
+        movie.scale.set(1, 1, 1);
+        movie.visible = false;
+        scene.add(movie);
+        movieObj = {
+            movie:movie,
+            movieGeometry:movieGeometry,
+            movieMaterial:movieMaterial
+        }
+    }
+}

src/pages/webgl_rxdz_vr/webgl_rxdz_vr.vue

@@ -296,12 +296,12 @@
 			function videoHandle() {
 				// let video = document.getElementById('video');
 
-				// let texture = new THREE.VideoTexture(video);
+				// let texture = new THREE.pointTexture(video);
 				// texture.colorSpace = THREE.SRGBColorSpace;
 
 				// 创建视频元素
 				var video = document.createElement('video');
-				video.src = 'https://dm.static.elab-plus.com/miniProgram/green.mp4'; // 视频文件的路径
+				video.src = 'https://dm.static.elab-plus.com/miniProgram/001.mp4'; // 视频文件的路径
 				// video.crossOrigin = "anonymous";this.crossOrigin = 'anonymous';
 				video.setAttribute("crossOrigin", "Anonymous");
 				video.loop = true;
@@ -328,6 +328,138 @@
 							vUv = uv;      
 							gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);    
 						}  `,
+					// fragmentShader: `
+					// 	uniform sampler2D pointTexture;
+					// 		uniform float threshold;
+					// 		varying vec2 vUv;
+					// 		void main() {
+					// 			vec4 color = texture2D(pointTexture, vUv);
+					// 			float greenScreen = color.g - max(color.r, color.b);
+					// 			float alpha = 1.0 - smoothstep(threshold - 0.05, threshold + 0.05, greenScreen);
+					// 			gl_FragColor = vec4(color.rgb, alpha);
+					// 		}
+					// `,
+					// fragmentShader: `
+					// 	precision mediump float;
+					// 	uniform sampler2D pointTexture;
+					// 	uniform sampler2D colorlut;
+					// 	uniform vec3 color;
+					// 	uniform float videowidth;
+					// 	uniform float videoheight;
+					// 	uniform int filterType;
+					// 	uniform float gridSize;
+					// 	uniform float lightLevel;
+						
+					// 	varying vec2 vUv;
+					// 	float alter=3.0;
+					// 	float u_mode=0.0;
+					// 	float u_threshold=1.0;
+					// 	float u_clipBlack=0.5;
+					// 	float u_clipWhite=1.0;
+						
+					// 	float rgb2cb(float r, float g, float b){
+					// 		return 0.5 + -0.168736*r - 0.331264*g + 0.5*b;
+					// 	}
+					// 	float rgb2cr(float r, float g, float b){
+					// 		return 0.5 + 0.5*r - 0.418688*g - 0.081312*b;
+					// 	}
+					// 	float smoothclip(float low, float high, float x){
+					// 		if (x <= low){
+					// 			return 0.0;
+					// 		}
+					// 		if(x >= high){
+					// 			return 1.0;
+					// 		}
+					// 		return (x-low)/(high-low);
+					// 	}
+					// 	vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite){
+					// 		float cb = rgb2cb(colora.r,colora.g,colora.b);
+					// 		float cr = rgb2cr(colora.r,colora.g,colora.b);
+					// 		float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key));
+					// 		alpha = smoothclip(tola, tolb, alpha);
+					// 		float r = max(gl_FragColor.r - (1.0-alpha)*color.r, 0.0);
+					// 		float g = max(gl_FragColor.g - (1.0-alpha)*color.g, 0.0);
+					// 		float b = max(gl_FragColor.b - (1.0-alpha)*color.b, 0.0);
+					// 		if(alpha < clipBlack){
+					// 			alpha = r = g = b = 0.0;
+					// 		}
+					// 		if(alpha > clipWhite){
+					// 			alpha = 1.0;
+					// 		}
+					// 		if(clipWhite < 1.0){
+					// 			alpha = alpha/max(clipWhite, 0.9);
+					// 		}
+					// 		return vec4(r,g,b, alpha);
+					// 	}
+						
+					// 	void main()
+					// 	{
+					// 		gl_FragColor = texture2D( pointTexture, vUv );
+					// 		float tola = 0.0;
+					// 		float tolb = u_threshold/2.0;
+					// 		float cb_key = rgb2cb(color.r, color.g, color.b);
+					// 		float cr_key = rgb2cr(color.r, color.g, color.b);
+					// 		gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
+					// 		if(u_mode > 0.5 && u_mode < 1.5){
+					// 				gl_FragColor = mix(vec4(1.0, 1.0, 1.0, 1.0), gl_FragColor, gl_FragColor.a);
+					// 				gl_FragColor.a = 1.0;
+					// 		}
+					// 		if(u_mode > 1.5 && u_mode < 2.5){
+					// 				gl_FragColor = vec4(gl_FragColor.a, gl_FragColor.a, gl_FragColor.a, 1.0);
+					// 		}
+					// 		if(filterType==1){
+					// 			float gray = 0.2989*gl_FragColor.r+0.5870*gl_FragColor.g+0.1140*gl_FragColor.b;
+					// 			gl_FragColor = vec4(gray,gray,gray , gl_FragColor.a);
+					// 		}else if(filterType==2){
+					// 			vec3 tColor2 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]) ).rgb;
+					// 			vec3 tColor3 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]) ).rgb;
+					// 			vec3 tColor4 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor5 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor6 = texture2D( pointTexture, vec2(vUv[0]+(1.0/videowidth) , vUv[1]-(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor7 = texture2D( pointTexture, vec2(vUv[0]-(1.0/videowidth) , vUv[1]+(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor8 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor9 = texture2D( pointTexture, vec2(vUv[0] , vUv[1]+(1.0/videoheight)) ).rgb;
+					// 			vec3 tColor10 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+					// 			vec3 tColor11 = texture2D( pointTexture, vec2(vUv[0]+(2.0/videowidth) , vUv[1]) ).rgb;
+					// 			gl_FragColor = vec4( (gl_FragColor.r+tColor2[0]+tColor3[0]+tColor4[0]+tColor5[0]+tColor6[0]+tColor7[0]+tColor8[0]+tColor9[0]+tColor10[0]+tColor11[0])/11.0,
+					// 			(gl_FragColor.g+tColor2[1]+tColor3[1]+tColor4[1]+tColor5[1]+tColor6[1]+tColor7[1]+tColor8[1]+tColor9[1]+tColor10[1]+tColor11[1])/11.0,
+					// 			(gl_FragColor.b+tColor2[2]+tColor3[2]+tColor4[2]+tColor5[2]+tColor6[2]+tColor7[2]+tColor8[2]+tColor9[2]+tColor10[2]+tColor11[2])/11.0,
+					// 			gl_FragColor.a);
+					// 		}else if(filterType==3){
+					// 			float brightr=gl_FragColor.r+lightLevel;
+					// 			float brightg=gl_FragColor.g+lightLevel;
+					// 			float brightb=gl_FragColor.b+lightLevel;
+					// 			gl_FragColor = vec4(brightr,brightg,brightb , gl_FragColor.a);
+					// 		}else if(filterType==4){
+					// 			float reverser=1.0 - gl_FragColor.r;
+					// 			float reverseg=1.0 - gl_FragColor.g;
+					// 			float reverseb=1.0 - gl_FragColor.b;
+					// 			gl_FragColor = vec4(reverser,reverseg,reverseb,gl_FragColor.a);
+					// 		}else if(filterType==5){
+								
+					// 			float dx = fract(sin(dot(vUv ,vec2(12.9898,78.233))) * 43758.5453);
+					// 			vec3 cResult = gl_FragColor.rgb + gl_FragColor.rgb * clamp( 0.1 + dx, 0.0, 1.0 );
+					// 			vec2 sc = vec2( sin( vUv.y * 4096.0 ), cos( vUv.y * 4096.0 ) );
+					// 			cResult += gl_FragColor.rgb * vec3( sc.x, sc.y, sc.x ) * 0.025;
+					// 			cResult = gl_FragColor.rgb + clamp( 0.35, 0.0,1.0 ) * ( cResult - gl_FragColor.rgb );
+					// 			if( false ) {
+					// 				cResult = vec3( cResult.r * 0.3 + cResult.g * 0.59 + cResult.b * 0.11 );
+					// 			}
+					// 			float oldr=0.393*cResult[0]+0.769*cResult[1]+0.189*cResult[2];
+					// 			float oldg=0.349*cResult[0]+0.686*cResult[1]+0.168*cResult[2];
+					// 			float oldb=0.272*cResult[0]+0.534*cResult[1]+0.131*cResult[2];
+					// 			gl_FragColor =  vec4( oldr,oldg,oldb , gl_FragColor.a);
+					// 		}else if(filterType==6){
+					// 			float average = ( gl_FragColor.r + gl_FragColor.g + gl_FragColor.b ) / 2.0;
+					// 			float s = sin( 0.5 ), c = cos( 0.5 );
+					// 			vec2 tex = vUv * vec2(videowidth,videoheight) - vec2(0,0);
+					// 			vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * gridSize;
+					// 			float pattern =  ( sin( point.x ) * sin( point.y ) ) * 4.0;
+					// 			float seed = average * 10.0 - 5.0 + pattern ;
+					// 			gl_FragColor = vec4(  seed*0.3+gl_FragColor.r*0.7,seed*0.3+gl_FragColor.g*0.7 ,seed*0.3+gl_FragColor.b*0.7, gl_FragColor.a );
+					// 		}
+					// 	}
+					// `,
 					fragmentShader: `
 						uniform sampler2D pointTexture;
 						varying vec2 vUv;
@@ -342,43 +474,43 @@
 						}
 					`,
 
-					// 		fragmentShader: `    
-					// 			uniform sampler2D pointTexture;
-					// 			uniform vec3 backColor;
-					// 			varying vec2 vUv;
-					// 			uniform float u_threshold;
-					// 			float u_clipBlack = 0.2;
-					// 			float u_clipWhite = 4.0;
-
-					// 			float rgb2cb(float r, float g, float b){ return 0.5 + -0.168736*r - 0.331264*g + 0.5*b; } 
-					// 			float rgb2cr(float r, float g, float b){ return 0.5 + 0.5*r - 0.418688*g - 0.081312*b; } 
-					// 			float smoothclip(float low, float high, float x){ if (x <= low){ return 0.0; } if(x >= high){ return 1.0; } return (x-low)/(high-low); }
-					// 			vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite)
-					// 			{ 
-					// 				float cb = rgb2cb(colora.r,colora.g,colora.b); 
-					// 				float cr = rgb2cr(colora.r,colora.g,colora.b); 
-					// 				float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key)); 
-					// 				alpha = smoothclip(tola, tolb, alpha); 
-					// 				float r = max(gl_FragColor.r - (1.0-alpha)*backColor.r, 0.0); 
-					// 				float g = max(gl_FragColor.g - (1.0-alpha)*backColor.g, 0.0); 
-					// 				float b = max(gl_FragColor.b - (1.0-alpha)*backColor.b, 0.0); 
-					// 				if(alpha < clipBlack){ alpha = r = g = b = 0.0; } 
-					// 				if(alpha > clipWhite){ alpha = 1.0; } 
-					// 				if(clipWhite < 1.0){ alpha = alpha/max(clipWhite, 0.9); } 
-					// 				return vec4(r,g,b, alpha); 
-					// 			}
-					// 			void main( void ) {
-
-					// 				gl_FragColor = vec4(texture2D(pointTexture, vUv).rgb, 1);
-
-					// 				float tola = 0.0; 
-					// 				float tolb = u_threshold/2.0; 
-					// 				float cb_key = rgb2cb(backColor.r, backColor.g, backColor.b); 
-					// 				float cr_key = rgb2cr(backColor.r, backColor.g, backColor.b); 
-					// 				gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
-
-					// 			} 
-					// 			`,
+							// fragmentShader: `    
+							// 	uniform sampler2D pointTexture;
+							// 	uniform vec3 backColor;
+							// 	varying vec2 vUv;
+							// 	uniform float u_threshold;
+							// 	float u_clipBlack = 0.2;
+							// 	float u_clipWhite = 4.0;
+
+							// 	float rgb2cb(float r, float g, float b){ return 0.5 + -0.168736*r - 0.331264*g + 0.5*b; } 
+							// 	float rgb2cr(float r, float g, float b){ return 0.5 + 0.5*r - 0.418688*g - 0.081312*b; } 
+							// 	float smoothclip(float low, float high, float x){ if (x <= low){ return 0.0; } if(x >= high){ return 1.0; } return (x-low)/(high-low); }
+							// 	vec4 greenscreen(vec4 colora, float Cb_key,float Cr_key, float tola,float tolb, float clipBlack, float clipWhite)
+							// 	{ 
+							// 		float cb = rgb2cb(colora.r,colora.g,colora.b); 
+							// 		float cr = rgb2cr(colora.r,colora.g,colora.b); 
+							// 		float alpha = distance(vec2(cb, cr), vec2(Cb_key, Cr_key)); 
+							// 		alpha = smoothclip(tola, tolb, alpha); 
+							// 		float r = max(gl_FragColor.r - (1.0-alpha)*backColor.r, 0.0); 
+							// 		float g = max(gl_FragColor.g - (1.0-alpha)*backColor.g, 0.0); 
+							// 		float b = max(gl_FragColor.b - (1.0-alpha)*backColor.b, 0.0); 
+							// 		if(alpha < clipBlack){ alpha = r = g = b = 0.0; } 
+							// 		if(alpha > clipWhite){ alpha = 1.0; } 
+							// 		if(clipWhite < 1.0){ alpha = alpha/max(clipWhite, 0.9); } 
+							// 		return vec4(r,g,b, alpha); 
+							// 	}
+							// 	void main( void ) {
+
+							// 		gl_FragColor = vec4(texture2D(pointTexture, vUv).rgb, 1);
+
+							// 		float tola = 0.0; 
+							// 		float tolb = u_threshold/2.0; 
+							// 		float cb_key = rgb2cb(backColor.r, backColor.g, backColor.b); 
+							// 		float cr_key = rgb2cr(backColor.r, backColor.g, backColor.b); 
+							// 		gl_FragColor = greenscreen(gl_FragColor, cb_key, cr_key, tola, tolb, u_clipBlack, u_clipWhite);
+
+							// 	} 
+							// 	`,
 
 				};
 				// 创建绿幕材质