mirror of
https://github.com/Doodle3D/Doodle3D-Slicer.git
synced 2024-11-23 14:07:57 +01:00
332 lines
14 KiB
HTML
332 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<script src="../../list.js"></script>
|
||
|
|
<script src="../../page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="../../page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<div class="desc">The WebGL renderer displays your beautifully crafted scenes using WebGL, if your device supports it.</div>
|
||
|
|
<div class="desc">This renderer has way better performance than [page:CanvasRenderer].</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Constructor</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[name]( [page:Object parameters] )</h3>
|
||
|
|
|
||
|
|
<div>parameters is an optional object with properties defining the renderer's behaviour. The constructor also accepts no parameters at all. In all cases, it will assume sane defaults when parameters are missing.</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
canvas — A [page:Canvas] where the renderer draws its output.<br />
|
||
|
|
precision — shader precision. Can be *"highp"*, *"mediump"* or *"lowp"*.<br />
|
||
|
|
alpha — [page:Boolean], default is *false*.<br />
|
||
|
|
premultipliedAlpha — [page:Boolean], default is *true*.<br />
|
||
|
|
antialias — [page:Boolean], default is *false*.<br />
|
||
|
|
stencil — [page:Boolean], default is *true*.<br />
|
||
|
|
preserveDrawingBuffer — [page:Boolean], default is *false*.<br />
|
||
|
|
maxLights — [page:Integer], default is *4*.<br />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Properties</h2>
|
||
|
|
|
||
|
|
<h3>[property:DOMElement domElement]</h3>
|
||
|
|
|
||
|
|
<div>A [page:Canvas] where the renderer draws its output.<br />
|
||
|
|
This is automatically created by the renderer in the constructor (if not provided already); you just need to add it to your page.</div>
|
||
|
|
|
||
|
|
<h3>[property:WebGLRenderingContext context]</h3>
|
||
|
|
|
||
|
|
<div>The HTML5 Canvas's 'webgl' context obtained from the canvas where the renderer will draw.</div>
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoClear]</h3>
|
||
|
|
|
||
|
|
<div>Defines whether the renderer should automatically clear its output before rendering.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoClearColor]</h3>
|
||
|
|
|
||
|
|
<div>If autoClear is true, defines whether the renderer should clear the color buffer. Default is true.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoClearDepth]</h3>
|
||
|
|
|
||
|
|
<div>If autoClear is true, defines whether the renderer should clear the depth buffer. Default is true.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoClearStencil]</h3>
|
||
|
|
|
||
|
|
<div>If autoClear is true, defines whether the renderer should clear the stencil buffer. Default is true.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean sortObjects]</h3>
|
||
|
|
|
||
|
|
<div>Defines whether the renderer should sort objects. Default is true.</div>
|
||
|
|
|
||
|
|
<div>Note: Sorting is used to attempt to properly render objects that have some degree of transparency. By definition, sorting objects may not work in all cases. Depending on the needs of application, it may be neccessary to turn off sorting and use other methods to deal with transparency rendering e.g. manually determining the object rendering order.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoUpdateObjects]</h3>
|
||
|
|
|
||
|
|
<div>Defines whether the renderer should auto update objects. Default is true.</div>
|
||
|
|
|
||
|
|
<h3>[property:Boolean gammaInput]</h3>
|
||
|
|
|
||
|
|
<div>Default is false. If set, then it expects that all textures and colors are premultiplied gamma.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean gammaOutput]</h3>
|
||
|
|
|
||
|
|
<div>Default is false. If set, then it expects that all textures and colors need to be outputted in premultiplied gamma.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean shadowMapEnabled]</h3>
|
||
|
|
|
||
|
|
<div>Default is false. If set, use shadow maps in the scene.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Integer shadowMapType]</h3>
|
||
|
|
|
||
|
|
<div>Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader)</div>
|
||
|
|
<div>Options are THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap. Default is THREE.PCFShadowMap.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Integer shadowMapCullFace]</h3>
|
||
|
|
|
||
|
|
<div>Default is THREE.CullFaceFront. The faces that needed to be culled. Possible values: THREE.CullFaceFront and THREE.CullFaceBack</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[page:Boolean shadowMapDebug]</h3>
|
||
|
|
|
||
|
|
<div>Default is false. If set, then the shadowmaps get a specific color to identify which shadow is from which shadowmap.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean shadowMapCascade]</h3>
|
||
|
|
|
||
|
|
<div>Default is false. If Set, use cascaded shadowmaps. See [link:http://developer.download.nvidia.com/SDK/10.5/opengl/src/cascaded_shadow_maps/doc/cascaded_shadow_maps.pdf cascaded shadowmaps] for more information.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Integer maxMorphTargets]</h3>
|
||
|
|
|
||
|
|
<div>Default is 8. The maximum number of MorphTargets allowed in a shader. Keep in mind that the standard materials only allow 8 MorphTargets.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Integer maxMorphNormals]</h3>
|
||
|
|
|
||
|
|
<div>Default is 4. The maximum number of MorphNormals allowed in a shader. Keep in mind that the standard materials only allow 4 MorphNormals. </div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Boolean autoScaleCubemaps]</h3>
|
||
|
|
|
||
|
|
<div>Default is true. If set, then Cubemaps are scaled, when they are bigger than the maximum size, to make sure that they aren't bigger than the maximum size.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[property:Object info]</h3>
|
||
|
|
|
||
|
|
<div>An object with a series of statistical information about the graphics board memory and the rendering process. Useful for debugging or just for the sake of curiosity. The object contains the following fields:</div>
|
||
|
|
<div>
|
||
|
|
<ul>
|
||
|
|
<li>memory:
|
||
|
|
<ul>
|
||
|
|
<li>programs</li>
|
||
|
|
<li>geometries</li>
|
||
|
|
<li>textures</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li>render:
|
||
|
|
<ul>
|
||
|
|
<li>calls</li>
|
||
|
|
<li>vertices</li>
|
||
|
|
<li>faces</li>
|
||
|
|
<li>points</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[property:ShadowMapPlugin shadowMapPlugin]</h3>
|
||
|
|
<div>
|
||
|
|
This contains the reference to the shadowMapPlugin.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Methods</h2>
|
||
|
|
|
||
|
|
<h3>[method:WebGLRenderingContext getContext]()</h3>
|
||
|
|
<div>
|
||
|
|
Return the WebGL context.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:Boolean supportsVertexTextures]()</h3>
|
||
|
|
<div>
|
||
|
|
Return a [page:Boolean] true if the context supports vertex textures.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null setSize]( [page:Integer width], [page:Integer height] )</h3>
|
||
|
|
<div>Resizes the output canvas to (width, height), and also sets the viewport to fit that size, starting in (0, 0).</div>
|
||
|
|
|
||
|
|
<h3>[method:null setViewport]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
|
||
|
|
<div>Sets the viewport to render from (x, y) to (x + width, y + height).</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null setScissor]( [page:Integer x], [page:Integer y], [page:Integer width], [page:Integer height] )</h3>
|
||
|
|
<div>Sets the scissor area from (x, y) to (x + width, y + height).</div>
|
||
|
|
|
||
|
|
<h3>[method:null enableScissorTest]( [page:Boolean enable] )</h3>
|
||
|
|
<div>Enable the scissor test. When this is enabled, only the pixels within the defined scissor area will be affected by further renderer actions.</div>
|
||
|
|
|
||
|
|
<h3>[method:null setClearColor]( [page:Color color], [page:Float alpha] )</h3>
|
||
|
|
<div>Sets the clear color and opacity.</div>
|
||
|
|
|
||
|
|
<code>// Creates a renderer with red background
|
||
|
|
var renderer = new THREE.WebGLRenderer();
|
||
|
|
renderer.setSize( 200, 100 );
|
||
|
|
renderer.setClearColor( 0xff0000 );
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h3>[method:Color getClearColor]()</h3>
|
||
|
|
<div>Returns a [page:Color THREE.Color] instance with the current clear color.</div>
|
||
|
|
|
||
|
|
<h3>[method:Float getClearAlpha]()</h3>
|
||
|
|
<div>Returns a [page:Float float] with the current clear alpha. Ranges from 0 to 1.</div>
|
||
|
|
|
||
|
|
<h3>[method:null clear]( [page:Boolean color], [page:Boolean depth], [page:Boolean stencil] )</h3>
|
||
|
|
<div>Tells the renderer to clear its color, depth or stencil drawing buffer(s).</div>
|
||
|
|
<div>Arguments default to true.</div>
|
||
|
|
|
||
|
|
<h3>[method:null renderBufferImmediate]( [page:Object3D object], [page:shaderprogram program], [page:Material shading] )</h3>
|
||
|
|
<div>object — an instance of [page:Object3D]]<br />
|
||
|
|
program — an instance of shaderProgram<br />
|
||
|
|
shading — an instance of Material<br />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
Render an immediate buffer. Gets called by renderImmediateObject.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null renderBufferDirect]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
|
||
|
|
<div>Render a buffer geometry group using the camera and with the correct material.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null renderBuffer]( [page:Camera camera], [page:Array lights], [page:Fog fog], [page:Material material], [page:Object geometryGroup], [page:Object3D object] )</h3>
|
||
|
|
<div>Render a geometry group using the camera and with the correct material.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null render]( [page:Scene scene], [page:Camera camera], [page:WebGLRenderTarget renderTarget], [page:Boolean forceClear] )</h3>
|
||
|
|
<div>Render a scene using a camera.</div>
|
||
|
|
<div>The render is done to the renderTarget (if specified) or to the canvas as usual.</div>
|
||
|
|
<div>If forceClear is true, the depth, stencil and color buffers will be cleared before rendering even if the renderer's autoClear property is false.</div>
|
||
|
|
<div>Even with forceClear set to true you can prevent certain buffers being cleared by setting either the .autoClearColor, .autoClearStencil or .autoClearDepth properties to false.</div>
|
||
|
|
|
||
|
|
<h3>[method:null renderImmediateObject]( camera, lights, fog, material, object )</h3>
|
||
|
|
<div>Renders an immediate Object using a camera.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null setFaceCulling]( cullFace, frontFace )</h3>
|
||
|
|
<div>
|
||
|
|
[page:String cullFace] —- "back", "front", "front_and_back", or false.<br />
|
||
|
|
[page:String frontFace] —- "ccw" or "cw<br />
|
||
|
|
</div>
|
||
|
|
<div>Used for setting the gl frontFace, cullFace states in the GPU, thus enabling/disabling face culling when rendering.</div>
|
||
|
|
<div>If cullFace is false, culling will be disabled.</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null setDepthTest]( [page:boolean depthTest] )</h3>
|
||
|
|
<div>
|
||
|
|
depthTest -- The boolean to decide if depth of a fragment needs to be tested against the depth buffer . <br />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This sets, based on depthTest, whether or not the depth data needs to be tested against the depth buffer.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:null setDepthWrite]( [page:boolean depthWrite] )</h3>
|
||
|
|
<div>
|
||
|
|
depthWrite -- The boolean to decide if depth of a fragment needs to be kept. <br />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This sets, based on depthWrite, whether or not the depth data needs to be written in the depth buffer.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>[method:null setBlending]( [page:number blending], [page:number blendEquation], [page:number blendSrc], [page:number blendDst] )</h3>
|
||
|
|
<div>
|
||
|
|
blending -- A number indicating the blending mode. Possible value are THREE.NoBlending, THREE.NormalBlending, THREE.AdditiveBlending, THREE.SubtractiveBlending, THREE.MultiplyBlending or THREE.CustomBlending <br />
|
||
|
|
blendEquation -- When blending is THREE.CustomBlending, then you can set the blendEquation. Possible values are THREE.AddEquation, THREE.SubtractEquation or THREE.ReverseSubtractEquation.<br />
|
||
|
|
blendSrc -- When blending is THREE.CustomBlending, then you can set the blendSrc. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor<br />
|
||
|
|
blendDst -- When blending is THREE.CustomBlending, then you can set the blendDst. Possible values are THREE.ZeroFactor, THREE.OneFactor,THREE.SrcColorFactor, THREE.OneMinusSrcColorFactor, THREE.SrcAlphaFactor, THREE.OneMinusSrcAlphaFactor, THREE.DstAlphaFactor, THREE.OneMinusDstAlphaFactor, THREE.DstColorFactor,THREE.OneMinusDstColorFactor or THREE.SrcAlphaSaturateFactor
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This method sets the correct blending.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:null setTexture]( [page:Texture texture], [page:number slot] )</h3>
|
||
|
|
<div>
|
||
|
|
texture -- The [page:Texture texture] that needs to be set.<br />
|
||
|
|
slot -- The number indicating which slot should be used by the texture.
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This method sets the correct texture to the correct slot for the wegl shader. The slot number can be found as a value of the uniform of the sampler.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:null setRenderTarget]( [page:WebGLRenderTarget renderTarget] )</h3>
|
||
|
|
<div>
|
||
|
|
renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be activated.<br />
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This method sets the active rendertarget.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:boolean supportsCompressedTextureS3TC]()</h3>
|
||
|
|
<div>
|
||
|
|
This method returns true if the webgl implementation supports compressed textures of the format S3TC.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:number getMaxAnisotropy]()</h3>
|
||
|
|
<div>
|
||
|
|
This returns the anisotropy level of the textures.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:string getPrecision]()</h3>
|
||
|
|
<div>
|
||
|
|
This gets the precision used by the shaders. It returns "highp","mediump" or "lowp".
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:null setMaterialFaces]([page:Material material])</h3>
|
||
|
|
<div>
|
||
|
|
material -- The [page:Material material] with side that shouldn't be culled.
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This sets which side needs to be culled in the webgl renderer.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:boolean supportsStandardDerivatives]()</h3>
|
||
|
|
<div>
|
||
|
|
This method returns true if the webgl implementation supports standard derivatives.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:boolean supportsFloatTextures]()</h3>
|
||
|
|
<div>
|
||
|
|
This method returns true if the webgl implementation supports float textures.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>[method:null clearTarget]([page:WebGLRenderTarget renderTarget], [page:boolean color], [page:boolean depth], [page:boolean stencil])</h3>
|
||
|
|
<div>
|
||
|
|
renderTarget -- The [page:WebGLRenderTarget renderTarget] that needs to be cleared.<br />
|
||
|
|
color -- If set, then the color gets cleared. <br />
|
||
|
|
depth -- If set, then the depth gets cleared. <br />
|
||
|
|
stencil -- If set, then the stencil gets cleared.
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
This method clears a rendertarget. To do this, it activates the rendertarget.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</body>
|
||
|
|
</html>
|