未验证 提交 ad767947 编写于 作者: M Mr.doob 提交者: GitHub

Merge pull request #17809 from mrdoob/softwarerenderer

Removed SoftwareRenderer
......@@ -46,7 +46,6 @@
<script src="../examples/js/renderers/Projector.js"></script>
<script src="../examples/js/renderers/RaytracingRenderer.js"></script>
<script src="../examples/js/renderers/SoftwareRenderer.js"></script>
<script src="../examples/js/renderers/SVGRenderer.js"></script>
<link rel="stylesheet" href="js/libs/codemirror/codemirror.css">
......
......@@ -12,7 +12,6 @@ Sidebar.Project = function ( editor ) {
'WebGLRenderer': THREE.WebGLRenderer,
'SVGRenderer': THREE.SVGRenderer,
'SoftwareRenderer': THREE.SoftwareRenderer,
'RaytracingRenderer': THREE.RaytracingRenderer
};
......
......@@ -38,7 +38,6 @@ const assets = [
'../examples/js/renderers/Projector.js',
'../examples/js/renderers/RaytracingRenderer.js',
'../examples/js/renderers/SoftwareRenderer.js',
'../examples/js/renderers/SVGRenderer.js',
'./manifest.json',
......
......@@ -378,11 +378,6 @@ var files = {
"raytracing": [
"raytracing_sandbox"
],
"software": [
"software_geometry_earth",
"software_lines_splines",
"software_sandbox"
],
"svg": [
"svg_lines",
"svg_sandbox"
......
此差异已折叠。
import {
Color,
Scene,
Camera
} from '../../../src/Three';
export class SoftwareRenderer {
constructor();
domElement: HTMLElement;
autoClear: boolean;
setClearColor( color: Color, alpha: number ): void;
setPixelRatio(): void;
setSize( width: number, height: number ): void;
clear(): void;
render( scene: Scene, camera: Camera ): void;
}
此差异已折叠。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js software - geometry - earth</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
a {
color: #08f;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - earth demo</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
var container, stats;
var camera, scene, renderer;
var group;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
group = new THREE.Group();
scene.add( group );
// earth
var loader = new THREE.TextureLoader();
loader.load( 'textures/land_ocean_ice_cloud_2048.jpg', function ( texture ) {
var geometry = new THREE.SphereBufferGeometry( 200, 20, 20 );
var material = new THREE.MeshLambertMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
group.add( mesh );
} );
// shadow
var canvas = document.createElement( 'canvas' );
canvas.width = 128;
canvas.height = 128;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient(
canvas.width / 2,
canvas.height / 2,
0,
canvas.width / 2,
canvas.height / 2,
canvas.width / 2
);
gradient.addColorStop( 0.1, 'rgba(210,210,210,1)' );
gradient.addColorStop( 1, 'rgba(255,255,255,1)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
var texture = new THREE.CanvasTexture( canvas );
var geometry = new THREE.PlaneBufferGeometry( 300, 300, 3, 3 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
var mesh = new THREE.Mesh( geometry, material );
mesh.position.y = - 250;
mesh.rotation.x = - Math.PI / 2;
group.add( mesh );
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
group.rotation.y -= 0.005;
renderer.render( scene, camera );
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js software - lines - splines</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - splines Software demo<br/>
<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
var mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth / 2,
windowHalfY = window.innerHeight / 2,
camera, scene, renderer;
init();
animate();
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 700;
scene = new THREE.Scene();
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var hilbertPoints = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var geometry1 = new THREE.BufferGeometry();
var geometry2 = new THREE.BufferGeometry();
var geometry3 = new THREE.BufferGeometry();
var subdivisions = 6;
var vertices = [];
var colors1 = [];
var colors2 = [];
var colors3 = [];
var point = new THREE.Vector3();
var color = new THREE.Color();
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );
vertices.push( point.x, point.y, point.z );
color.setHSL( 0.6, 1.0, Math.max( 0, - point.x / 200 ) + 0.5 );
colors1.push( color.r, color.g, color.b );
color.setHSL( 0.9, 1.0, Math.max( 0, - point.y / 200 ) + 0.5 );
colors2.push( color.r, color.g, color.b );
color.setHSL( i / ( hilbertPoints.length * subdivisions ), 1.0, 0.5 );
colors3.push( color.r, color.g, color.b );
}
geometry1.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry2.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry3.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry1.setAttribute( 'color', new THREE.Float32BufferAttribute( colors1, 3 ) );
geometry2.setAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3 ) );
geometry3.setAttribute( 'color', new THREE.Float32BufferAttribute( colors3, 3 ) );
// lines
var material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line, p, scale = 0.3, d = 225;
var parameters = [
[ material, scale * 1.5, [ - d, 0, 0 ], geometry1 ],
[ material, scale * 1.5, [ 0, 0, 0 ], geometry2 ],
[ material, scale * 1.5, [ d, 0, 0 ], geometry3 ]
];
for ( var i = 0; i < parameters.length; ++ i ) {
p = parameters[ i ];
line = new THREE.Line( p[ 3 ], p[ 0 ] );
line.scale.x = line.scale.y = line.scale.z = p[ 1 ];
line.position.x = p[ 2 ][ 0 ];
line.position.y = p[ 2 ][ 1 ];
line.position.z = p[ 2 ][ 2 ];
scene.add( line );
}
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;
}
function onDocumentTouchStart( event ) {
if ( event.touches.length > 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length == 1 ) {
event.preventDefault();
mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
camera.lookAt( scene.position );
var time = Date.now() * 0.0005;
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.Line ) {
object.rotation.y = time * ( i % 2 ? 1 : - 1 );
}
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js - software renderer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - software renderer<br />
drag to change the point of view
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
import { SoftwareRenderer } from './jsm/renderers/SoftwareRenderer.js';
import { GeometryUtils } from './jsm/utils/GeometryUtils.js';
var camera, controls, scene, renderer, stats;
var torus, cube, texCube;
var start = Date.now();
init();
animate();
function init() {
var container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 600;
scene = new THREE.Scene();
// Torus
var torusGeometry = new THREE.TorusKnotBufferGeometry( 150, 10 );
torusGeometry = torusGeometry.toNonIndexed();
var colors = [];
var color = new THREE.Color();
for ( var i = 0; i < torusGeometry.attributes.position.count; i ++ ) {
color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );
}
torusGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
torus = new THREE.Mesh( torusGeometry, new THREE.MeshBasicMaterial( { color: 0x0000ff, vertexColors: THREE.VertexColors } ) );
scene.add( torus );
// Cube
var boxGeometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
boxGeometry = boxGeometry.toNonIndexed();
colors = [];
for ( var i = 0; i < boxGeometry.attributes.position.count; i ++ ) {
color.setHex( Math.random() * 0xffffff );
colors.push( color.r, color.g, color.b );
}
boxGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
cube = new THREE.Mesh( boxGeometry, new THREE.MeshBasicMaterial( { color: 0x00ff00, vertexColors: THREE.VertexColors } ) );
scene.position.set( 100, 0, 0 );
scene.add( cube );
// Cube with texture
var loader = new THREE.TextureLoader();
var map = loader.load( 'textures/brick_diffuse.jpg' );
texCube = new THREE.Mesh( boxGeometry, new THREE.MeshLambertMaterial( { map: map } ) );
texCube.position.set( - 300, 0, 0 );
scene.add( texCube );
// THREE.Sprite
var sprite = new THREE.Sprite( new THREE.SpriteMaterial( { color: 0xff0040 } ) );
sprite.scale.set( 100, 100, 1 );
sprite.position.set( - 100, 200, 0 );
scene.add( sprite );
// THREE.Sprite with texture
var texLoader = new THREE.TextureLoader();
map = texLoader.load( 'textures/sprite1.png' );
var texSprite = new THREE.Sprite( new THREE.SpriteMaterial( { map: map, transparent: true } ) );
texSprite.scale.set( 100, 100, 1 );
texSprite.position.set( 100, 200, 0 );
scene.add( texSprite );
// THREE.Line
var hilbertPoints = GeometryUtils.hilbert3D( new THREE.Vector3( 0, 0, 0 ), 200.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );
var lineGeometry = new THREE.BufferGeometry();
var subdivisions = 6;
var vertices = [];
colors = [];
var point = new THREE.Vector3();
color.setHex( 0x88aaff );
var spline = new THREE.CatmullRomCurve3( hilbertPoints );
for ( var i = 0; i < hilbertPoints.length * subdivisions; i ++ ) {
var t = i / ( hilbertPoints.length * subdivisions );
spline.getPoint( t, point );
vertices.push( point.x, point.y, point.z );
colors.push( color.r, color.g, color.b );
}
lineGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
lineGeometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
var material = new THREE.LineBasicMaterial( { opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
var line = new THREE.Line( lineGeometry, material );
line.scale.set( 0.5, 0.5, 0.5 );
line.position.set( 0, - 200, 0 );
scene.add( line );
//
renderer = new SoftwareRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() - start;
torus.position.y = Math.sin( timer * 0.002 ) * 150;
torus.rotation.x = timer * 0.0003;
torus.rotation.z = timer * 0.0002;
cube.rotation.x = timer * 0.0002;
cube.rotation.z = timer * 0.0003;
texCube.rotation.x = timer * 0.0002;
texCube.rotation.z = timer * 0.0003;
controls.update();
renderer.render( scene, camera );
}
</script>
</body>
</html>
......@@ -175,7 +175,6 @@ var files = [
{ path: 'renderers/CSS3DRenderer.js', dependencies: [], ignoreList: [] },
{ path: 'renderers/Projector.js', dependencies: [], ignoreList: [] },
{ path: 'renderers/RaytracingRenderer.js', dependencies: [], ignoreList: [] },
{ path: 'renderers/SoftwareRenderer.js', dependencies: [ { name: 'Projector', path: 'renderers/Projector.js' }, { name: 'RenderableFace', path: 'renderers/Projector.js' }, { name: 'RenderableLine', path: 'renderers/Projector.js' }, { name: 'RenderableSprite', path: 'renderers/Projector.js' } ], ignoreList: [] },
{ path: 'renderers/SVGRenderer.js', dependencies: [ { name: 'Projector', path: 'renderers/Projector.js' }, { name: 'RenderableFace', path: 'renderers/Projector.js' }, { name: 'RenderableLine', path: 'renderers/Projector.js' }, { name: 'RenderableSprite', path: 'renderers/Projector.js' } ], ignoreList: [] },
{ path: 'renderers/WebGLDeferredRenderer.js', dependencies: [ { name: 'EffectComposer', path: 'postprocessing/EffectComposer.js' }, { name: 'ShaderPass', path: 'postprocessing/ShaderPass.js' }, { name: 'RenderPass', path: 'postprocessing/RenderPass.js' }, { name: 'FXAAShader', path: 'shaders/FXAAShader.js' }, { name: 'CopyShader', path: 'shaders/CopyShader.js' } ], ignoreList: [] },
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册