Home Manual Reference Source 
import S3System from 's3js/src/basic/S3System.js'
public class | source

S3System

3DCGシステム全体を管理するクラス

3DCGのための座標変換やシーン管理、基本的な生成処理・ユーティリティ関数などをまとめて提供します。 頂点やメッシュ、マテリアルなど各種オブジェクトのファクトリ機能も持ちます。

Static Method Summary

Static Public Methods
public static

calcAspect(width: number, height: number): number

アスペクト比を計算します。
public static

視体積の上下方向の視野角を求めます。

Constructor Summary

Public Constructor
public

S3Systemインスタンスを作成します。 描画モードや背景色などを初期化します。

Member Summary

Public Members
public

背景色（RGBAベクトル）
public

canvas: HTMLCanvasElement

描画に使うcanvas要素
public

context2d: {"context": *, "drawLine": *, "drawLinePolygon": *, "setLineWidth": *, "setLineColor": *, "clear": *}

2D描画用のユーティリティオブジェクト（drawLine, drawLinePolygonなど）
public

カリングモード（面の非表示除去方法）
public

深度バッファのモード（OpenGL/DirectX）
public

座標系モード（右手系/左手系）
public

前面判定の面の向き（時計回り/反時計回り）
public

現在のシステムモード（OpenGL/DirectX）
public

ベクトル型のモード（VECTOR4x1 / VECTOR1x4）
Private Members
private

内部で一意なIDを発行するためのカウンタ配列

Method Summary

Public Methods
public

clear()

2Dキャンバスの内容をクリアします。
public

新しいカメラインスタンスを生成します。
public

新しいライトインスタンスを生成します。
public

新しいマテリアルインスタンスを生成します。
public

新しいメッシュインスタンスを生成します。
public

新しいモデルインスタンスを生成します。
public

新しいシーンインスタンスを生成します。
public

createTexture(name: string | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): S3Texture

新しいテクスチャインスタンスを生成します。
public

createTriangleIndex(i1: number, i2: number, i3: number, indexlist: Array<number>, materialIndex: number, uvlist: Array<S3Vector>): S3TriangleIndex

新しい三角形インデックスインスタンスを生成します。
public

新しい頂点インスタンスを生成します。
public

drawAxis(scene: S3Scene)

X, Y, Zの座標軸を描画します（デバッグ用）。
public

drawScene(scene: S3Scene)

シーン全体を描画します。
public

背景色を取得します。
public

単位行列を生成します。
public

カメラのビュー行列を生成します。
public

getMatrixPerspectiveFov(fovY: number, Aspect: number, Near: number, Far: number): S3Matrix

視野角（FOVY）から射影行列を生成します。
public

X軸周りの回転行列を生成します。
public

Y軸周りの回転行列を生成します。
public

Z軸周りの回転行列を生成します。
public

航空機の姿勢制御 ZXY（ロール・ピッチ・ヨー）の順で回転行列を作成します。
public

拡大縮小行列を生成します。
public

平行移動行列を生成します。
public

getMatrixViewport(x: number, y: number, Width: number, Height: number, MinZ: number, MaxZ: number): S3Matrix

ビューポート行列を生成します。
public

指定モデルのワールド変換行列を生成します（スケール→回転→移動の順）。
public

縦型/横型を踏まえて2つの行列を掛けます。
public

縦型/横型を踏まえて行列とベクトルを掛けます。
public

背景色を設定します。
public

setCanvas(canvas: HTMLCanvasElement)

描画に使うCanvasを関連付け、2D描画用Contextを内部にセットします。
public

setCullMode(cullmode: number)

カリング（非表示面除去）の方法を設定します。
public

setDepthMode(depthmode: number)

深度（Z値の扱い）のモードを設定します。
public

setDimensionMode(dimensionmode: number)

座標系（右手/左手系）を設定します。
public

setFrontMode(frontface: number)

前面と判定する面の頂点順序（時計回り/反時計回り）を設定します。
public

システムモードを設定します（OpenGL/DIRECT_Xなど）。 各種描画パラメータも合わせて設定されます。
public

setVectorMode(vectormode: number)

ベクトル表現のモードを設定します（縦型/横型）。
public

三角形がカリング対象かどうか判定します。
Private Methods
private

頂点リストをMVP変換・射影して新しい頂点配列を返します。
private

