{"json_modified": "2016-03-28T08:46:20.702582", "uuid": "cec4adb4-7437-4aa3-806a-d5fb817e7d83", "title": "WebGL model view projection", "url": "/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection", "tags": ["WebGL", "Model", "View", "Guide", "projection", "Graphics"], "translations": [], "modified": "2015-11-12T09:22:55", "label": "WebGL model view projection", "localization_tags": [], "locale": "en-US", "id": 159903, "last_edit": "2015-11-12T09:22:53", "summary": "This article explores how to take data within a WebGL project, and project it into the proper spaces to display it on the screen. It assumes a knowledge of basic matrix math using translation, scale, and rotation matrices. It explains the three core matrices that are typically used to represent a 3D object: the model, view and projection matrices.", "sections": [{"id": "Quick_Links", "title": null}, {"id": "The_model_view_and_projection_matrices", "title": "The model, view, and projection matrices"}, {"id": "Clip_space", "title": "Clip space"}, {"id": "WebGLBox_example", "title": "WebGLBox example"}, {"id": "WebGLBox_Constructor", "title": "WebGLBox Constructor"}, {"id": "WebGLBox_draw", "title": "WebGLBox draw"}, {"id": "The_results", "title": "The results"}, {"id": "Exercise", "title": "Exercise"}, {"id": "Homogeneous_Coordinates", "title": "Homogeneous Coordinates"}, {"id": "The_results_2", "title": "The results"}, {"id": "sect1", "title": null}, {"id": "Exercises", "title": "Exercises"}, {"id": "Model_Transform", "title": "Model Transform"}, {"id": "The_results_3", "title": "The results"}, {"id": "Exercises_2", "title": "Exercises"}, {"id": "Divide_by_W", "title": "Divide by W"}, {"id": "The_results_4", "title": "The results"}, {"id": "Exercise_2", "title": "Exercise"}, {"id": "Simple_Projection", "title": "Simple Projection"}, {"id": "The_results_5", "title": "The results"}, {"id": "Perspective_Matrix", "title": "Perspective Matrix"}, {"id": "The_results_6", "title": "The results"}, {"id": "Exercises_3", "title": "Exercises"}, {"id": "View_Matrix", "title": "View Matrix"}, {"id": "The_results_7", "title": "The results"}, {"id": "Relating_the_coordinate_systems", "title": "Relating the coordinate systems"}, {"id": "Exercise_3", "title": "Exercise"}], "slug": "Web/API/WebGL_API/WebGL_model_view_projection", "review_tags": []}