Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
108f9ce7
T
three.js
项目概览
Ablesons
/
three.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
three.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
108f9ce7
编写于
4月 13, 2018
作者:
M
Mr.doob
提交者:
GitHub
4月 13, 2018
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #13850 from meatbags/dev
RGB Halftone (post-processing)
上级
9e2aa76b
288cf2fb
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
617 addition
and
0 deletion
+617
-0
examples/files.js
examples/files.js
+1
-0
examples/js/postprocessing/HalftonePass.js
examples/js/postprocessing/HalftonePass.js
+74
-0
examples/js/shaders/HalftoneShader.js
examples/js/shaders/HalftoneShader.js
+314
-0
examples/webgl_postprocessing_rgb_halftone.html
examples/webgl_postprocessing_rgb_halftone.html
+228
-0
未找到文件。
examples/files.js
浏览文件 @
108f9ce7
...
...
@@ -227,6 +227,7 @@ var files = {
"
webgl_postprocessing_fxaa
"
,
"
webgl_postprocessing_glitch
"
,
"
webgl_postprocessing_godrays
"
,
"
webgl_postprocessing_rgb_halftone
"
,
"
webgl_postprocessing_masking
"
,
"
webgl_postprocessing_ssaa
"
,
"
webgl_postprocessing_ssaa_unbiased
"
,
...
...
examples/js/postprocessing/HalftonePass.js
0 → 100644
浏览文件 @
108f9ce7
/**
* @author meatbags / xavierburrow.com, github/meatbags
*
* RGB Halftone pass for three.js effects composer. Requires THREE.HalftoneShader.
*
*/
THREE
.
HalftonePass
=
function
(
width
,
height
,
params
)
{
THREE
.
Pass
.
call
(
this
);
if
(
THREE
.
HalftoneShader
===
undefined
)
{
console
.
error
(
'
THREE.HalftonePass requires THREE.HalftoneShader
'
);
}
this
.
uniforms
=
THREE
.
UniformsUtils
.
clone
(
THREE
.
HalftoneShader
.
uniforms
);
this
.
material
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
this
.
uniforms
,
fragmentShader
:
THREE
.
HalftoneShader
.
fragmentShader
,
vertexShader
:
THREE
.
HalftoneShader
.
vertexShader
}
);
// set params
this
.
uniforms
.
width
.
value
=
width
;
this
.
uniforms
.
height
.
value
=
height
;
for
(
var
key
in
params
)
{
if
(
params
.
hasOwnProperty
(
key
)
&&
this
.
uniforms
.
hasOwnProperty
(
key
)
)
{
this
.
uniforms
[
key
].
value
=
params
[
key
];
}
}
this
.
camera
=
new
THREE
.
OrthographicCamera
(
-
1
,
1
,
1
,
-
1
,
0
,
1
);
this
.
scene
=
new
THREE
.
Scene
();
this
.
quad
=
new
THREE
.
Mesh
(
new
THREE
.
PlaneBufferGeometry
(
2
,
2
),
null
);
this
.
quad
.
frustumCulled
=
false
;
this
.
scene
.
add
(
this
.
quad
);
};
THREE
.
HalftonePass
.
prototype
=
Object
.
assign
(
Object
.
create
(
THREE
.
Pass
.
prototype
),
{
constructor
:
THREE
.
HalftonePass
,
render
:
function
(
renderer
,
writeBuffer
,
readBuffer
,
delta
,
maskActive
)
{
this
.
material
.
uniforms
[
"
tDiffuse
"
].
value
=
readBuffer
.
texture
;
this
.
quad
.
material
=
this
.
material
;
if
(
this
.
renderToScreen
)
{
renderer
.
render
(
this
.
scene
,
this
.
camera
);
}
else
{
renderer
.
render
(
this
.
scene
,
this
.
camera
,
writeBuffer
,
this
.
clear
);
}
},
setSize
:
function
(
width
,
height
)
{
this
.
uniforms
.
width
.
value
=
width
;
this
.
uniforms
.
height
.
value
=
height
;
}
}
);
examples/js/shaders/HalftoneShader.js
0 → 100644
浏览文件 @
108f9ce7
/**
* @author meatbags / xavierburrow.com, github/meatbags
*
* RGB Halftone shader for three.js.
* NOTE:
* Shape (1 = Dot, 2 = Ellipse, 3 = Line, 4 = Square)
* Blending Mode (1 = Linear, 2 = Multiply, 3 = Add, 4 = Lighter, 5 = Darker)
*/
THREE
.
HalftoneShader
=
{
uniforms
:
{
"
tDiffuse
"
:
{
value
:
null
},
"
shape
"
:
{
value
:
1
},
"
radius
"
:
{
value
:
4
},
"
rotateR
"
:
{
value
:
Math
.
PI
/
12
*
1
},
"
rotateG
"
:
{
value
:
Math
.
PI
/
12
*
2
},
"
rotateB
"
:
{
value
:
Math
.
PI
/
12
*
3
},
"
scatter
"
:
{
value
:
0
},
"
width
"
:
{
value
:
1
},
"
height
"
:
{
value
:
1
},
"
blending
"
:
{
value
:
1
},
"
blendingMode
"
:
{
value
:
1
},
"
greyscale
"
:
{
value
:
false
},
"
disable
"
:
{
value
:
false
}
},
vertexShader
:
[
"
varying vec2 vUV;
"
,
"
void main() {
"
,
"
vUV = uv;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
#define SQRT2_MINUS_ONE 0.41421356
"
,
"
#define SQRT2_HALF_MINUS_ONE 0.20710678
"
,
"
#define PI2 6.28318531
"
,
"
#define SHAPE_DOT 1
"
,
"
#define SHAPE_ELLIPSE 2
"
,
"
#define SHAPE_LINE 3
"
,
"
#define SHAPE_SQUARE 4
"
,
"
#define BLENDING_LINEAR 1
"
,
"
#define BLENDING_MULTIPLY 2
"
,
"
#define BLENDING_ADD 3
"
,
"
#define BLENDING_LIGHTER 4
"
,
"
#define BLENDING_DARKER 5
"
,
"
uniform sampler2D tDiffuse;
"
,
"
uniform float radius;
"
,
"
uniform float rotateR;
"
,
"
uniform float rotateG;
"
,
"
uniform float rotateB;
"
,
"
uniform float scatter;
"
,
"
uniform float width;
"
,
"
uniform float height;
"
,
"
uniform int shape;
"
,
"
uniform bool disable;
"
,
"
uniform float blending;
"
,
"
uniform int blendingMode;
"
,
"
varying vec2 vUV;
"
,
"
uniform bool greyscale;
"
,
"
const int samples = 8;
"
,
"
float blend( float a, float b, float t ) {
"
,
// linear blend
"
return a * ( 1.0 - t ) + b * t;
"
,
"
}
"
,
"
float hypot( float x, float y ) {
"
,
// vector magnitude
"
return sqrt( x * x + y * y );
"
,
"
}
"
,
"
float rand( vec2 seed ){
"
,
// get pseudo-random number
"
return fract( sin( dot( seed.xy, vec2( 12.9898, 78.233 ) ) ) * 43758.5453 );
"
,
"
}
"
,
"
float distanceToDotRadius( float channel, vec2 coord, vec2 normal, vec2 p, float angle, float rad_max ) {
"
,
// apply shape-specific transforms
"
float dist = hypot( coord.x - p.x, coord.y - p.y );
"
,
"
float rad = channel;
"
,
"
if ( shape == SHAPE_DOT ) {
"
,
"
rad = pow( abs( rad ), 1.125 ) * rad_max;
"
,
"
} else if ( shape == SHAPE_ELLIPSE ) {
"
,
"
rad = pow( abs( rad ), 1.125 ) * rad_max;
"
,
"
if ( dist != 0.0 ) {
"
,
"
float dot_p = abs( ( p.x - coord.x ) / dist * normal.x + ( p.y - coord.y ) / dist * normal.y );
"
,
"
dist = ( dist * ( 1.0 - SQRT2_HALF_MINUS_ONE ) ) + dot_p * dist * SQRT2_MINUS_ONE;
"
,
"
}
"
,
"
} else if ( shape == SHAPE_LINE ) {
"
,
"
rad = pow( abs( rad ), 1.5) * rad_max;
"
,
"
float dot_p = ( p.x - coord.x ) * normal.x + ( p.y - coord.y ) * normal.y;
"
,
"
dist = hypot( normal.x * dot_p, normal.y * dot_p );
"
,
"
} else if ( shape == SHAPE_SQUARE ) {
"
,
"
float theta = atan( p.y - coord.y, p.x - coord.x ) - angle;
"
,
"
float sin_t = abs( sin( theta ) );
"
,
"
float cos_t = abs( cos( theta ) );
"
,
"
rad = pow( abs( rad ), 1.4 );
"
,
"
rad = rad_max * ( rad + ( ( sin_t > cos_t ) ? rad - sin_t * rad : rad - cos_t * rad ) );
"
,
"
}
"
,
"
return rad - dist;
"
,
"
}
"
,
"
struct Cell {
"
,
// grid sample positions
"
vec2 normal;
"
,
"
vec2 p1;
"
,
"
vec2 p2;
"
,
"
vec2 p3;
"
,
"
vec2 p4;
"
,
"
float samp2;
"
,
"
float samp1;
"
,
"
float samp3;
"
,
"
float samp4;
"
,
"
};
"
,
"
vec4 getSample( vec2 point ) {
"
,
// multi-sampled point
"
vec4 tex = texture2D( tDiffuse, vec2( point.x / width, point.y / height ) );
"
,
"
float base = rand( vec2( floor( point.x ), floor( point.y ) ) ) * PI2;
"
,
"
float step = PI2 / float( samples );
"
,
"
float dist = radius * 0.66;
"
,
"
for ( int i = 0; i < samples; ++i ) {
"
,
"
float r = base + step * float( i );
"
,
"
vec2 coord = point + vec2( cos( r ) * dist, sin( r ) * dist );
"
,
"
tex += texture2D( tDiffuse, vec2( coord.x / width, coord.y / height ) );
"
,
"
}
"
,
"
tex /= float( samples ) + 1.0;
"
,
"
return tex;
"
,
"
}
"
,
"
float getDotColour( Cell c, vec2 p, int channel, float angle, float aa ) {
"
,
// get colour for given point
"
float dist_c_1, dist_c_2, dist_c_3, dist_c_4, res;
"
,
"
if ( channel == 0 ) {
"
,
"
c.samp1 = getSample( c.p1 ).r;
"
,
"
c.samp2 = getSample( c.p2 ).r;
"
,
"
c.samp3 = getSample( c.p3 ).r;
"
,
"
c.samp4 = getSample( c.p4 ).r;
"
,
"
} else if (channel == 1) {
"
,
"
c.samp1 = getSample( c.p1 ).g;
"
,
"
c.samp2 = getSample( c.p2 ).g;
"
,
"
c.samp3 = getSample( c.p3 ).g;
"
,
"
c.samp4 = getSample( c.p4 ).g;
"
,
"
} else {
"
,
"
c.samp1 = getSample( c.p1 ).b;
"
,
"
c.samp3 = getSample( c.p3 ).b;
"
,
"
c.samp2 = getSample( c.p2 ).b;
"
,
"
c.samp4 = getSample( c.p4 ).b;
"
,
"
}
"
,
"
dist_c_1 = distanceToDotRadius( c.samp1, c.p1, c.normal, p, angle, radius );
"
,
"
dist_c_2 = distanceToDotRadius( c.samp2, c.p2, c.normal, p, angle, radius );
"
,
"
dist_c_3 = distanceToDotRadius( c.samp3, c.p3, c.normal, p, angle, radius );
"
,
"
dist_c_4 = distanceToDotRadius( c.samp4, c.p4, c.normal, p, angle, radius );
"
,
"
res = ( dist_c_1 > 0.0 ) ? clamp( dist_c_1 / aa, 0.0, 1.0 ) : 0.0;
"
,
"
res += ( dist_c_2 > 0.0 ) ? clamp( dist_c_2 / aa, 0.0, 1.0 ) : 0.0;
"
,
"
res += ( dist_c_3 > 0.0 ) ? clamp( dist_c_3 / aa, 0.0, 1.0 ) : 0.0;
"
,
"
res += ( dist_c_4 > 0.0 ) ? clamp( dist_c_4 / aa, 0.0, 1.0 ) : 0.0;
"
,
"
res = clamp( res, 0.0, 1.0 );
"
,
"
return res;
"
,
"
}
"
,
"
Cell getReferenceCell( vec2 p, vec2 origin, float grid_angle, float step ) {
"
,
// get containing cell
"
Cell c;
"
,
// calc grid
"
vec2 n = vec2( cos( grid_angle ), sin( grid_angle ) );
"
,
"
float threshold = step * 0.5;
"
,
"
float dot_normal = n.x * ( p.x - origin.x ) + n.y * ( p.y - origin.y );
"
,
"
float dot_line = -n.y * ( p.x - origin.x ) + n.x * ( p.y - origin.y );
"
,
"
vec2 offset = vec2( n.x * dot_normal, n.y * dot_normal );
"
,
"
float offset_normal = mod( hypot( offset.x, offset.y ), step );
"
,
"
float normal_dir = ( dot_normal < 0.0 ) ? 1.0 : -1.0;
"
,
"
float normal_scale = ( ( offset_normal < threshold ) ? -offset_normal : step - offset_normal ) * normal_dir;
"
,
"
float offset_line = mod( hypot( ( p.x - offset.x ) - origin.x, ( p.y - offset.y ) - origin.y ), step );
"
,
"
float line_dir = ( dot_line < 0.0 ) ? 1.0 : -1.0;
"
,
"
float line_scale = ( ( offset_line < threshold ) ? -offset_line : step - offset_line ) * line_dir;
"
,
// get closest corner
"
c.normal = n;
"
,
"
c.p1.x = p.x - n.x * normal_scale + n.y * line_scale;
"
,
"
c.p1.y = p.y - n.y * normal_scale - n.x * line_scale;
"
,
// scatter
"
if ( scatter != 0.0 ) {
"
,
"
float off_mag = scatter * threshold * 0.5;
"
,
"
float off_angle = rand( vec2( floor( c.p1.x ), floor( c.p1.y ) ) ) * PI2;
"
,
"
c.p1.x += cos( off_angle ) * off_mag;
"
,
"
c.p1.y += sin( off_angle ) * off_mag;
"
,
"
}
"
,
// find corners
"
float normal_step = normal_dir * ( ( offset_normal < threshold ) ? step : -step );
"
,
"
float line_step = line_dir * ( ( offset_line < threshold ) ? step : -step );
"
,
"
c.p2.x = c.p1.x - n.x * normal_step;
"
,
"
c.p2.y = c.p1.y - n.y * normal_step;
"
,
"
c.p3.x = c.p1.x + n.y * line_step;
"
,
"
c.p3.y = c.p1.y - n.x * line_step;
"
,
"
c.p4.x = c.p1.x - n.x * normal_step + n.y * line_step;
"
,
"
c.p4.y = c.p1.y - n.y * normal_step - n.x * line_step;
"
,
"
return c;
"
,
"
}
"
,
"
float blendColour( float a, float b, float t ) {
"
,
// blend colours
"
if ( blendingMode == BLENDING_LINEAR ) {
"
,
"
return blend( a, b, 1.0 - t );
"
,
"
} else if ( blendingMode == BLENDING_ADD ) {
"
,
"
return blend( a, min( 1.0, a + b ), t );
"
,
"
} else if ( blendingMode == BLENDING_MULTIPLY ) {
"
,
"
return blend( a, max( 0.0, a * b ), t );
"
,
"
} else if ( blendingMode == BLENDING_LIGHTER ) {
"
,
"
return blend( a, max( a, b ), t );
"
,
"
} else if ( blendingMode == BLENDING_DARKER ) {
"
,
"
return blend( a, min( a, b ), t );
"
,
"
} else {
"
,
"
return blend( a, b, 1.0 - t );
"
,
"
}
"
,
"
}
"
,
"
void main() {
"
,
"
if ( ! disable ) {
"
,
// setup
"
vec2 p = vec2( vUV.x * width, vUV.y * height );
"
,
"
vec2 origin = vec2( 0, 0 );
"
,
"
float aa = ( radius < 2.5 ) ? radius * 0.5 : 1.25;
"
,
// get channel samples
"
Cell cell_r = getReferenceCell( p, origin, rotateR, radius );
"
,
"
Cell cell_g = getReferenceCell( p, origin, rotateG, radius );
"
,
"
Cell cell_b = getReferenceCell( p, origin, rotateB, radius );
"
,
"
float r = getDotColour( cell_r, p, 0, rotateR, aa );
"
,
"
float g = getDotColour( cell_g, p, 1, rotateG, aa );
"
,
"
float b = getDotColour( cell_b, p, 2, rotateB, aa );
"
,
// blend with original
"
vec4 colour = texture2D( tDiffuse, vUV );
"
,
"
r = blendColour( r, colour.r, blending );
"
,
"
g = blendColour( g, colour.g, blending );
"
,
"
b = blendColour( b, colour.b, blending );
"
,
"
if ( greyscale ) {
"
,
"
r = g = b = (r + b + g) / 3.0;
"
,
"
}
"
,
"
gl_FragColor = vec4( r, g, b, 1.0 );
"
,
"
} else {
"
,
"
gl_FragColor = texture2D( tDiffuse, vUV );
"
,
"
}
"
,
"
}
"
].
join
(
"
\n
"
)
};
examples/webgl_postprocessing_rgb_halftone.html
0 → 100644
浏览文件 @
108f9ce7
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl
</title>
<meta
charset=
"utf-8"
>
<meta
name=
"viewport"
content=
"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
>
<style>
body
{
font-family
:
Monospace
;
background-color
:
#f0f0f0
;
margin
:
0px
;
overflow
:
hidden
;
}
.info
{
position
:
absolute
;
background-color
:
black
;
opacity
:
0.8
;
color
:
white
;
text-align
:
center
;
top
:
0px
;
width
:
100%
;
padding
:
2px
;
}
.info
a
{
color
:
#00ffff
;
}
</style>
</head>
<body>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
src=
"js/postprocessing/RenderPass.js"
></script>
<script
src=
"js/postprocessing/ShaderPass.js"
></script>
<script
src=
"js/postprocessing/HalftonePass.js"
></script>
<script
src=
"js/shaders/CopyShader.js"
></script>
<script
src=
"js/shaders/HalftoneShader.js"
></script>
<script
src=
"js/shaders/DepthLimitedBlurShader.js"
></script>
<script
src=
"js/shaders/UnpackDepthRGBAShader.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
'js/libs/stats.min.js'
></script>
<script
src=
'js/libs/dat.gui.min.js'
></script>
<div
class=
"info"
>
<a
href=
"http://threejs.org"
target=
"_blank"
rel=
"noopener noreferrer"
>
three.js
</a>
- RGB Halftone post-processing by
<a
href=
"https://github.com/meatbags"
target=
"_blank"
>
Xavier Burrow
</a>
</div>
<script>
if
(
!
Detector
.
webgl
)
{
Detector
.
addGetWebGLMessage
();
}
// setup
var
wrapper
,
renderer
,
clock
,
camera
,
controls
,
stats
;
wrapper
=
document
.
createElement
(
'
div
'
);
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
clock
=
new
THREE
.
Clock
();
camera
=
new
THREE
.
PerspectiveCamera
(
75
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
z
=
12
;
rotationSpeed
=
Math
.
PI
/
64
;
stats
=
new
Stats
();
wrapper
.
appendChild
(
renderer
.
domElement
);
wrapper
.
appendChild
(
stats
.
dom
);
document
.
body
.
appendChild
(
wrapper
);
// camera controls
controls
=
new
THREE
.
OrbitControls
(
camera
,
renderer
.
domElement
);
controls
.
target
.
set
(
0
,
0
,
0
);
controls
.
update
();
// scene
var
scene
,
group
,
mat
,
floor
,
light
;
scene
=
new
THREE
.
Scene
();
scene
.
background
=
new
THREE
.
Color
(
0x444444
);
group
=
new
THREE
.
Group
();
floor
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
100
,
1
,
100
),
new
THREE
.
MeshPhongMaterial
(
{}
)
);
floor
.
position
.
y
=
-
10
;
light
=
new
THREE
.
PointLight
(
0xffffff
,
1.0
,
50
,
2
);
light
.
position
.
y
=
2
;
group
.
add
(
floor
,
light
);
scene
.
add
(
group
);
mat
=
new
THREE
.
ShaderMaterial
(
{
uniforms
:
{},
vertexShader
:
[
"
varying vec2 vUV;
"
,
"
varying vec3 vNormal;
"
,
"
void main() {
"
,
"
vUV = uv;
"
,
"
vNormal = vec3( normal );
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
varying vec2 vUV;
"
,
"
varying vec3 vNormal;
"
,
"
void main() {
"
,
"
vec4 c = vec4( abs( vNormal ) + vec3( vUV, 0.0 ), 0.0 );
"
,
"
gl_FragColor = c;
"
,
"
}
"
].
join
(
"
\n
"
)
}
);
for
(
var
i
=
0
;
i
<
50
;
++
i
)
{
// fill scene with coloured cubes
var
mesh
=
new
THREE
.
Mesh
(
new
THREE
.
BoxBufferGeometry
(
2
,
2
,
2
),
mat
);
mesh
.
position
.
set
(
Math
.
random
()
*
16
-
8
,
Math
.
random
()
*
16
-
8
,
Math
.
random
()
*
16
-
8
);
mesh
.
rotation
.
set
(
Math
.
random
()
*
Math
.
PI
*
2
,
Math
.
random
()
*
Math
.
PI
*
2
,
Math
.
random
()
*
Math
.
PI
*
2
);
group
.
add
(
mesh
);
}
// post-processing
var
composer
,
renderPass
,
halftonePass
,
params
;
composer
=
new
THREE
.
EffectComposer
(
renderer
);
renderPass
=
new
THREE
.
RenderPass
(
scene
,
camera
);
params
=
{
shape
:
1
,
radius
:
4
,
rotateR
:
Math
.
PI
/
12
,
rotateB
:
Math
.
PI
/
12
*
2
,
rotateG
:
Math
.
PI
/
12
*
3
,
scatter
:
0
,
blending
:
1
,
blendingMode
:
1
,
greyscale
:
false
,
disable
:
false
};
halftonePass
=
new
THREE
.
HalftonePass
(
window
.
innerWidth
,
window
.
innerHeight
,
params
);
halftonePass
.
renderToScreen
=
true
;
composer
.
addPass
(
renderPass
);
composer
.
addPass
(
halftonePass
);
window
.
onresize
=
function
()
{
// resize composer
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
composer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
};
// GUI
var
controller
,
gui
,
onGUIChange
;
controller
=
{
radius
:
halftonePass
.
uniforms
.
radius
.
value
,
rotateR
:
halftonePass
.
uniforms
.
rotateR
.
value
/
(
Math
.
PI
/
180
),
rotateG
:
halftonePass
.
uniforms
.
rotateG
.
value
/
(
Math
.
PI
/
180
),
rotateB
:
halftonePass
.
uniforms
.
rotateB
.
value
/
(
Math
.
PI
/
180
),
scatter
:
halftonePass
.
uniforms
.
scatter
.
value
,
shape
:
halftonePass
.
uniforms
.
shape
.
value
,
greyscale
:
halftonePass
.
uniforms
.
greyscale
.
value
,
blending
:
halftonePass
.
uniforms
.
blending
.
value
,
blendingMode
:
halftonePass
.
uniforms
.
blendingMode
.
value
,
disable
:
halftonePass
.
uniforms
.
disable
.
value
};
onGUIChange
=
function
()
{
// update uniforms
halftonePass
.
uniforms
.
radius
.
value
=
controller
.
radius
;
halftonePass
.
uniforms
.
rotateR
.
value
=
controller
.
rotateR
*
(
Math
.
PI
/
180
);
halftonePass
.
uniforms
.
rotateG
.
value
=
controller
.
rotateG
*
(
Math
.
PI
/
180
);
halftonePass
.
uniforms
.
rotateB
.
value
=
controller
.
rotateB
*
(
Math
.
PI
/
180
);
halftonePass
.
uniforms
.
scatter
.
value
=
controller
.
scatter
;
halftonePass
.
uniforms
.
shape
.
value
=
controller
.
shape
;
halftonePass
.
uniforms
.
greyscale
.
value
=
controller
.
greyscale
;
halftonePass
.
uniforms
.
blending
.
value
=
controller
.
blending
;
halftonePass
.
uniforms
.
blendingMode
.
value
=
controller
.
blendingMode
;
halftonePass
.
uniforms
.
disable
.
value
=
controller
.
disable
;
};
gui
=
new
dat
.
GUI
();
gui
.
add
(
controller
,
'
shape
'
,
{
'
Dot
'
:
1
,
'
Ellipse
'
:
2
,
'
Line
'
:
3
,
'
Square
'
:
4
}
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
radius
'
,
1
,
25
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
rotateR
'
,
0
,
90
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
rotateG
'
,
0
,
90
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
rotateB
'
,
0
,
90
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
scatter
'
,
0
,
1
,
0.01
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
greyscale
'
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
blending
'
,
0
,
1
,
0.01
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
blendingMode
'
,
{
'
Linear
'
:
1
,
'
Multiply
'
:
2
,
'
Add
'
:
3
,
'
Lighter
'
:
4
,
'
Darker
'
:
5
}
).
onChange
(
onGUIChange
);
gui
.
add
(
controller
,
'
disable
'
).
onChange
(
onGUIChange
);
function
loop
()
{
// demo loop
var
delta
=
clock
.
getDelta
();
requestAnimationFrame
(
loop
);
stats
.
update
();
group
.
rotation
.
y
+=
delta
*
rotationSpeed
;
composer
.
render
(
delta
);
}
loop
();
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录