ユニークなID文字列を発行します（テクスチャなどの管理用途）。
private

_disposeObject(obj: Object): void

不要になったリソースを解放します（未実装）。
private

_download(url: string, callback: function)

画像やテキストファイルをダウンロードします。 画像拡張子ならImage要素、それ以外はテキストとして取得しコールバックします。
private

_drawPolygon(vetexlist: Array<S3Vertex>, triangleindexlist: Array<S3TriangleIndex>)

ポリゴン（三角形群）を描画します（ラインで表示）。
private

_init()

内部状態を初期化します（描画モードや背景色のリセット）。
private

_toValue(x: *): number

任意の値を数値に変換します。
private

任意の値をS3Vectorに変換します。

Static Public Methods

public static calcAspect(width: number, height: number): number source

アスペクト比を計算します。

Params:

NameTypeAttributeDescription
width number

幅
height number

高さ

Return:

number

アスペクト比

public static calcFovY(zoomY: number): number source

視体積の上下方向の視野角を求めます。

Params:

NameTypeAttributeDescription
zoomY number

Return:

number

Public Constructors

public constructor() source

S3Systemインスタンスを作成します。 描画モードや背景色などを初期化します。

Public Members

public backgroundColor: S3Vector source

背景色（RGBAベクトル）

public canvas: HTMLCanvasElement source

描画に使うcanvas要素

public context2d: {"context": *, "drawLine": *, "drawLinePolygon": *, "setLineWidth": *, "setLineColor": *, "clear": *} source

2D描画用のユーティリティオブジェクト（drawLine, drawLinePolygonなど）

Properties:

NameTypeAttributeDescription
context CanvasRenderingContext2D

2D描画コンテキスト
drawLine function(prm1: S3Vector, prm2: S3Vector): void

2点間の直線を描画
drawLinePolygon function(prm1: S3Vector, prm2: S3Vector, prm3: S3Vector): void

3点から三角形（線のみ）を描画
setLineWidth function(prm1: number): void

線の太さを設定
setLineColor function(prm1: string): void

線の色を設定
clear function(prm1: ): void

キャンバス全体を背景色で塗りつぶし

public cullmode: number source

カリングモード（面の非表示除去方法）

See:

public depthmode: number source

深度バッファのモード（OpenGL/DirectX）

See:

public dimensionmode: number source

座標系モード（右手系/左手系）

See:

public frontface: number source

前面判定の面の向き（時計回り/反時計回り）

See:

public systemmode: number source

現在のシステムモード（OpenGL/DirectX）

See:

public vectormode: number source

ベクトル型のモード（VECTOR4x1 / VECTOR1x4）

See:

Private Members

private _CREATE_ID: number[] source

内部で一意なIDを発行するためのカウンタ配列

Public Methods

public clear() source

2Dキャンバスの内容をクリアします。

public createCamera(): S3Camera source

新しいカメラインスタンスを生成します。

Return:

S3Camera

生成されたカメラ

public createLight(): S3Light source

新しいライトインスタンスを生成します。

Return:

S3Light

生成されたライト

public createMaterial(name: string): S3Material source

新しいマテリアルインスタンスを生成します。

Params:

NameTypeAttributeDescription
name string
  • optional

マテリアル名

Return:

S3Material

生成されたマテリアル

public createMesh(): S3Mesh source

新しいメッシュインスタンスを生成します。

Return:

S3Mesh

生成されたメッシュ

public createModel(): S3Model source

新しいモデルインスタンスを生成します。

Return:

S3Model

生成されたモデル

public createScene(): S3Scene source

新しいシーンインスタンスを生成します。

Return:

S3Scene

生成されたシーン

public createTexture(name: string | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): S3Texture source

新しいテクスチャインスタンスを生成します。

Params:

NameTypeAttributeDescription
name string | ImageData | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement
  • optional

テクスチャ名や画像データ

Return:

S3Texture

生成されたテクスチャ

public createTriangleIndex(i1: number, i2: number, i3: number, indexlist: Array<number>, materialIndex: number, uvlist: Array<S3Vector>): S3TriangleIndex source

新しい三角形インデックスインスタンスを生成します。

Params:

NameTypeAttributeDescription
i1 number

頂点1のインデックス
i2 number

頂点2のインデックス
i3 number

頂点3のインデックス
indexlist Array<number>

頂点インデックス配列
materialIndex number
  • optional

