Permalink
Browse files

more refactoring to support muliple renders

  • Loading branch information...
1 parent 5d93d26 commit 15c1413079dcc82fc7882d2822ba9aaec8b9ecd1 @jlongster committed May 23, 2011
Showing with 687 additions and 438 deletions.
  1. +17 −28 app.js
  2. +94 −32 dom3d.js
  3. +15 −3 example.css
  4. +13 −3 example.html
  5. +35 −47 example.js
  6. +14 −2 example2.html
  7. +30 −39 example2.js
  8. +14 −3 teapot.html → example3.html
  9. +13 −32 example3.js
  10. +14 −3 example4.html
  11. +12 −33 example4.js
  12. +3 −3 index.html
  13. +2 −2 mesh404.js
  14. +28 −88 renderer.js
  15. +136 −42 renderer_css.js
  16. +0 −72 renderer_cssmat.js
  17. +61 −0 renderer_raphael.js
  18. +2 −2 snake.js
  19. +65 −0 std.js
  20. +3 −2 style.css
  21. +2 −2 teapot.js
  22. 0 untitled3.obj → teapot.obj
  23. +114 −0 vectors.scm
View
@@ -3,34 +3,22 @@ $(function() {
var object = untitled2;
- var last_x;
- var last_y;
- // $(document).mousemove(function(e) {
- // var diff_x = ((last_x || e.pageX) - e.pageX);
- // last_x = e.pageX;
-
- // var diff_y = ((last_y || e.pageY) - e.pageY);
- // last_y = e.pageY;
-
- // update(diff_x / 100.0, diff_y / 100.0);
- // frame();
- // });
-
function update(diff) {
object.yaw = diff;
object.pitch = diff;
}
function frame() {
- dom3d.current_renderer().clear();
- dom3d.current_renderer().render('#boxes', object);
+ dom3d.clear('boxes');
+ dom3d.render('boxes', object);
}
function test() {
- dom3d.current_renderer().test('#boxes');
+ dom3d.current_renderer().test('boxes');
}
- dom3d.init('#boxes', 800, 400);
+ dom3d.current_renderer(new RendererCSS());
+ dom3d.init('boxes');
dom3d.current_eye($v(0,0,-15));
dom3d.current_light(vec_unit($v(-1.0, 0.0, 0.0)));
dom3d.current_color($c(200, 255, 200));
@@ -40,15 +28,16 @@ $(function() {
1.0,
1000.0)
);
- dom3d.current_renderer(renderer_css);
-
- test();
- // frame();
-
- // var rot = 0.0;
- // setInterval(function() {
- // update(rot);
- // rot += 0.05;
- // frame();
- // }, 50);
+ // dom3d.current_renderer().use_matrix();
+ // dom3d.current_renderer().use_refs();
+
+ //test();
+ frame();
+
+ var rot = 0.0;
+ setInterval(function() {
+ update(rot);
+ rot += 0.05;
+ frame();
+ }, 50);
});
View
@@ -1,14 +1,14 @@
-function make_parameter(default_val) {
- var _val = default_val;
- return function(val) {
- if(val)
- _val = val;
- return _val;
- };
-}
-
-$(function() {
+(function() {
+
+ function make_parameter(default_val) {
+ var _val = default_val;
+ return function(val) {
+ if(val)
+ _val = val;
+ return _val;
+ };
+ }
// settings
var current_width = make_parameter();
@@ -20,36 +20,96 @@ $(function() {
var current_frustum = make_parameter();
var current_light = make_parameter();
- var $raphael = null;
-
// setup
- function init(sel, width, height) {
- var el = $(sel);
-
- if(width && height) {
- el.css({ 'width': width,
- 'height': height });
+ function init(width_or_canvas, height) {
+ if(typeof width_or_canvas == 'string') {
+ var el = $('#' + width_or_canvas);
+ current_width(el.width());
+ current_height(el.height());
}
else {
- width = el.width();
- height = el.height();
+ current_width(width_or_canvas);
+ current_height(height);
}
- current_width(width);
- current_height(height);
+ current_renderer().init(width_or_canvas, height);
}
- function raphael(width, height) {
- if($raphael) {
- $raphael.setSize(width, height);
+ function render(canvas, mesh) {
+ var eye = dom3d.current_eye();
+ var data = mesh.data;
+ var len = data.length;
+ var renderer = current_renderer();
+
+ var heap = make_heap();
+
+ for(var i=0; i<len; i++) {
+ data[i].ref = (data[i].ref ||
+ (renderer.make_ref && renderer.make_ref(canvas)));
+
+ var tri = _transform_points(mesh, data[i]);
+ tri.ref = data[i].ref;
+
+ _tri_apply(tri, function(v) {
+ _vec_subtract(v, eye);
+ });
+
+ heap_add(heap, tri);
}
- else {
- $raphael = Raphael(0, 0, width, height);
+
+ heap_depth_first(heap, function(triangle) {
+ renderer.render3d(canvas,
+ triangle,
+ dom3d.current_eye(),
+ dom3d.current_light(),
+ dom3d.current_frustum());
+ });
+ }
+
+ function clear(canvas) {
+ current_renderer().clear(canvas);
+ }
+
+ function destroy(canvas) {
+ current_renderer().destroy(canvas);
+ }
+
+ // 3d space stuff
+ function _transform_points(mesh, points) {
+ var p = [vec_copy(points[0]), vec_copy(points[1]), vec_copy(points[2])];
+
+ if(mesh.scale) {
+ _tri_apply(p, function(v) {
+ _vec_multiply(v, mesh.scale);
+ })
}
- current_width(width);
- current_height(height);
+ if(mesh.yaw) {
+ _tri_apply(p, function(v) {
+ _vec_3drotateX(v, mesh.yaw);
+ });
+ }
+
+ if(mesh.pitch) {
+ _tri_apply(p, function(v) {
+ _vec_3drotateY(v, mesh.pitch);
+ });
+ }
+
+ if(mesh.translate) {
+ _tri_apply(p, function(v) {
+ _vec_add(v, mesh.translate);
+ });
+ }
+
+ return p;
+ }
+
+ function _tri_apply(tri, transform) {
+ transform(tri[0]);
+ transform(tri[1]);
+ transform(tri[2]);
}
// frustum helps define 3d space
@@ -69,8 +129,6 @@ $(function() {
return { data: points };
}
- // main functions
-
// Unused for now, if we wanted to force a maximum framerate we
// would use this on the render function
function with_interval(interval, func) {
@@ -102,6 +160,9 @@ $(function() {
window.dom3d = {
init: init,
+ render: render,
+ clear: clear,
+ destroy: destroy,
make_frustum: make_frustum,
make_mesh: make_mesh,
@@ -113,4 +174,5 @@ $(function() {
current_light: current_light,
current_frustum: current_frustum
}
-});
+
+})();
View
@@ -23,6 +23,18 @@ li:hover {
-moz-transition: -moz-transform .5s;
}
-svg {
- margin-top: 150px;
-}
+.render-options {
+ float: right;
+}
+
+.render-options a,
+.render-options a:visited {
+ display: inline-block;
+ padding: 1em;
+ color: white;
+ border: 1px solid #bd5294;
+}
+
+.render-options a:target {
+ background-color: #bd5294;
+}
View
@@ -4,23 +4,33 @@
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="vector.js"></script>
<script type="text/javascript" src="dom3d.js"></script>
+ <script type="text/javascript" src="renderer.js"></script>
+ <script type="text/javascript" src="raphael-min.js"></script>
+ <script type="text/javascript" src="renderer_raphael.js"></script>
+ <script type="text/javascript" src="renderer_css.js"></script>
<script type="text/javascript" src="heap.js"></script>
+ <script type="text/javascript" src="std.js"></script>
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="snake.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="stylesheet" href="example.css" type="text/css" />
</head>
- <body>
+ <body id="canvas">
<div class="header">
Other examples:
<a href="index.html">main</a>
<a href="example.html">pole</a>
<a href="example2.html">dragging</a>
- <a href="teapot.html">teapot</a>
+ <a href="example3.html">teapot</a>
+ <a href="example4.html">404</a>
+
+ <div class="render-options">
+ <a id="css" href="#css">CSS</a>
+ <a id="raphael" href="#raphael">SVG/Raphael</a>
+ </div>
</div>
- <div class="teapot"></div>
</body>
</html>
Oops, something went wrong.

0 comments on commit 15c1413

Please sign in to comment.