Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Ablesons
three.js
提交
ca0375cb
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,发现更多精彩内容 >>
提交
ca0375cb
编写于
8月 12, 2017
作者:
M
Mugen87
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
Examples: Added Sobel Edge Detection
上级
996775b6
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
319 addition
and
74 deletion
+319
-74
examples/files.js
examples/files.js
+1
-0
examples/js/shaders/EdgeShader2.js
examples/js/shaders/EdgeShader2.js
+0
-73
examples/js/shaders/FreiChenShader.js
examples/js/shaders/FreiChenShader.js
+1
-1
examples/js/shaders/GrayScaleShader.js
examples/js/shaders/GrayScaleShader.js
+49
-0
examples/js/shaders/SobelOperatorShader.js
examples/js/shaders/SobelOperatorShader.js
+99
-0
examples/webgl_postprocessing_edgedetection.html
examples/webgl_postprocessing_edgedetection.html
+169
-0
未找到文件。
examples/files.js
浏览文件 @
ca0375cb
...
...
@@ -214,6 +214,7 @@ var files = {
"
webgl_postprocessing_crossfade
"
,
"
webgl_postprocessing_dof
"
,
"
webgl_postprocessing_dof2
"
,
"
webgl_postprocessing_edgedetection
"
,
"
webgl_postprocessing_glitch
"
,
"
webgl_postprocessing_godrays
"
,
"
webgl_postprocessing_masking
"
,
...
...
examples/js/shaders/EdgeShader2.js
已删除
100644 → 0
浏览文件 @
996775b6
/**
* @author zz85 / https://github.com/zz85 | https://www.lab4games.net/zz85/blog
*
* Edge Detection Shader using Sobel filter
* Based on http://rastergrid.com/blog/2011/01/frei-chen-edge-detector
*
* aspect: vec2 of (1/width, 1/height)
*/
THREE
.
EdgeShader2
=
{
uniforms
:
{
"
tDiffuse
"
:
{
value
:
null
},
"
aspect
"
:
{
value
:
new
THREE
.
Vector2
(
512
,
512
)
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = uv;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
uniform vec2 aspect;
"
,
"
vec2 texel = vec2(1.0 / aspect.x, 1.0 / aspect.y);
"
,
"
mat3 G[2];
"
,
"
const mat3 g0 = mat3( 1.0, 2.0, 1.0, 0.0, 0.0, 0.0, -1.0, -2.0, -1.0 );
"
,
"
const mat3 g1 = mat3( 1.0, 0.0, -1.0, 2.0, 0.0, -2.0, 1.0, 0.0, -1.0 );
"
,
"
void main(void)
"
,
"
{
"
,
"
mat3 I;
"
,
"
float cnv[2];
"
,
"
vec3 sample;
"
,
"
G[0] = g0;
"
,
"
G[1] = g1;
"
,
/* fetch the 3x3 neighbourhood and use the RGB vector's length as intensity value */
"
for (float i=0.0; i<3.0; i++)
"
,
"
for (float j=0.0; j<3.0; j++) {
"
,
"
sample = texture2D( tDiffuse, vUv + texel * vec2(i-1.0,j-1.0) ).rgb;
"
,
"
I[int(i)][int(j)] = length(sample);
"
,
"
}
"
,
/* calculate the convolution values for all the masks */
"
for (int i=0; i<2; i++) {
"
,
"
float dp3 = dot(G[i][0], I[0]) + dot(G[i][1], I[1]) + dot(G[i][2], I[2]);
"
,
"
cnv[i] = dp3 * dp3;
"
,
"
}
"
,
"
gl_FragColor = vec4(0.5 * sqrt(cnv[0]*cnv[0]+cnv[1]*cnv[1]));
"
,
"
}
"
].
join
(
"
\n
"
)
};
examples/js/shaders/
Edge
Shader.js
→
examples/js/shaders/
FreiChen
Shader.js
浏览文件 @
ca0375cb
...
...
@@ -7,7 +7,7 @@
* aspect: vec2 of (1/width, 1/height)
*/
THREE
.
Edge
Shader
=
{
THREE
.
FreiChen
Shader
=
{
uniforms
:
{
...
...
examples/js/shaders/GrayScaleShader.js
0 → 100644
浏览文件 @
ca0375cb
/**
* @author Mugen87 / https://github.com/Mugen87
*
* see https://en.wikipedia.org/wiki/Grayscale
*
*/
THREE
.
GrayScaleShader
=
{
uniforms
:
{
"
tDiffuse
"
:
{
value
:
null
}
},
vertexShader
:
[
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
vUv = uv;
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform sampler2D tDiffuse;
"
,
"
varying vec2 vUv;
"
,
"
void main() {
"
,
"
const vec3 weight = vec3( 0.2126, 0.7152, 0.0722 );
"
,
"
vec3 color = texture2D( tDiffuse, vUv ).rgb;
"
,
"
float luminance = dot( color, weight );
"
,
"
gl_FragColor = vec4( vec3( luminance ), 1 );
"
,
"
}
"
].
join
(
"
\n
"
)
};
examples/js/shaders/SobelOperatorShader.js
0 → 100644
浏览文件 @
ca0375cb
/**
* @author Mugen87 / https://github.com/Mugen87
*
* Sobel Edge Detection (see https://youtu.be/uihBwtPIBxM)
*
* As mentioned in the video the Sobel operator expects a grayscale image as input.
*
*/
THREE
.
SobelOperatorShader
=
{
uniforms
:
{
"
tDiffuse
"
:
{
value
:
null
},
"
resolution
"
:
{
value
:
new
THREE
.
Vector2
()
}
},
vertexShader
:
[
"
void main() {
"
,
"
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
"
,
"
}
"
].
join
(
"
\n
"
),
fragmentShader
:
[
"
uniform sampler2D tDiffuse;
"
,
"
uniform vec2 resolution;
"
,
"
void main() {
"
,
// kernel definition (in glsl matrices are filled in column-major order)
"
const mat3 Gx = mat3( -1, -2, -1, 0, 0, 0, 1, 2, 1 );
"
,
// x direction kernel
"
const mat3 Gy = mat3( -1, 0, 1, -2, 0, 2, -1, 0, 1 );
"
,
// y direction kernel
// fetch the 3x3 neighbourhood of a fragment
"
vec2 p = vec2( gl_FragCoord.x, gl_FragCoord.y );
"
,
// first column
"
vec2 x0y0 = ( p + vec2( -1, -1 ) ) / resolution;
"
,
"
vec2 x0y1 = ( p + vec2( -1, 0 ) ) / resolution;
"
,
"
vec2 x0y2 = ( p + vec2( -1, 1 ) ) / resolution;
"
,
// second column
"
vec2 x1y0 = ( p + vec2( 0, -1 ) ) / resolution;
"
,
"
vec2 x1y1 = ( p + vec2( 0, 0 ) ) / resolution;
"
,
"
vec2 x1y2 = ( p + vec2( 0, 1 ) ) / resolution;
"
,
// third column
"
vec2 x2y0 = ( p + vec2( 1, -1 ) ) / resolution;
"
,
"
vec2 x2y1 = ( p + vec2( 1, 0 ) ) / resolution;
"
,
"
vec2 x2y2 = ( p + vec2( 1, 1 ) ) / resolution;
"
,
// sample values (we assume grayscale colors so only read a single channel)
"
float tx0y0 = texture2D( tDiffuse, x0y0 ).r;
"
,
"
float tx0y1 = texture2D( tDiffuse, x0y1 ).r;
"
,
"
float tx0y2 = texture2D( tDiffuse, x0y2 ).r;
"
,
"
float tx1y0 = texture2D( tDiffuse, x1y0 ).r;
"
,
"
float tx1y1 = texture2D( tDiffuse, x1y1 ).r;
"
,
"
float tx1y2 = texture2D( tDiffuse, x1y2 ).r;
"
,
"
float tx2y0 = texture2D( tDiffuse, x2y0 ).r;
"
,
"
float tx2y1 = texture2D( tDiffuse, x2y1 ).r;
"
,
"
float tx2y2 = texture2D( tDiffuse, x2y2 ).r;
"
,
// gradient value in x direction
"
float valueGx = Gx[0][0] * tx0y0 + Gx[1][0] * tx1y0 + Gx[2][0] * tx2y0 +
"
,
"
Gx[0][1] * tx0y1 + Gx[1][1] * tx1y1 + Gx[2][1] * tx2y1 +
"
,
"
Gx[0][2] * tx0y2 + Gx[1][2] * tx1y2 + Gx[2][2] * tx2y2;
"
,
// gradient value in y direction
"
float valueGy = Gy[0][0] * tx0y0 + Gy[1][0] * tx1y0 + Gy[2][0] * tx2y0 +
"
,
"
Gy[0][1] * tx0y1 + Gy[1][1] * tx1y1 + Gy[2][1] * tx2y1 +
"
,
"
Gy[0][2] * tx0y2 + Gy[1][2] * tx1y2 + Gy[2][2] * tx2y2;
"
,
// magnitute of the total gradient
"
float G = sqrt( ( valueGx * valueGx ) + ( valueGy * valueGy ) );
"
,
"
gl_FragColor = vec4( vec3( G ), 1 );
"
,
"
}
"
].
join
(
"
\n
"
)
};
examples/webgl_postprocessing_edgedetection.html
0 → 100644
浏览文件 @
ca0375cb
<!DOCTYPE html>
<html
lang=
"en"
>
<head>
<title>
three.js webgl - postprocessing - edge detection (Sobel)
</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
{
background
:
#777
;
padding
:
0
;
margin
:
0
;
font-weight
:
bold
;
overflow
:
hidden
;
}
#info
{
position
:
absolute
;
top
:
0px
;
width
:
100%
;
color
:
#ffffff
;
padding
:
5px
;
font-family
:
Monospace
;
font-size
:
13px
;
text-align
:
center
;
}
a
{
color
:
#ffffff
;
}
</style>
</head>
<body>
<script
src=
"../build/three.js"
></script>
<script
src=
"js/controls/OrbitControls.js"
></script>
<script
src=
"js/Detector.js"
></script>
<script
src=
"js/libs/dat.gui.min.js"
></script>
<script
src=
"js/shaders/CopyShader.js"
></script>
<script
src=
"js/shaders/GrayScaleShader.js"
></script>
<script
src=
"js/shaders/SobelOperatorShader.js"
></script>
<script
src=
"js/postprocessing/EffectComposer.js"
></script>
<script
src=
"js/postprocessing/RenderPass.js"
></script>
<script
src=
"js/postprocessing/ShaderPass.js"
></script>
<div
id=
"info"
>
<a
href=
"https://threejs.org"
target=
"_blank"
>
three.js
</a>
- webgl - postprocessing - edge detection (Sobel)
</div>
<script>
if
(
!
Detector
.
webgl
)
Detector
.
addGetWebGLMessage
();
var
camera
,
scene
,
renderer
,
composer
;
var
effectSobel
;
var
params
=
{
enable
:
true
};
init
();
animate
();
function
init
()
{
//
scene
=
new
THREE
.
Scene
();
camera
=
new
THREE
.
PerspectiveCamera
(
70
,
window
.
innerWidth
/
window
.
innerHeight
,
1
,
1000
);
camera
.
position
.
set
(
0
,
10
,
20
);
camera
.
lookAt
(
scene
.
position
);
//
var
geometry
=
new
THREE
.
IcosahedronGeometry
(
8
);
var
material
=
new
THREE
.
MeshPhongMaterial
(
{
color
:
0xffff00
}
);
var
mesh
=
new
THREE
.
Mesh
(
geometry
,
material
);
scene
.
add
(
mesh
);
//
var
ambientLight
=
new
THREE
.
AmbientLight
(
0xcccccc
,
0.4
);
scene
.
add
(
ambientLight
);
var
pointLight
=
new
THREE
.
PointLight
(
0xffffff
,
0.8
);
camera
.
add
(
pointLight
);
scene
.
add
(
camera
);
//
renderer
=
new
THREE
.
WebGLRenderer
();
renderer
.
setPixelRatio
(
window
.
devicePixelRatio
);
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
document
.
body
.
appendChild
(
renderer
.
domElement
);
// postprocessing
composer
=
new
THREE
.
EffectComposer
(
renderer
);
var
renderPass
=
new
THREE
.
RenderPass
(
scene
,
camera
);
composer
.
addPass
(
renderPass
);
// color to grayscale conversion
var
effectGrayScale
=
new
THREE
.
ShaderPass
(
THREE
.
GrayScaleShader
);
composer
.
addPass
(
effectGrayScale
);
// you might want to use a gaussian blur filter before
// the next pass to improve the result of the Sobel operator
// Sobel operator
effectSobel
=
new
THREE
.
ShaderPass
(
THREE
.
SobelOperatorShader
);
effectSobel
.
renderToScreen
=
true
;
effectSobel
.
uniforms
.
resolution
.
value
.
x
=
window
.
innerWidth
;
effectSobel
.
uniforms
.
resolution
.
value
.
y
=
window
.
innerHeight
;
composer
.
addPass
(
effectSobel
);
var
controls
=
new
THREE
.
OrbitControls
(
camera
);
//
var
gui
=
new
dat
.
GUI
();
gui
.
add
(
params
,
'
enable
'
);
gui
.
open
();
//
window
.
addEventListener
(
'
resize
'
,
onWindowResize
,
false
);
}
function
onWindowResize
()
{
camera
.
aspect
=
window
.
innerWidth
/
window
.
innerHeight
;
camera
.
updateProjectionMatrix
();
renderer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
composer
.
setSize
(
window
.
innerWidth
,
window
.
innerHeight
);
effectSobel
.
uniforms
.
resolution
.
value
.
x
=
window
.
innerWidth
;
effectSobel
.
uniforms
.
resolution
.
value
.
y
=
window
.
innerHeight
;
}
function
animate
()
{
requestAnimationFrame
(
animate
);
if
(
params
.
enable
===
true
)
{
composer
.
render
();
}
else
{
renderer
.
render
(
scene
,
camera
);
}
}
</script>
</body>
</html>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录