マテリアルインデックス
uvlist Array<S3Vector>
  • optional

UV座標配列

Return:

S3TriangleIndex

生成された三角形インデックス

public createVertex(position: S3Vector): S3Vertex source

新しい頂点インスタンスを生成します。

Params:

NameTypeAttributeDescription
position S3Vector

頂点座標

Return:

S3Vertex

生成された頂点

public drawAxis(scene: S3Scene) source

X, Y, Zの座標軸を描画します（デバッグ用）。

Params:

NameTypeAttributeDescription
scene S3Scene

対象シーン

public drawScene(scene: S3Scene) source

シーン全体を描画します。

Params:

NameTypeAttributeDescription
scene S3Scene

描画対象のシーン

public getBackgroundColor(): S3Vector source

背景色を取得します。

Return:

S3Vector

現在の背景色（RGBA）

public getMatrixIdentity(): S3Matrix source

単位行列を生成します。

Return:

S3Matrix

単位行列

public getMatrixLookAt(eye: S3Vector, at: S3Vector, up: S3Vector): S3Matrix source

カメラのビュー行列を生成します。

Params:

NameTypeAttributeDescription
eye S3Vector

カメラの座標の位置ベクトル
at S3Vector

カメラの注視点の位置ベクトル
up S3Vector
  • optional

カメラの上への方向ベクトル

Return:

S3Matrix

ビュー行列

public getMatrixPerspectiveFov(fovY: number, Aspect: number, Near: number, Far: number): S3Matrix source

視野角（FOVY）から射影行列を生成します。

Params:

NameTypeAttributeDescription
fovY number

視体積の上下方向の視野角（0度から180度）
Aspect number

近平面、遠平面のアスペクト比（Width / Height）
Near number

カメラから近平面までの距離（ニアークリッピング平面）
Far number

カメラから遠平面までの距離（ファークリッピング平面）

Return:

S3Matrix

射影変換行列

public getMatrixRotateX(degree: number): S3Matrix source

X軸周りの回転行列を生成します。

Params:

NameTypeAttributeDescription
degree number

角度（度）

Return:

S3Matrix

回転行列

public getMatrixRotateY(degree: number): S3Matrix source

Y軸周りの回転行列を生成します。

Params:

NameTypeAttributeDescription
degree number

角度（度）

Return:

S3Matrix

回転行列

public getMatrixRotateZ(degree: number): S3Matrix source

Z軸周りの回転行列を生成します。

Params:

NameTypeAttributeDescription
degree number

角度（度）

Return:

S3Matrix

回転行列

public getMatrixRotateZXY(z: number, x: number, y: number): S3Matrix source

航空機の姿勢制御 ZXY（ロール・ピッチ・ヨー）の順で回転行列を作成します。

Params:

NameTypeAttributeDescription
z number

ロール角（Z）
x number

ピッチ角（X）
y number

ヨー角（Y）

Return:

S3Matrix

合成回転行列

public getMatrixScale(x: number, y: number, z: number): S3Matrix source

拡大縮小行列を生成します。

Params:

NameTypeAttributeDescription
x number

X方向スケール
y number

Y方向スケール
z number

Z方向スケール

Return:

S3Matrix

スケーリング行列

public getMatrixTranslate(x: number, y: number, z: number): S3Matrix source

平行移動行列を生成します。

Params:

NameTypeAttributeDescription
x number

X移動量
y number

Y移動量
z number

Z移動量

Return:

S3Matrix

平行移動行列

public getMatrixViewport(x: number, y: number, Width: number, Height: number, MinZ: number, MaxZ: number): S3Matrix source

ビューポート行列を生成します。

Params:

NameTypeAttributeDescription
x number

左上X
y number

左上Y
Width number

幅
Height number

高さ
MinZ number
  • optional
  • default: 0.0

最小深度
MaxZ number
  • optional
  • default: 1.0

最大深度

Return:

S3Matrix

ビューポート変換行列

public getMatrixWorldTransform(model: S3Model): S3Matrix source

指定モデルのワールド変換行列を生成します（スケール→回転→移動の順）。

Params:

NameTypeAttributeDescription
model S3Model

対象モデル

Return:

S3Matrix

ワールド変換行列

public mulMatrix(A: S3Matrix, B: S3Matrix): S3Matrix source

縦型/横型を踏まえて2つの行列を掛けます。

