alembic-viewer
Version:
alembic (.abc) viewer
212 lines (194 loc) • 6.67 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="css/index.css" rel="stylesheet" />
<script type="text/javascript" src="js/ummath.js"></script>
<script type="text/javascript" src="js/umcamera.js"></script>
<script type="text/javascript" src="js/ummaterial.js"></script>
<script type="text/javascript" src="js/ummesh.js"></script>
<script type="text/javascript" src="js/umpoint.js"></script>
<script type="text/javascript" src="js/umline.js"></script>
<script type="text/javascript" src="js/umshader.js"></script>
<script type="text/javascript" src="js/umobj.js"></script>
<script type="text/javascript" src="js/umtriangle.js"></script>
<script type="text/javascript" src="js/umbvh.js"></script>
<script type="text/javascript" src="js/umscene.js"></script>
<script type="text/javascript" src="js/umgl.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="x-shader/x-vertex" id="vertex_shader">
#version 100
attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_uv;
varying vec3 normal;
varying vec2 uv;
varying vec4 light_direction;
uniform mat4 view_projection_matrix;
uniform mat4 global_matrix;
const vec4 light_position = vec4(100.0, 100.0, 100.0, 0.0);
void main()
{
vec4 global_pos = global_matrix * vec4(a_position, 1.0);
vec4 pos = view_projection_matrix * global_pos;
normal = a_normal;
uv = a_uv;
pos.z = 2.0 * pos.z - pos.w;
light_direction = normalize(vec4(a_position, 0.0) - light_position);
gl_PointSize = 2.0;
gl_Position = pos;
}
</script>
<script type="x-shader/x-fragment" id="fragment_shader">
#version 100
#ifdef GL_ES
precision mediump float;
#endif
//out vec4 frag_color;
varying vec3 normal;
varying vec2 uv;
varying vec4 light_direction;
uniform sampler2D s_texture;
uniform vec4 light_color;
uniform vec4 light_ambient_color;
uniform vec4 constant_color;
uniform vec4 mat_diffuse;
uniform vec4 mat_specular;
uniform vec4 mat_ambient;
uniform vec4 mat_flags;
vec4 phong(vec4 diff, vec3 NL, vec3 R, vec3 V)
{
vec4 ambient = mat_ambient * light_ambient_color * vec4(1.0, 1.0, 1.0, 0.0);
vec4 diffuse = diff * vec4(NL.x, NL.y, NL.z, 1.0);
vec4 specular = vec4(mat_specular.x, mat_specular.y, mat_specular.z, 0.0)
* pow( max(0.00001, clamp( dot(R,V), 0.0, 1.0 )), mat_specular.w );
return ambient + (diffuse + specular) * light_color;
}
void main()
{
vec3 L = vec3(light_direction.x, light_direction.y, light_direction.z);
float nl = clamp( dot(normal, -L ), 0.0, 1.0);
vec3 vnl = vec3(nl, nl, nl);
//vec3 reflection = normalize(2.0 * nl * normal + L);
// todo
//vec3 view_direction = vec3(0.0, 0.0, 0.0);
vec4 diffuse = mat_diffuse;
if (mat_flags.y > 0.5)
{
gl_FragColor = constant_color;
return;
}
if (mat_flags.x > 0.5)
{
diffuse = texture2D(s_texture, uv);
}
//vec4 out_color = phong(diffuse, vnl, reflection, view_direction);
//out_color.w = diffuse.w;
gl_FragColor = vec4(vnl, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="edge_vertex_shader">
#version 100
attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_uv;
attribute vec3 a_barycentric;
varying vec3 normal;
varying vec2 uv;
varying vec3 barycentric;
varying vec4 light_direction;
uniform mat4 view_projection_matrix;
uniform mat4 global_matrix;
const vec4 light_position = vec4(100.0, 100.0, 100.0, 0.0);
void main()
{
vec4 global_pos = global_matrix * vec4(a_position, 1.0);
vec4 pos = view_projection_matrix * global_pos;
normal = a_normal;
uv = a_uv;
barycentric = a_barycentric;
pos.z = 2.0 * pos.z - pos.w;
light_direction = normalize(vec4(a_position, 0.0) - light_position);
gl_PointSize = 2.0;
gl_Position = pos;
}
</script>
<script type="x-shader/x-fragment" id="edge_fragment_shader">
#version 100
#ifdef GL_ES
precision mediump float;
#endif
//out vec4 frag_color;
varying vec3 normal;
varying vec2 uv;
varying vec3 barycentric;
varying vec4 light_direction;
uniform sampler2D s_texture;
uniform vec4 light_color;
uniform vec4 light_ambient_color;
uniform vec4 constant_color;
uniform vec4 mat_diffuse;
uniform vec4 mat_specular;
uniform vec4 mat_ambient;
uniform vec4 mat_flags;
vec4 phong(vec4 diff, vec3 NL, vec3 R, vec3 V)
{
vec4 ambient = mat_ambient * light_ambient_color * vec4(1.0, 1.0, 1.0, 0.0);
vec4 diffuse = diff * vec4(NL.x, NL.y, NL.z, 1.0);
vec4 specular = vec4(mat_specular.x, mat_specular.y, mat_specular.z, 0.0)
* pow( max(0.00001, clamp( dot(R,V), 0.0, 1.0 )), mat_specular.w );
return ambient + (diffuse + specular) * light_color;
}
#extension GL_OES_standard_derivatives : enable
float edgeFactor(){
vec3 d = fwidth(barycentric);
vec3 a3 = smoothstep(vec3(0.0), d*0.95, barycentric);
return min(min(a3.x, a3.y), a3.z);
}
void main()
{
vec3 L = vec3(light_direction.x, light_direction.y, light_direction.z);
float nl = clamp( dot(normal, -L ), 0.0, 1.0);
vec3 vnl = vec3(nl, nl, nl);
//vec3 reflection = normalize(2.0 * nl * normal + L);
// todo
//vec3 view_direction = vec3(0.0, 0.0, 0.0);
vec4 diffuse = mat_diffuse;
if (mat_flags.y > 0.5)
{
gl_FragColor = constant_color;
return;
}
if (mat_flags.x > 0.5)
{
diffuse = texture2D(s_texture, uv);
}
//vec4 out_color = phong(diffuse, vnl, reflection, view_direction);
//out_color.w = diffuse.w;
gl_FragColor.rgb = mix(vec3(0.0), vnl, edgeFactor());
gl_FragColor.a = 1.0;
}
</script>
</head>
<body>
<div id="mainview">
<canvas id="canvas" style="background-color:red"></canvas>
<div id="tool_open_wrap" class="other_tool">
<img src="img/open.png" id="tool_open_image"/>
<input id="tool_open" type="file" />
</div>
<img src="img/surface.png" id="tool_surface" class="shader_tool selected" />
<img src="img/surface_edge.png" id="tool_surface_edge" class="shader_tool" />
<img src="img/play.png" id="tool_play" class="other_tool" />
<img src="img/pause.png" id="tool_pause" class="other_tool" />
<img src="img/stop.png" id="tool_stop" class="other_tool" />
</div>
<div id="scriptview">
<div style="width:200px;float:left"></div>
<div id="editor" style="width:50%; height: 300px;float:left"></div>
<pre id="output" class="output"></pre>
<button id="execute_button">execute</button>
</div>
</body>
</html>