3D模型导入 CanvasMatrix.js引擎 demo(一)
为广大html5 3d开发的朋友们演示 代码贴图,请下载附件demo
<html>
<head>
<title>3DS model</title>
<script src="CanvasMatrix.js" type="text/javascript"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPos;
attribute vec3 aNorm;
uniform mat4 mvMatrix;
uniform mat4 prMatrix;
varying vec3 col;
const vec4 dirDif = vec4(0., 0., 1., 0.);
const vec4 dirHalf = vec4(-.4034, .259, .8776, 0.);
void main(void) {
gl_Position = prMatrix * mvMatrix * vec4(aPos, 1.);
vec4 rotNorm = mvMatrix * vec4(aNorm, .0);
col = vec3(1., 1., 1.) * max( 0., dot(rotNorm, dirDif) );
// col += vec3(1., 1., 1.) * pow( max( 0., dot(rotNorm, dirHalf) ), 40.);
//文章来自http://wjlgryx.iteye.com
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec3 col;
void main(void) {
gl_FragColor = vec4( col, 1.);
}
</script>
<script type="text/javascript" src="m1.js">
</script>
</head>
<body onLoad="webGLStart();" onResize="webGLStart();">
<center>
<canvas id="canvas" width="696" height="696"></canvas>
</center>
<video id="video" autoplay loop style="display:none">
<!--<source src="sintel.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>-->
<source src="sintel.mp3" type='video/ogg; codecs="theora, vorbis"'>
</video>
</body></html>