Params:

NameTypeAttributeDescription
A S3Matrix
B S3Matrix

Return:

S3Matrix

計算結果

public mulVector(A: S3Matrix, B: S3Vector): S3Vector source

縦型/横型を踏まえて行列とベクトルを掛けます。

Params:

NameTypeAttributeDescription
A S3Matrix
B S3Vector

Return:

S3Vector

計算結果

public setBackgroundColor(color: S3Vector) source

背景色を設定します。

Params:

NameTypeAttributeDescription
color S3Vector

RGBAで指定する背景色

public setCanvas(canvas: HTMLCanvasElement) source

描画に使うCanvasを関連付け、2D描画用Contextを内部にセットします。

Params:

NameTypeAttributeDescription
canvas HTMLCanvasElement

使用するcanvas要素

public setCullMode(cullmode: number) source

カリング（非表示面除去）の方法を設定します。

Params:

NameTypeAttributeDescription
cullmode number

S3System.CULL_MODE

public setDepthMode(depthmode: number) source

深度（Z値の扱い）のモードを設定します。

Params:

NameTypeAttributeDescription
depthmode number

S3System.DEPTH_MODE

public setDimensionMode(dimensionmode: number) source

座標系（右手/左手系）を設定します。

Params:

NameTypeAttributeDescription
dimensionmode number

S3System.DIMENSION_MODE

public setFrontMode(frontface: number) source

前面と判定する面の頂点順序（時計回り/反時計回り）を設定します。

Params:

NameTypeAttributeDescription
frontface number

S3System.FRONT_FACE

public setSystemMode(mode: number) source

システムモードを設定します（OpenGL/DIRECT_Xなど）。 各種描画パラメータも合わせて設定されます。

Params:

NameTypeAttributeDescription
mode number

S3System.SYSTEM_MODE で定義される値

public setVectorMode(vectormode: number) source

ベクトル表現のモードを設定します（縦型/横型）。

Params:

NameTypeAttributeDescription
vectormode number

S3System.VECTOR_MODE

public testCull(p1: S3Vector, p2: S3Vector, p3: S3Vector): boolean source

三角形がカリング対象かどうか判定します。

Params:

NameTypeAttributeDescription
p1 S3Vector

頂点1
p2 S3Vector

頂点2
p3 S3Vector

頂点3

Return:

boolean

trueの場合は描画しない

Private Methods

private _calcVertexTransformation(vertexlist: Array<S3Vertex>, MVP: S3Matrix, Viewport: S3Matrix): Array<S3Vertex> source

頂点リストをMVP変換・射影して新しい頂点配列を返します。

Params:

NameTypeAttributeDescription
vertexlist Array<S3Vertex>

変換対象の頂点配列
MVP S3Matrix

モデル・ビュー・射影行列
Viewport S3Matrix

ビューポート変換行列

Return:

Array<S3Vertex>

変換後の頂点配列

private _createID(): string source

ユニークなID文字列を発行します（テクスチャなどの管理用途）。

Return:

string

新しいID文字列

private _disposeObject(obj: Object): void source

不要になったリソースを解放します（未実装）。

Params:

NameTypeAttributeDescription
obj Object

解放対象のオブジェクト

Return:

void

private _download(url: string, callback: function) source

画像やテキストファイルをダウンロードします。 画像拡張子ならImage要素、それ以外はテキストとして取得しコールバックします。

Params:

NameTypeAttributeDescription
url string

取得先URL
callback function

取得完了時に呼ばれるコールバック関数

private _drawPolygon(vetexlist: Array<S3Vertex>, triangleindexlist: Array<S3TriangleIndex>) source

ポリゴン（三角形群）を描画します（ラインで表示）。

Params:

NameTypeAttributeDescription
vetexlist Array<S3Vertex>

頂点配列
triangleindexlist Array<S3TriangleIndex>

インデックス配列

private _init() source

内部状態を初期化します（描画モードや背景色のリセット）。

private _toValue(x: *): number source

任意の値を数値に変換します。

Params:

NameTypeAttributeDescription
x *

変換対象

Return:

number

数値

private _toVector3(x: S3Vector | Array<number> | number): S3Vector source

任意の値をS3Vectorに変換します。

Params:

NameTypeAttributeDescription
x S3Vector | Array<number> | number

変換対象

Return:

S3Vector

ベクトル化した値