# 1. 准备

``````float circle(vec2 st,vec2 center,float radius) {
float blur = 0.002;
float pct = distance(st,center);//计算任意点到圆心的距离
}
``````

# 2. 交集实现

``````//交集
float shapeIntersection(float a,float b){
return min(a,b);
}

float shapeIntersection1(float a,float b){
return a*b;
}
``````

`````` void main( void ) {
//窗口坐标调整为[-1,1],坐标原点在屏幕中心
vec2 st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;

vec3 line_color = vec3(1.0,1.0,0.0);
vec3 color = vec3(0.6);//背景色
float pct = 0.0;

//绘制两个圆
float cirlce = circle(st,vec2(-0.2,0.0),0.65);
float cirlce1 = circle(st,vec2(0.2,0.0),0.65);

//交集
pct = shapeIntersection(cirlce,cirlce1);
//pct = shapeIntersection1(cirlce,cirlce1);

color = mix(color,line_color,pct);
gl_FragColor = vec4(color, 1);
}
``````

# 3. 并集实现

``````//并集
float shapeUnion(float a,float b){
return max(a,b);
}
float shapeUnion1(float a,float b){
return a+b;
}
``````

``````//并集
pct = shapeUnion(cirlce,cirlce1);
//pct = shapeUnion1(cirlce,cirlce1);
``````

# 3. 差集实现

``````//差集
float shapeDifferenceSet(float a,float b){
return a-min(a,b);
}
``````

# 4. 示例代码

``````<body>
<div id="container"></div>
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
<script>
var container;
var camera, scene, renderer;
var uniforms;
void main() {
gl_Position = vec4( position, 1.0 );
}
`
#ifdef GL_ES
precision mediump float;
#endif
uniform float u_time;
uniform vec2 u_mouse;
uniform vec2 u_resolution;

float circle(vec2 st,vec2 center,float radius) {
float blur = 0.002;
float pct = distance(st,center);//计算任意点到圆心的距离
}

//交集
float shapeIntersection(float a,float b){
return min(a,b);
}
float shapeIntersection1(float a,float b){
return a*b;
}

//并集
float shapeUnion(float a,float b){
return max(a,b);
}
float shapeUnion1(float a,float b){
return a+b;
}

//差集
float shapeDifferenceSet(float a,float b){
return a-min(a,b);
}

void main( void ) {

//窗口坐标调整为[-1,1],坐标原点在屏幕中心
vec2 st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;

//窗口坐标调整为[0,1],坐标原点在屏幕左下角
//vec2 st = gl_FragCoord.xy/u_resolution;

vec3 line_color = vec3(1.0,1.0,0.0);
vec3 color = vec3(0.6);//背景色
float pct = 0.0;

//绘制两个圆
float cirlce = circle(st,vec2(-0.2,0.0),0.65);
float cirlce1 = circle(st,vec2(0.2,0.0),0.65);

//交集
pct = shapeIntersection(cirlce,cirlce1);
pct = shapeIntersection1(cirlce,cirlce1);

//并集
pct = shapeUnion(cirlce,cirlce1);
//pct = shapeUnion1(cirlce,cirlce1);

//差集
pct = shapeDifferenceSet(cirlce,cirlce1);

color = mix(color,line_color,pct);

gl_FragColor = vec4(color, 1);
}
`

init();
animate();

function init() {
container = document.getElementById('container');

camera = new THREE.Camera();
camera.position.z = 1;

scene = new THREE.Scene();

var geometry = new THREE.PlaneBufferGeometry(2, 2);

uniforms = {
u_time: {
type: "f",
value: 1.0
},
u_resolution: {
type: "v2",
value: new THREE.Vector2()
},
u_mouse: {
type: "v2",
value: new THREE.Vector2()
}
};

uniforms: uniforms,
});

var mesh = new THREE.Mesh(geometry, material);

renderer = new THREE.WebGLRenderer();
//renderer.setPixelRatio(window.devicePixelRatio);

container.appendChild(renderer.domElement);

onWindowResize();

document.onmousemove = function (e) {
uniforms.u_mouse.value.x = e.pageX
uniforms.u_mouse.value.y = e.pageY
}
}

function onWindowResize(event) {
renderer.setSize(800, 800);
uniforms.u_resolution.value.x = renderer.domElement.width;
uniforms.u_resolution.value.y = renderer.domElement.height;
}

function animate() {
requestAnimationFrame(animate);
render();
}

function render() {
uniforms.u_time.value += 0.02;
renderer.render(scene, camera);
}
</script>
</body>
``````