553 lines
14 KiB
JavaScript
553 lines
14 KiB
JavaScript
/**
|
|
* R3.Renderer.D3
|
|
* @param graphics R3.GraphicsRuntime
|
|
* @param apiRendererD3 R3.API.Renderer.D3
|
|
* @constructor
|
|
*/
|
|
R3.Renderer.D3 = function (
|
|
graphics,
|
|
apiRendererD3
|
|
) {
|
|
this.graphics = graphics;
|
|
this.graphics.isNotThreeThrow();
|
|
|
|
if (R3.Utils.UndefinedOrNull(apiRendererD3)) {
|
|
apiRendererD3 = {
|
|
rendererType : R3.API.Renderer.RENDERER_TYPE_3D
|
|
};
|
|
}
|
|
|
|
R3.API.Renderer.D3.call(
|
|
this,
|
|
apiRendererD3,
|
|
apiRendererD3.renderMode,
|
|
apiRendererD3.autoClear,
|
|
apiRendererD3.autoClearColor,
|
|
apiRendererD3.autoClearDepth,
|
|
apiRendererD3.autoClearStencil,
|
|
apiRendererD3.gammaFactor,
|
|
apiRendererD3.gammaInput,
|
|
apiRendererD3.gammaOutput,
|
|
apiRendererD3.maxMorphTargets,
|
|
apiRendererD3.maxMorphNormals,
|
|
apiRendererD3.physicallyCorrectLights,
|
|
apiRendererD3.shadowMapEnabled,
|
|
apiRendererD3.shadowMapAutoUpdate,
|
|
apiRendererD3.shadowMapNeedsUpdate,
|
|
apiRendererD3.shadowMapType,
|
|
apiRendererD3.shadowMapRenderReverseSided,
|
|
apiRendererD3.shadowMapRenderSingleSided,
|
|
apiRendererD3.sortObjects,
|
|
apiRendererD3.toneMapping,
|
|
apiRendererD3.toneMappingExposure,
|
|
apiRendererD3.toneMappingWhitePoint,
|
|
apiRendererD3.premultipliedAlpha,
|
|
apiRendererD3.antialias,
|
|
apiRendererD3.stencil,
|
|
apiRendererD3.preserveDrawingBuffer,
|
|
apiRendererD3.depth,
|
|
apiRendererD3.logarithmicDepthBuffer,
|
|
apiRendererD3.localClippingEnabled,
|
|
apiRendererD3.renderTarget,
|
|
apiRendererD3.clippingPlanes,
|
|
apiRendererD3.clearColor,
|
|
apiRendererD3.viewports,
|
|
apiRendererD3.alpha,
|
|
apiRendererD3.opacity
|
|
);
|
|
|
|
if (this.renderTarget instanceof R3.D3.API.RenderTarget) {
|
|
this.renderTarget = new R3.D3.RenderTarget(
|
|
this.graphics,
|
|
this.renderTarget
|
|
)
|
|
}
|
|
|
|
this.clippingPlanes = this.clippingPlanes.map(function(clippingPlane){
|
|
if (clippingPlane instanceof R3.API.Plane) {
|
|
return new R3.Plane(
|
|
this.graphics,
|
|
clippingPlane
|
|
);
|
|
} else {
|
|
return clippingPlane;
|
|
}
|
|
}.bind(this));
|
|
|
|
this.clearColor = new R3.Color(
|
|
this.graphics,
|
|
this.clearColor,
|
|
this
|
|
);
|
|
|
|
this.viewports = this.viewports.map(function(viewport){
|
|
if (viewport instanceof R3.D3.API.Viewport) {
|
|
return new R3.D3.Viewport(
|
|
this.graphics,
|
|
viewport
|
|
);
|
|
} else {
|
|
return viewport;
|
|
}
|
|
}.bind(this));
|
|
|
|
R3.Renderer.call(
|
|
this,
|
|
this.graphics,
|
|
this
|
|
);
|
|
|
|
};
|
|
|
|
R3.Renderer.D3.prototype = Object.create(R3.Renderer.prototype);
|
|
R3.Renderer.D3.prototype.constructor = R3.Renderer.D3;
|
|
|
|
/**
|
|
* Create R3.Renderer.D3 Instance
|
|
* @returns {*}
|
|
*/
|
|
R3.Renderer.D3.prototype.createInstance = function() {
|
|
|
|
if (
|
|
R3.Utils.UndefinedOrNull(this.canvas) ||
|
|
R3.Utils.UndefinedOrNull(this.canvas.instance)
|
|
) {
|
|
console.warn('no canvas instance');
|
|
return;
|
|
}
|
|
|
|
this.instance = new THREE.WebGLRenderer(
|
|
{
|
|
canvas : this.canvas.instance,
|
|
alpha : this.alpha,
|
|
premultipliedAlpha : this.premultipliedAlpha,
|
|
antialias : this.antialias,
|
|
stencil : this.stencil,
|
|
preserveDrawingBuffer : this.preserveDrawingBuffer,
|
|
depth : this.depth,
|
|
logarithmicDepthBuffer : this.logarithmicDepthBuffer
|
|
}
|
|
);
|
|
|
|
this.instance.setPixelRatio(window.devicePixelRatio);
|
|
|
|
this.updateInstance('width');
|
|
|
|
this.instance.autoClear = this.autoClear;
|
|
this.instance.autoClearColor = this.autoClearColor;
|
|
this.instance.autoClearDepth = this.autoClearDepth;
|
|
this.instance.autoClearStencil = this.autoClearStencil;
|
|
|
|
this.instance.gammaFactor = this.gammaFactor;
|
|
this.instance.gammaInput = this.gammaInput;
|
|
this.instance.gammaOutput = this.gammaOutput;
|
|
|
|
this.instance.maxMorphTargets = this.maxMorphTargets;
|
|
this.instance.maxMorphNormals = this.maxMorphNormals;
|
|
|
|
this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
|
|
|
|
this.instance.shadowMap.enabled = this.shadowMapEnabled;
|
|
this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
|
|
this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
|
|
this.instance.shadowMap.type = this.shadowMapType;
|
|
this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
|
|
this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
|
|
|
|
this.instance.sortObjects = this.sortObjects;
|
|
|
|
this.instance.toneMapping = this.toneMapping;
|
|
this.instance.toneMappingExposure = this.toneMappingExposure;
|
|
this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
|
|
|
|
this.instance.premultipliedAlpha = this.premultipliedAlpha;
|
|
|
|
this.instance.localClippingEnabled = this.localClippingEnabled;
|
|
|
|
if (this.renderTarget) {
|
|
this.instance.setRenderTarget(this.renderTarget.instance);
|
|
}
|
|
|
|
if (this.clippingPlanes.length > 0) {
|
|
this.instance.clippingPlanes = this.clippingPlanes.map(
|
|
function(clippingPlane) {
|
|
return clippingPlane.instance;
|
|
}
|
|
)
|
|
}
|
|
|
|
this.instance.setClearColor(
|
|
new THREE.Color(
|
|
this.clearColor.r,
|
|
this.clearColor.g,
|
|
this.clearColor.b
|
|
),
|
|
this.opacity
|
|
);
|
|
|
|
R3.Renderer.prototype.createInstance.call(this);
|
|
};
|
|
|
|
/**
|
|
* Update Renderer.D3 Instance
|
|
*/
|
|
R3.Renderer.D3.prototype.updateInstance = function(property) {
|
|
|
|
if (!property) {
|
|
throw new Error('no renderer property');
|
|
}
|
|
|
|
if (!this.instance) {
|
|
throw new Error('no renderer instance');
|
|
}
|
|
|
|
if (
|
|
property === 'width' ||
|
|
property === 'height'
|
|
) {
|
|
var size = R3.Utils.GetWindowSize();
|
|
this.instance.setSize(size.width, size.height, false);
|
|
return;
|
|
}
|
|
|
|
if (property === 'renderMode') {
|
|
console.log('render mode change');
|
|
return;
|
|
}
|
|
|
|
if (property === 'autoClear') {
|
|
this.instance.autoClear = this.autoClear;
|
|
return;
|
|
}
|
|
|
|
if (property === 'autoClearColor') {
|
|
this.instance.autoClearColor = this.autoClearColor;
|
|
return;
|
|
}
|
|
|
|
if (property === 'autoClearDepth') {
|
|
this.instance.autoClearDepth = this.autoClearDepth;
|
|
return;
|
|
}
|
|
|
|
if (property === 'autoClearStencil') {
|
|
this.instance.autoClearStencil = this.autoClearStencil;
|
|
return;
|
|
}
|
|
|
|
if (property === 'gammaFactor') {
|
|
this.instance.gammaFactor = this.gammaFactor;
|
|
return;
|
|
}
|
|
|
|
if (property === 'gammaInput') {
|
|
this.instance.gammaInput = this.gammaInput;
|
|
return;
|
|
}
|
|
|
|
if (property === 'gammaOutput') {
|
|
this.instance.gammaOutput = this.gammaOutput;
|
|
return;
|
|
}
|
|
|
|
if (property === 'maxMorphTargets') {
|
|
this.instance.maxMorphTargets = this.maxMorphTargets;
|
|
return;
|
|
}
|
|
|
|
if (property === 'maxMorphNormals') {
|
|
this.instance.maxMorphNormals = this.maxMorphNormals;
|
|
return;
|
|
}
|
|
|
|
if (property === 'physicallyCorrectLights') {
|
|
this.instance.physicallyCorrectLights = this.physicallyCorrectLights;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapEnabled') {
|
|
this.instance.shadowMap.enabled = this.shadowMapEnabled;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapAutoUpdate') {
|
|
this.instance.shadowMap.autoUpdate = this.shadowMapAutoUpdate;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapNeedsUpdate') {
|
|
this.instance.shadowMap.needsUpdate = this.shadowMapNeedsUpdate;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapType') {
|
|
this.instance.shadowMap.type = this.shadowMapType;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapRenderReverseSided') {
|
|
this.instance.shadowMap.renderReverseSided = this.shadowMapRenderReverseSided;
|
|
return;
|
|
}
|
|
|
|
if (property === 'shadowMapRenderSingleSided') {
|
|
this.instance.shadowMap.renderSingleSided = this.shadowMapRenderSingleSided;
|
|
return;
|
|
}
|
|
|
|
if (property === 'sortObjects') {
|
|
this.instance.sortObjects = this.sortObjects;
|
|
return;
|
|
}
|
|
|
|
if (property === 'toneMapping') {
|
|
this.instance.toneMapping = this.toneMapping;
|
|
return;
|
|
}
|
|
|
|
if (property === 'toneMappingExposure') {
|
|
this.instance.toneMappingExposure = this.toneMappingExposure;
|
|
return;
|
|
}
|
|
|
|
if (property === 'toneMappingWhitePoint') {
|
|
this.instance.toneMappingWhitePoint = this.toneMappingWhitePoint;
|
|
return;
|
|
}
|
|
|
|
if (property === 'premultipliedAlpha') {
|
|
this.instance.premultipliedAlpha = this.premultipliedAlpha;
|
|
return;
|
|
}
|
|
|
|
if (property === 'premultipliedAlpha') {
|
|
this.instance.premultipliedAlpha = this.premultipliedAlpha;
|
|
return;
|
|
}
|
|
|
|
if (property === 'antialias') {
|
|
this.instance.antialias = this.antialias;
|
|
return;
|
|
}
|
|
|
|
if (property === 'stencil') {
|
|
this.instance.stencil = this.stencil;
|
|
return;
|
|
}
|
|
|
|
if (property === 'preserveDrawingBuffer') {
|
|
this.instance.preserveDrawingBuffer = this.preserveDrawingBuffer;
|
|
return;
|
|
}
|
|
|
|
if (property === 'depth') {
|
|
this.instance.depth = this.depth;
|
|
return;
|
|
}
|
|
|
|
if (property === 'logarithmicDepthBuffer') {
|
|
this.instance.logarithmicDepthBuffer = this.logarithmicDepthBuffer;
|
|
return;
|
|
}
|
|
|
|
if (property === 'localClippingEnabled') {
|
|
this.instance.localClippingEnabled = this.localClippingEnabled;
|
|
return;
|
|
}
|
|
|
|
if (property === 'canvas') {
|
|
|
|
if (R3.Utils.UndefinedOrNull(this.instance)) {
|
|
this.createInstance();
|
|
} else {
|
|
console.warn('experimental canvas change for renderer');
|
|
this.instance.dispose();
|
|
this.createInstance();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (property === 'renderTarget') {
|
|
|
|
if (
|
|
R3.Utils.Defined(this.instance) &&
|
|
R3.Utils.Defined(this.renderTarget) &&
|
|
R3.Utils.Defined(this.renderTarget.instance)
|
|
) {
|
|
this.instance.setRenderTarget(this.renderTarget.instance);
|
|
console.log('updated render target on render instance');
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
if (property === 'clippingPlanes') {
|
|
console.warn('todo: clipping planes change');
|
|
return;
|
|
}
|
|
|
|
if (
|
|
property === 'clearColor' ||
|
|
property === 'opacity'
|
|
) {
|
|
this.instance.setClearColor(
|
|
new THREE.Color(
|
|
this.clearColor.r,
|
|
this.clearColor.g,
|
|
this.clearColor.b
|
|
),
|
|
this.opacity
|
|
);
|
|
return;
|
|
}
|
|
|
|
if (property === 'viewports') {
|
|
console.warn('todo: viewports change');
|
|
}
|
|
|
|
if (property === 'alpha') {
|
|
this.instance.alpha = this.alpha;
|
|
return;
|
|
}
|
|
|
|
R3.Renderer.prototype.updateInstance.call(this, property);
|
|
};
|
|
|
|
/**
|
|
* Wrapper for clear()
|
|
*/
|
|
R3.Renderer.D3.prototype.clear = function() {
|
|
return this.instance.clear();
|
|
};
|
|
|
|
/**
|
|
* Convenience function to set size
|
|
* @param width
|
|
* @param height
|
|
*/
|
|
R3.Renderer.D3.prototype.setSize = function(width, height) {
|
|
|
|
this.instance.setSize(
|
|
this.width * width,
|
|
this.height * height,
|
|
false
|
|
);
|
|
|
|
//this.instance.setPixelRatio(window.devicePixelRatio);
|
|
};
|
|
|
|
/**
|
|
* Convenience function to get size
|
|
* @returns {{width, height}}
|
|
*/
|
|
R3.Renderer.D3.prototype.getSize = function() {
|
|
return this.instance.getSize();
|
|
};
|
|
|
|
/**
|
|
* Convenience function to set viewport
|
|
* @param x
|
|
* @param y
|
|
* @param width
|
|
* @param height
|
|
*/
|
|
R3.Renderer.D3.prototype.setViewport = function(
|
|
x,
|
|
y,
|
|
width,
|
|
height
|
|
) {
|
|
this.instance.setViewport(
|
|
x,
|
|
y,
|
|
width,
|
|
height
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Renders to this.renderTarget
|
|
* @param scene
|
|
* @param camera
|
|
*/
|
|
R3.Renderer.D3.prototype.renderToTarget = function(scene, camera) {
|
|
|
|
this.instance.render(
|
|
scene.instance,
|
|
camera.instance,
|
|
this.renderTarget.instance
|
|
);
|
|
|
|
};
|
|
|
|
/**
|
|
* Renders normally
|
|
* @param scene
|
|
* @param camera
|
|
*/
|
|
R3.Renderer.D3.prototype.render = function(scene, camera) {
|
|
this.instance.render(
|
|
scene.instance,
|
|
camera.instance
|
|
)
|
|
};
|
|
|
|
|
|
/**
|
|
*
|
|
* @returns {R3.API.Renderer.D3}
|
|
*/
|
|
R3.Renderer.D3.prototype.toApiObject = function() {
|
|
|
|
var apiRenderer = R3.Renderer.prototype.toApiObject.call(this);
|
|
|
|
var apiRendererD3 = new R3.API.Renderer.D3(
|
|
apiRenderer,
|
|
this.renderMode,
|
|
this.autoClear,
|
|
this.autoClearColor,
|
|
this.autoClearDepth,
|
|
this.autoClearStencil,
|
|
this.gammaFactor,
|
|
this.gammaInput,
|
|
this.gammaOutput,
|
|
this.maxMorphTargets,
|
|
this.maxMorphNormals,
|
|
this.physicallyCorrectLights,
|
|
this.shadowMapEnabled,
|
|
this.shadowMapAutoUpdate,
|
|
this.shadowMapNeedsUpdate,
|
|
this.shadowMapType,
|
|
this.shadowMapRenderReverseSided,
|
|
this.shadowMapRenderSingleSided,
|
|
this.sortObjects,
|
|
this.toneMapping,
|
|
this.toneMappingExposure,
|
|
this.toneMappingWhitePoint,
|
|
this.premultipliedAlpha,
|
|
this.antialias,
|
|
this.stencil,
|
|
this.preserveDrawingBuffer,
|
|
this.depth,
|
|
this.logarithmicDepthBuffer,
|
|
this.localClippingEnabled,
|
|
R3.Utils.IdOrNull(this.renderTarget),
|
|
this.clippingPlanes.map(
|
|
function(clippingPlane){
|
|
return R3.Utils.IdOrNull(clippingPlane);
|
|
}
|
|
),
|
|
this.clearColor.toApiObject(),
|
|
this.viewports.map(
|
|
function(viewport){
|
|
return R3.Utils.IdOrNull(viewport);
|
|
}
|
|
),
|
|
this.alpha,
|
|
this.opacity
|
|
);
|
|
|
|
return apiRendererD3;
|
|
};
|