½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ±âŸ ½ºÅ©¸³Æ® > WebGL Blackhole »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
Javascript
PHP
ASP
CSS
html
mysql
jquery
image
Mobile
API
slide
°Ô½ÃÆÇ
¸Þ´º
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
WebGL Blackhole
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ±âŸ ½ºÅ©¸³Æ®
´Ù¿î·Îµå Ƚ¼ö 0 ȸ
°£´Ü¼³¸í WebGLÀ» »ç¿ëÇÑ ºí·¢È¦
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ
 

¸¶¿ì½º¸¦ µû¶ó ´Ù´Ï´Â ºí·¢È¦ µðÀÚÀÎ ÀÔ´Ï´Ù.
°£´ÜÇÑ ¹è°æ ¾Ö´Ï¸ÞÀ̼ÇÀÌ ÇÊ¿äÇÏ½Ç ¶§ »ç¿ë Çصµ ÁÁÀ»°Å °°½À´Ï´Ù.

ÀÚ¼¼ÇÑ ³»¿ëÀº µ¥¸ð¿¡¼­ È®ÀÎÇÒ ¼ö ÀÖ½À´Ï´Ù.


html

<script id="2d-fragment-shader" type="x-shader/x-fragment">// <![CDATA[
 
// Look below at line 23 for realism.
 
#ifdef GL_ES
precision mediump float;
#endif
 
#define PI 3.14159265359
 
uniform sampler2D u_image;
varying vec2 v_texCoord;
 
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_mass;
uniform float u_time;
uniform float u_clickedTime;
 
vec2 rotate(vec2 mt, vec2 st, float angle){
float cos = cos((angle + u_clickedTime) * PI); // try replacing * 1.0 with * PI
float sin = sin(angle * 0.0); // try removing the * 0.0
 
// Uncomment these two lines for realism
//float cos = cos(angle) * (u_time * 0.3);
//float sin = sin(angle) * (u_time * 0.3);
 
float nx = (cos * (st.x - mt.x)) + (sin * (st.y - mt.y)) + mt.x;
float ny = (cos * (st.y - mt.y)) - (sin * (st.x - mt.x)) + mt.y;
return vec2(nx, ny);
}
 
void main() {
     vec2 st = vec2(gl_FragCoord.x, u_resolution.y - gl_FragCoord.y)/u_resolution;
vec2 mt = vec2(u_mouse.x, u_resolution.y - u_mouse.y)/u_resolution;
 
float dx = st.x - mt.x;
float dy = st.y - mt.y;
 
float dist = sqrt(dx * dx + dy * dy);
float pull = u_mass / (dist * dist);
 
     vec3 color = vec3(0.0);
 
vec2 r = rotate(mt,st,pull);
vec4 imgcolor = texture2D(u_image, r);
color = vec3(
(imgcolor.x - (pull * 0.25)),
(imgcolor.y - (pull * 0.25)), 
(imgcolor.z - (pull * 0.25))
);
 
 
     gl_FragColor = vec4(color,1.);
}
// ]]></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">// <![CDATA[
attribute vec2 a_position;
attribute vec2 a_texCoord;
 
varying vec2 v_texCoord;
void main() {
gl_Position = vec4(a_position, 0, 1);
v_texCoord = a_texCoord;
}
// ]]></script>
<canvas id="glscreen"></canvas>


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 49319627 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.