@vuemap/vue-amap-extra
Version:
@vuemap/vue-amap扩展库，包含threejs相关图层
213 lines (201 loc) • 9.46 kB
JavaScript
'use strict';
var three = require('three');
var Pass_js = require('three/examples/jsm/postprocessing/Pass.js');
var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
return value;
};
class CircleSweepPass extends Pass_js.Pass {
constructor(renderer, scene, camera, options) {
console.log("renderer.extensions.has( 'WEBGL_depth_texture' )", renderer.extensions.has("WEBGL_depth_texture"));
super();
__publicField(this, "scene");
__publicField(this, "camera");
__publicField(this, "center");
__publicField(this, "innerRadius", 0);
__publicField(this, "outerRadius", 0);
__publicField(this, "fillType", 1);
__publicField(this, "fillColor");
__publicField(this, "depthTarget");
__publicField(this, "renderer");
__publicField(this, "depthMaterial");
__publicField(this, "fsQuad");
__publicField(this, "topLeftVec");
__publicField(this, "topRightVec");
__publicField(this, "bottomLeftVec");
__publicField(this, "bottomRightVec");
__publicField(this, "width", 0);
__publicField(this, "height", 0);
const size = new three.Vector2();
renderer.getSize(size);
this.width = size.x;
this.height = size.y;
this.scene = scene;
this.camera = camera;
options = options ? options : {};
this.center = options.center ? options.center : new three.Vector3(0, 0, 0);
this.innerRadius = options.innerRadius ? options.innerRadius : 0;
this.outerRadius = options.outerRadius ? options.outerRadius : 0;
this.fillType = options.fillType ? options.fillType : 1;
this.fillColor = options.fillColor ? options.fillColor : new three.Color(1, 1, 1);
this.depthTarget = new three.WebGLRenderTarget(window.innerWidth, window.innerHeight);
this.depthTarget.texture.format = three.RGBAFormat;
this.depthTarget.texture.minFilter = three.NearestFilter;
this.depthTarget.texture.magFilter = three.NearestFilter;
this.depthTarget.texture.generateMipmaps = false;
this.depthTarget.stencilBuffer = false;
this.depthTarget.depthBuffer = true;
this.depthTarget.depthTexture = new three.DepthTexture(size.x, size.y);
this.depthTarget.depthTexture.type = three.UnsignedShortType;
const { topLeftVec, topRightVec, bottomLeftVec, bottomRightVec } = this.calCameraVectors();
this.topLeftVec = topLeftVec;
this.topRightVec = topRightVec;
this.bottomLeftVec = bottomLeftVec;
this.bottomRightVec = bottomRightVec;
this.depthMaterial = this.getDepthMaterial();
this.depthMaterial.uniforms["fillColor"].value = this.fillColor;
this.fsQuad = new Pass_js.FullScreenQuad(this.depthMaterial);
}
render(renderer, writeBuffer, readBuffer, deltaTime, maskActive) {
this.depthMaterial.uniforms["colorTexture"].value = readBuffer.texture;
const { topLeftVec, topRightVec, bottomLeftVec, bottomRightVec } = this.calCameraVectors();
this.depthMaterial.uniforms["cameraPos"].value = this.camera.position;
this.depthMaterial.uniforms["topLeftVec"].value = topLeftVec;
this.depthMaterial.uniforms["topRightVec"].value = topRightVec;
this.depthMaterial.uniforms["bottomLeftVec"].value = bottomLeftVec;
this.depthMaterial.uniforms["bottomRightVec"].value = bottomRightVec;
renderer.setRenderTarget(this.depthTarget);
renderer.render(this.scene, this.camera);
renderer.setRenderTarget(null);
this.fsQuad.render(renderer);
}
calCameraVectors() {
const camera = this.camera;
const near = camera.near;
const { fov, aspect } = camera;
const h = Math.tan(this.ang2rad(fov / 2)) * near;
const w = h * aspect;
const forwardDir = new three.Vector3(0, 0, 1).applyMatrix4(camera.matrixWorld.clone());
forwardDir.sub(camera.position.clone());
forwardDir.normalize();
const rightDir = new three.Vector3(-1, 0, 0).applyMatrix4(camera.matrixWorld.clone());
rightDir.sub(camera.position.clone());
rightDir.normalize();
const topDir = new three.Vector3(0, -1, 0).applyMatrix4(camera.matrixWorld.clone());
topDir.sub(camera.position.clone());
topDir.normalize();
const toRight = rightDir.multiplyScalar(w);
const toTop = topDir.multiplyScalar(h);
const topLeftVec = forwardDir.clone().multiplyScalar(near).add(toTop.clone()).sub(toRight.clone());
const scale = topLeftVec.length() / near;
topLeftVec.normalize();
topLeftVec.multiplyScalar(-scale);
const topRightVec = forwardDir.clone().multiplyScalar(near).add(toRight.clone()).add(toTop.clone());
topRightVec.normalize();
topRightVec.multiplyScalar(-scale);
const bottomLeftVec = forwardDir.clone().multiplyScalar(near).sub(toTop.clone()).sub(toRight.clone());
bottomLeftVec.normalize();
bottomLeftVec.multiplyScalar(-scale);
const bottomRightVec = forwardDir.clone().multiplyScalar(near).add(toRight.clone()).sub(toTop.clone());
bottomRightVec.normalize();
bottomRightVec.multiplyScalar(-scale);
return { topLeftVec, topRightVec, bottomLeftVec, bottomRightVec };
}
ang2rad(ang) {
return ang * Math.PI / 180;
}
getDepthMaterial() {
return new three.ShaderMaterial({
uniforms: {
"colorTexture": { value: null },
"depthTexture": { value: this.depthTarget.depthTexture },
"cameraFar": { value: this.camera.far },
"cameraNear": { value: this.camera.near },
"cameraPos": { value: this.camera.position.clone() },
"topLeftVec": { value: this.topLeftVec },
"topRightVec": { value: this.topRightVec },
"bottomLeftVec": { value: this.bottomLeftVec },
"bottomRightVec": { value: this.bottomRightVec },
"center": { value: this.center },
"innerRadius": { value: this.innerRadius },
"outerRadius": { value: this.outerRadius },
"fillType": { value: this.fillType },
"fillColor": { value: this.fillColor }
},
transparent: true,
vertexShader: `
precision highp float;
uniform vec3 topLeftVec;
uniform vec3 topRightVec;
uniform vec3 bottomLeftVec;
uniform vec3 bottomRightVec;
varying vec2 vUv;
varying vec3 cameraVec;
void main() {
vUv = uv;
if(uv.x < 0.5 && uv.y < 0.5) { // bottom left
cameraVec = bottomLeftVec;
}else if(uv.x < 0.5 && uv.y > 0.5) { // top left
cameraVec = topLeftVec;
}else if(uv.x > 0.5 && uv.y > 0.5) { // top right
cameraVec = topRightVec;
}else { // bottom right
cameraVec = bottomRightVec;
}
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader: `
#include <packing>
varying vec2 vUv;
varying vec3 cameraVec;
uniform float cameraFar;
uniform float cameraNear;
uniform vec3 cameraPos;
uniform sampler2D colorTexture;
uniform sampler2D depthTexture;
uniform vec3 center;
uniform float innerRadius;
uniform float outerRadius;
uniform int fillType;
uniform vec3 fillColor;
float readClipZ( sampler2D depthSampler, vec2 coord ) {
float fragCoordZ = texture2D( depthSampler, coord ).x;
return perspectiveDepthToViewZ( fragCoordZ, cameraNear, cameraFar ); // \u8FD4\u56DE\u76F8\u673A\u7A7A\u95F4\u7684 viewZ\uFF08\u76F8\u5BF9\u4E8E\u76F8\u673A\u7A7A\u95F4\u7684\u5B9E\u9645z\uFF09
}
void main() {
float clipZ = readClipZ( depthTexture, vUv );
vec4 depthColor = texture2D( depthTexture, vUv);
vec4 diff = texture2D( colorTexture, vUv);
vec3 wP = cameraPos + (cameraVec)*abs(clipZ);
float dis = distance(wP, center);
float circleWidth = outerRadius - innerRadius;
if(dis < outerRadius && dis > innerRadius) {
//gl_FragColor = vec4(mix(diff.xyz, fillColor, 0.5), 1.0);
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}else {
gl_FragColor = diff;
//gl_FragColor = vec4(0.0, 0.5, 0.0, 1.0);
}
gl_FragColor = vec4(diff.r, 0.0,0.0, 1.0);;
//if(depthColor.r == 0.0){
// gl_FragColor = vec4(1.0, 0,0.0, 1.0);
//}else{
// gl_FragColor = vec4(0, 1.0,0.0, 1.0);
//}
//gl_FragColor = vec4(depthColor.r, 0.0,0.0, 1.0);
}`
});
}
setSize(width, height) {
this.width = width;
this.height = height;
this.depthTarget.setSize(width, height);
}
setCamera(camera) {
this.camera = camera;
}
}
exports.CircleSweepPass = CircleSweepPass;
//# sourceMappingURL=CircleSweepPass.js.map