/home/lindsay/xeolabs/xeogl-next/xeogl/src/camera/frustum.js
API Docs for:

File: /home/lindsay/xeolabs/xeogl-next/xeogl/src/camera/frustum.js

  1. /**
  2. A **Frustum** defines a perspective projection as a frustum-shaped view volume for a {{#crossLink "Camera"}}Camera{{/crossLink}}.
  3.  
  4. ## Overview
  5.  
  6. * A {{#crossLink "Camera"}}Camera{{/crossLink}} has a Frustum to configure its frustum-based perspective projection mode.
  7. * A Frustum lets us explicitly set the positions of the left, right, top, bottom, near and far planes, which is useful
  8. for asymmetrical view volumes, such as those used for stereo viewing.
  9. * A Frustum's {{#crossLink "Frustum/near:property"}}{{/crossLink}} and {{#crossLink "Frustum/far:property"}}{{/crossLink}} properties
  10. specify the distances to the WebGL clipping planes.
  11.  
  12. ## Examples
  13.  
  14. * [Camera with frustum projection](../../examples/#camera_frustum)
  15. * [Stereo viewing with frustum projection](../../examples/#effects_stereo)
  16.  
  17. ## Usage
  18.  
  19. * See {{#crossLink "Camera"}}{{/crossLink}}
  20.  
  21. @class Frustum
  22. @module xeogl
  23. @submodule camera
  24. @constructor
  25. @param [owner] {Component} Owner component. When destroyed, the owner will destroy this component as well. Creates this component within the default {{#crossLink "Scene"}}{{/crossLink}} when omitted.
  26. @param [cfg] {*} Configs
  27. @param [cfg.id] {String} Optional ID, unique among all components in the parent scene, generated automatically when omitted.
  28. @param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to this Frustum.
  29. @param [cfg.left=-1] {Number} Position of the Frustum's left plane on the View-space X-axis.
  30. @param [cfg.right=1] {Number} Position of the Frustum's right plane on the View-space X-axis.
  31. @param [cfg.bottom=-1] {Number} Position of the Frustum's bottom plane on the View-space Y-axis.
  32. @param [cfg.top=1] {Number} Position of the Frustum's top plane on the View-space Y-axis.
  33. @param [cfg.near=0.1] {Number} Position of the Frustum's near plane on the View-space Z-axis.
  34. @param [cfg.far=1000] {Number} Position of the Frustum's far plane on the positive View-space Z-axis.
  35. @extends Component
  36. */
  37. import {Component} from '../component.js';
  38. import {State} from '../renderer/state.js';
  39. import {math} from '../math/math.js';
  40. import {componentClasses} from "./../componentClasses.js";
  41.  
  42. const type = "xeogl.Frustum";
  43.  
  44. class Frustum extends Component {
  45.  
  46. /**
  47. JavaScript class name for this Component.
  48.  
  49. For example: "xeogl.AmbientLight", "xeogl.MetallicMaterial" etc.
  50.  
  51. @property type
  52. @type String
  53. @final
  54. */
  55. get type() {
  56. return type;
  57. }
  58.  
  59. init(cfg) {
  60.  
  61. super.init(cfg);
  62.  
  63. this._state = new State({
  64. matrix: math.mat4()
  65. });
  66.  
  67. this._left = -1.0;
  68. this._right = 1.0;
  69. this._bottom = -1.0;
  70. this._top = 1.0;
  71. this._near = 0.1;
  72. this._far = 5000.0;
  73.  
  74. // Set component properties
  75.  
  76. this.left = cfg.left;
  77. this.right = cfg.right;
  78. this.bottom = cfg.bottom;
  79. this.top = cfg.top;
  80. this.near = cfg.near;
  81. this.far = cfg.far;
  82. }
  83.  
  84. _update() {
  85. math.frustumMat4(this._left, this._right, this._bottom, this._top, this._near, this._far, this._state.matrix);
  86. this._renderer.imageDirty();
  87. this.fire("matrix", this._state.matrix);
  88. }
  89.  
  90. /**
  91. Position of this Frustum's left plane on the View-space X-axis.
  92.  
  93. Fires a {{#crossLink "Frustum/left:event"}}{{/crossLink}} event on change.
  94.  
  95. @property left
  96. @default -1.0
  97. @type Number
  98. */
  99.  
  100. set left(value) {
  101. this._left = (value !== undefined && value !== null) ? value : -1.0;
  102. this._needUpdate();
  103. /**
  104. Fired whenever this Frustum's {{#crossLink "Frustum/left:property"}}{{/crossLink}} property changes.
  105.  
  106. @event left
  107. @param value The property's new value
  108. */
  109. this.fire("left", this._left);
  110. }
  111.  
  112. get left() {
  113. return this._left;
  114. }
  115.  
  116. /**
  117. Position of this Frustum's right plane on the View-space X-axis.
  118.  
  119. Fires a {{#crossLink "Frustum/right:event"}}{{/crossLink}} event on change.
  120.  
  121. @property right
  122. @default 1.0
  123. @type Number
  124. */
  125. set right(value) {
  126. this._right = (value !== undefined && value !== null) ? value : 1.0;
  127. this._needUpdate();
  128. /**
  129. Fired whenever this Frustum's {{#crossLink "Frustum/right:property"}}{{/crossLink}} property changes.
  130.  
  131. @event right
  132. @param value The property's new value
  133. */
  134. this.fire("right", this._right);
  135. }
  136.  
  137. get right() {
  138. return this._right;
  139. }
  140.  
  141. /**
  142. Position of this Frustum's top plane on the View-space Y-axis.
  143.  
  144. Fires a {{#crossLink "Frustum/top:event"}}{{/crossLink}} event on change.
  145.  
  146. @property top
  147. @default 1.0
  148. @type Number
  149. */
  150. set top(value) {
  151. this._top = (value !== undefined && value !== null) ? value : 1.0;
  152. this._needUpdate();
  153. /**
  154. Fired whenever this Frustum's {{#crossLink "Frustum/top:property"}}{{/crossLink}} property changes.
  155.  
  156. @event top
  157. @param value The property's new value
  158. */
  159. this.fire("top", this._top);
  160. }
  161.  
  162. get top() {
  163. return this._top;
  164. }
  165.  
  166. /**
  167. Position of this Frustum's bottom plane on the View-space Y-axis.
  168.  
  169. Fires a {{#crossLink "Frustum/bottom:event"}}{{/crossLink}} event on change.
  170.  
  171. @property bottom
  172. @default -1.0
  173. @type Number
  174. */
  175. set bottom(value) {
  176. this._bottom = (value !== undefined && value !== null) ? value : -1.0;
  177. this._needUpdate();
  178. /**
  179. Fired whenever this Frustum's {{#crossLink "Frustum/bottom:property"}}{{/crossLink}} property changes.
  180.  
  181. @event bottom
  182. @param value The property's new value
  183. */
  184. this.fire("bottom", this._bottom);
  185. }
  186.  
  187. get bottom() {
  188. return this._bottom;
  189. }
  190.  
  191. /**
  192. Position of this Frustum's near plane on the positive View-space Z-axis.
  193.  
  194. Fires a {{#crossLink "Frustum/near:event"}}{{/crossLink}} event on change.
  195.  
  196. @property near
  197. @default 0.1
  198. @type Number
  199. */
  200. set near(value) {
  201. this._near = (value !== undefined && value !== null) ? value : 0.1;
  202. this._needUpdate();
  203. /**
  204. Fired whenever this Frustum's {{#crossLink "Frustum/near:property"}}{{/crossLink}} property changes.
  205.  
  206. @event near
  207. @param value The property's new value
  208. */
  209. this.fire("near", this._near);
  210. }
  211.  
  212. get near() {
  213. return this._near;
  214. }
  215.  
  216. /**
  217. Position of this Frustum's far plane on the positive View-space Z-axis.
  218.  
  219. Fires a {{#crossLink "Frustum/far:event"}}{{/crossLink}} event on change.
  220.  
  221. @property far
  222. @default 10000.0
  223. @type Number
  224. */
  225. set far(value) {
  226. this._far = (value !== undefined && value !== null) ? value : 10000.0;
  227. this._needUpdate();
  228. /**
  229. Fired whenever this Frustum's {{#crossLink "Frustum/far:property"}}{{/crossLink}} property changes.
  230.  
  231. @event far
  232. @param value The property's new value
  233. */
  234. this.fire("far", this._far);
  235. }
  236.  
  237. get far() {
  238. return this._far;
  239. }
  240.  
  241. /**
  242. The Frustum's projection transform matrix.
  243.  
  244. Fires a {{#crossLink "Frustum/matrix:event"}}{{/crossLink}} event on change.
  245.  
  246. @property matrix
  247. @default [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]
  248. @type {Float32Array}
  249. */
  250. get matrix() {
  251. if (this._updateScheduled) {
  252. this._doUpdate();
  253. }
  254. return this._state.matrix;
  255. }
  256.  
  257. destroy() {
  258. super.destroy();
  259. this._state.destroy();
  260. super.destroy();
  261. }
  262. }
  263.  
  264. componentClasses[type] = Frustum;
  265.  
  266. export{Frustum};