更新材质序列化代码 增加天空盒绘制

pull/610546/MERGE
ChenX 7 years ago
parent a216845d1b
commit 8c4872847c

9
package-lock.json generated

@ -12703,6 +12703,15 @@
"safe-buffer": "5.1.1"
}
},
"shader-loader": {
"version": "1.3.1",
"resolved": "http://registry.npm.taobao.org/shader-loader/download/shader-loader-1.3.1.tgz",
"integrity": "sha1-LYeAjAiL3Rcs5XdJC0HbTm8BU18=",
"dev": true,
"requires": {
"loader-utils": "1.1.0"
}
},
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

@ -42,6 +42,7 @@
"mobx-react-devtools": "^4.2.15",
"open-browser-webpack-plugin": "0.0.5",
"required-loader": "^1.3.16",
"shader-loader": "^1.3.1",
"source-map-loader": "^0.2.3",
"style-loader": "^0.19.1",
"ts-jest": "^22.0.0",

@ -1,10 +1,9 @@
import * as path from 'path';
import * as THREE from 'three';
import { begin } from 'xaop';
import { app } from '../ApplicationServices/Application';
import { Command } from '../Editor/CommandMachine';
import { Move } from '../Geometry/GeUtils';
import { RenderType } from '../GraphicsSystem/Enum';
export class DrawFloor implements Command
{
@ -129,6 +128,7 @@ export class DrawFloor implements Command
drawLight()
{
var bulbGeometry = new THREE.SphereGeometry(0.02, 16, 8);
// let bulbLight = new THREE.PointLight(0xffee88, 1.5, 100, 1);
let bulbLight = new THREE.PointLight(0x999999, 1.5, 100, 2);
let bulbMat = new THREE.MeshStandardMaterial({
@ -153,20 +153,20 @@ export class DrawFloor implements Command
var clock = new THREE.Clock();
// xaop.begin(app.m_Viewer, app.m_Viewer.StartRender, () =>
// {
// var time = Date.now() * 0.0005;
// var delta = clock.getDelta();
// bulbLight.position.z = Math.cos(time) * 0.75 + 1.25;
// app.m_Viewer.m_bNeedUpdate = true;
// })
begin(app.m_Viewer, app.m_Viewer.StartRender, () =>
{
var time = Date.now() * 0.0005;
var delta = clock.getDelta();
bulbLight.position.z = Math.cos(time) * 0.75 + 1.25;
app.m_Viewer.m_bNeedUpdate = true;
})
}
private drawHemiLight()
{
//0xddeeff 0x0f0e0d
var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.05);
hemiLight.intensity = 3;
hemiLight.visible = false;
// var hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.05);
var hemiLight = new THREE.HemisphereLight(0xddeeff, 0x0f0e0d, 0.05);
hemiLight.intensity = 23;
this.scene.add(hemiLight);
}

@ -0,0 +1,40 @@
import * as THREE from 'three';
import { app } from '../ApplicationServices/Application';
import { Command } from '../Editor/CommandMachine';
import { Sky } from './Sky';
export class DrawSky implements Command
{
async exec()
{
let sky = new Sky();
app.m_Viewer.m_Scene.add(sky);
sky.scale.setScalar(50);
sky.rotateY(Math.PI);
let mat = sky.material as THREE.ShaderMaterial;
mat.uniforms.sub
window["sky"] = sky;
}
async exec2()
{
let vertexShader = require("../glsl/sky.vs");
let fragmentShader = require("../glsl/sky.fs");
var uniforms = {
topColor: { value: new THREE.Color(0x0077ff) },
bottomColor: { value: new THREE.Color(0xffffff) },
offset: { value: 33 },
exponent: { value: 0.6 }
};
uniforms.topColor.value.copy(new THREE.Color(0.6, 1, 0.6));
var skyGeo = new THREE.SphereGeometry(40, 32, 15);
var skyMat = new THREE.ShaderMaterial({ vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide });
var sky = new THREE.Mesh(skyGeo, skyMat);
app.m_Viewer.m_Scene.add(sky);
}
}

@ -0,0 +1,237 @@
import * as THREE from "three";
/**
* @author zz85 / https://github.com/zz85
*
* Based on "A Practical Analytic Model for Daylight"
* aka The Preetham Model, the de facto standard analytic skydome model
* http://www.cs.utah.edu/~shirley/papers/sunsky/sunsky.pdf
*
* First implemented by Simon Wallner
* http://www.simonwallner.at/projects/atmospheric-scattering
*
* Improved by Martin Upitis
* http://blenderartists.org/forum/showthread.php?245954-preethams-sky-impementation-HDR
*
* Three.js integration by zz85 http://twitter.com/blurspline
*/
export class Sky extends THREE.Mesh
{
constructor()
{
super();
this.geometry = new THREE.SphereBufferGeometry(1, 32, 15);
this.material = new THREE.ShaderMaterial({
fragmentShader: SkyShader.fragmentShader,
vertexShader: SkyShader.vertexShader,
uniforms: THREE.UniformsUtils.clone(SkyShader.uniforms),
side: THREE.BackSide
})
this.material.needsUpdate = true;
}
get Uniforms()
{
let mat = this.material as THREE.ShaderMaterial;
return mat.uniforms as SkyUniforms;
}
}
const SkyShader =
{
uniforms: {
luminance: { value: 1 },
turbidity: { value: 2 },
rayleigh: { value: 1 },
mieCoefficient: { value: 0.005 },
mieDirectionalG: { value: 0.8 },
sunPosition: { value: new THREE.Vector3(0, 50, 20) }
},
vertexShader: [
'uniform vec3 sunPosition;',
'uniform float rayleigh;',
'uniform float turbidity;',
'uniform float mieCoefficient;',
'varying vec3 vWorldPosition;',
'varying vec3 vSunDirection;',
'varying float vSunfade;',
'varying vec3 vBetaR;',
'varying vec3 vBetaM;',
'varying float vSunE;',
'const vec3 up = vec3( 0.0, 0.0, 1.0 );',
// constants for atmospheric scattering
'const float e = 2.71828182845904523536028747135266249775724709369995957;',
'const float pi = 3.141592653589793238462643383279502884197169;',
// wavelength of used primaries, according to preetham
'const vec3 lambda = vec3( 680E-9, 550E-9, 450E-9 );',
// this pre-calcuation replaces older TotalRayleigh(vec3 lambda) function:
// (8.0 * pow(pi, 3.0) * pow(pow(n, 2.0) - 1.0, 2.0) * (6.0 + 3.0 * pn)) / (3.0 * N * pow(lambda, vec3(4.0)) * (6.0 - 7.0 * pn))
'const vec3 totalRayleigh = vec3( 5.804542996261093E-6, 1.3562911419845635E-5, 3.0265902468824876E-5 );',
// mie stuff
// K coefficient for the primaries
'const float v = 4.0;',
'const vec3 K = vec3( 0.686, 0.678, 0.666 );',
// MieConst = pi * pow( ( 2.0 * pi ) / lambda, vec3( v - 2.0 ) ) * K
'const vec3 MieConst = vec3( 1.8399918514433978E14, 2.7798023919660528E14, 4.0790479543861094E14 );',
// earth shadow hack
// cutoffAngle = pi / 1.95;
'const float cutoffAngle = 1.6110731556870734;',
'const float steepness = 1.5;',
'const float EE = 1000.0;',
'float sunIntensity( float zenithAngleCos ) {',
' zenithAngleCos = clamp( zenithAngleCos, -1.0, 1.0 );',
' return EE * max( 0.0, 1.0 - pow( e, -( ( cutoffAngle - acos( zenithAngleCos ) ) / steepness ) ) );',
'}',
'vec3 totalMie( float T ) {',
' float c = ( 0.2 * T ) * 10E-18;',
' return 0.434 * c * MieConst;',
'}',
'void main() {',
' vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',
' vWorldPosition = worldPosition.xyz;',
' gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );',
' vSunDirection = normalize( sunPosition );',
' vSunE = sunIntensity( dot( vSunDirection, up ) );',
' vSunfade = 1.0 - clamp( 1.0 - exp( ( sunPosition.y / 450000.0 ) ), 0.0, 1.0 );',
' float rayleighCoefficient = rayleigh - ( 1.0 * ( 1.0 - vSunfade ) );',
// extinction (absorbtion + out scattering)
// rayleigh coefficients
' vBetaR = totalRayleigh * rayleighCoefficient;',
// mie coefficients
' vBetaM = totalMie( turbidity ) * mieCoefficient;',
'}'
].join('\n'),
fragmentShader: [
'varying vec3 vWorldPosition;',
'varying vec3 vSunDirection;',
'varying float vSunfade;',
'varying vec3 vBetaR;',
'varying vec3 vBetaM;',
'varying float vSunE;',
'uniform float luminance;',
'uniform float mieDirectionalG;',
'const vec3 cameraPos = vec3( 0.0, 0.0, 0.0 );',
// constants for atmospheric scattering
'const float pi = 3.141592653589793238462643383279502884197169;',
'const float n = 1.0003;', // refractive index of air
'const float N = 2.545E25;', // number of molecules per unit volume for air at
// 288.15K and 1013mb (sea level -45 celsius)
// optical length at zenith for molecules
'const float rayleighZenithLength = 8.4E3;',
'const float mieZenithLength = 1.25E3;',
'const vec3 up = vec3( 0.0, 0.0, 1.0 );',
// 66 arc seconds -> degrees, and the cosine of that
'const float sunAngularDiameterCos = 0.999956676946448443553574619906976478926848692873900859324;',
// 3.0 / ( 16.0 * pi )
'const float THREE_OVER_SIXTEENPI = 0.05968310365946075;',
// 1.0 / ( 4.0 * pi )
'const float ONE_OVER_FOURPI = 0.07957747154594767;',
'float rayleighPhase( float cosTheta ) {',
' return THREE_OVER_SIXTEENPI * ( 1.0 + pow( cosTheta, 2.0 ) );',
'}',
'float hgPhase( float cosTheta, float g ) {',
' float g2 = pow( g, 2.0 );',
' float inverse = 1.0 / pow( 1.0 - 2.0 * g * cosTheta + g2, 1.5 );',
' return ONE_OVER_FOURPI * ( ( 1.0 - g2 ) * inverse );',
'}',
// Filmic ToneMapping http://filmicgames.com/archives/75
'const float A = 0.15;',
'const float B = 0.50;',
'const float C = 0.10;',
'const float D = 0.20;',
'const float E = 0.02;',
'const float F = 0.30;',
'const float whiteScale = 1.0748724675633854;', // 1.0 / Uncharted2Tonemap(1000.0)
'vec3 Uncharted2Tonemap( vec3 x ) {',
' return ( ( x * ( A * x + C * B ) + D * E ) / ( x * ( A * x + B ) + D * F ) ) - E / F;',
'}',
'void main() {',
// optical length
// cutoff angle at 90 to avoid singularity in next formula.
' float zenithAngle = acos( max( 0.0, dot( up, normalize( vWorldPosition - cameraPos ) ) ) );',
' float inverse = 1.0 / ( cos( zenithAngle ) + 0.15 * pow( 93.885 - ( ( zenithAngle * 180.0 ) / pi ), -1.253 ) );',
' float sR = rayleighZenithLength * inverse;',
' float sM = mieZenithLength * inverse;',
// combined extinction factor
' vec3 Fex = exp( -( vBetaR * sR + vBetaM * sM ) );',
// in scattering
' float cosTheta = dot( normalize( vWorldPosition - cameraPos ), vSunDirection );',
' float rPhase = rayleighPhase( cosTheta * 0.5 + 0.5 );',
' vec3 betaRTheta = vBetaR * rPhase;',
' float mPhase = hgPhase( cosTheta, mieDirectionalG );',
' vec3 betaMTheta = vBetaM * mPhase;',
' vec3 Lin = pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * ( 1.0 - Fex ), vec3( 1.5 ) );',
' Lin *= mix( vec3( 1.0 ), pow( vSunE * ( ( betaRTheta + betaMTheta ) / ( vBetaR + vBetaM ) ) * Fex, vec3( 1.0 / 2.0 ) ), clamp( pow( 1.0 - dot( up, vSunDirection ), 5.0 ), 0.0, 1.0 ) );',
// nightsky
' vec3 direction = normalize( vWorldPosition - cameraPos );',
' float theta = acos( direction.y ); // elevation --> y-axis, [-pi/2, pi/2]',
' float phi = atan( direction.z, direction.x ); // azimuth --> x-axis [-pi/2, pi/2]',
' vec2 uv = vec2( phi, theta ) / vec2( 2.0 * pi, pi ) + vec2( 0.5, 0.0 );',
' vec3 L0 = vec3( 0.1 ) * Fex;',
// composition + solar disc
' float sundisk = smoothstep( sunAngularDiameterCos, sunAngularDiameterCos + 0.00002, cosTheta );',
' L0 += ( vSunE * 19000.0 * Fex ) * sundisk;',
' vec3 texColor = ( Lin + L0 ) * 0.04 + vec3( 0.0, 0.0003, 0.00075 );',
' vec3 curr = Uncharted2Tonemap( ( log2( 2.0 / pow( luminance, 4.0 ) ) ) * texColor );',
' vec3 color = curr * whiteScale;',
' vec3 retColor = pow( color, vec3( 1.0 / ( 1.2 + ( 1.2 * vSunfade ) ) ) );',
' gl_FragColor = vec4( retColor, 1.0 );',
'}'
].join('\n')
};
type SkyUniforms = {
luminance: { value: 1 },
turbidity: { value: 2 },
rayleigh: { value: 1 },
mieCoefficient: { value: 0.005 },
mieDirectionalG: { value: 0.8 },
sunPosition: { value: THREE.Vector3 }
}

@ -1,6 +1,7 @@
import { CADFactory } from './CADFactory';
import { CADObject } from './CADObject';
import { Database } from './Database';
import { ObjectId } from './ObjectId';
/**
* CAD
@ -76,7 +77,10 @@ export class CADFile
Write(data: any)
{
this.dataList.push(data);
if (data instanceof ObjectId)
this.dataList.push(data.Index);
else
this.dataList.push(data);
}
Read(): any
{

@ -50,6 +50,7 @@ export class Database
file.Write(this.idCout);
file.WriteObject(this.ModelSpace);
file.WriteObject(this.MaterialDict);
file.WriteObject(this.TextureTableCol);
this.hm.WriteFile(file);
return file;
}
@ -60,6 +61,7 @@ export class Database
this.idCout = file.Read();
file.ReadObject(this, this.ModelSpace);
file.ReadObject(this, this.MaterialDict);
file.ReadObject(this, this.TextureTableCol);
this.hm.ReadFile(file);
}

@ -1,11 +1,12 @@
import { autorun, observable } from 'mobx';
import * as THREE from 'three';
import * as xaop from 'xaop';
import { Factory } from './CADFactory';
import { CADFile } from './CADFile';
import { Material } from './Material';
import { ObjectId } from './ObjectId';
import { DbTexture } from './Texture';
import { autorun, observable } from 'mobx';
import * as xaop from 'xaop';
/**
* ,,db.three.material
@ -34,6 +35,7 @@ export class DbPhysicalMaterial extends Material
constructor()
{
super();
//TODO: 优化代码触发方式
autorun(() =>
{
this.name;
@ -79,4 +81,46 @@ export class DbPhysicalMaterial extends Material
}
return this.material;
}
//#region -------------------------File-------------------------
//对象应该实现dataIn和DataOut的方法,为了对象的序列化和反序列化
//对象从文件中读取数据,初始化自身
ReadFile(file: CADFile)
{
super.ReadFile(file);
let ver = file.Read();
this.name = file.Read();
this.color = file.Read();
this.transparent = file.Read();
this.matalness = file.Read();
this.opacity = file.Read();
this.depthTest = file.Read();
this.map = this.ReadObjectId(file);
this.bumpMap = this.ReadObjectId(file);
this.bumpScale = file.Read();
this.roughnessMap = this.ReadObjectId(file);
this.roughness = file.Read();
}
//对象将自身数据写入到文件.
WriteFile(file: CADFile)
{
super.WriteFile(file);
file.Write(1);
file.Write(this.name);
file.Write(this.color);
file.Write(this.transparent);
file.Write(this.matalness);
file.Write(this.opacity);
file.Write(this.depthTest);
this.WriteObjectId(file, this.map);
this.WriteObjectId(file, this.bumpMap);
file.Write(this.bumpScale);
this.WriteObjectId(file, this.roughnessMap);
file.Write(this.roughness);
}
//#endregion
}

@ -1,8 +1,9 @@
import { observable, autorun } from 'mobx';
import { autorun, observable } from 'mobx';
import * as THREE from 'three';
import { loaderImageFromMd5 } from '../Loader/ImageLoader';
import { Factory } from './CADFactory';
import { CADFile } from './CADFile';
import { CADObject } from './CADObject';
/**
@ -27,6 +28,7 @@ export class DbTexture extends CADObject
constructor()
{
super();
//TODO: 优化代码 这里会造成重复的调用
autorun(() =>
{
this.wrapS;
@ -54,4 +56,37 @@ export class DbTexture extends CADObject
{
return this.texture;
}
//#region -------------------------File-------------------------
//对象应该实现dataIn和DataOut的方法,为了对象的序列化和反序列化
//对象从文件中读取数据,初始化自身
ReadFile(file: CADFile)
{
super.ReadFile(file);
let ver = file.Read();
this.name = file.Read();
this.wrapS = file.Read();
this.wrapT = file.Read();
this.repeatX = file.Read();
this.repeatY = file.Read();
this.rotate = file.Read();
this.imageMd5 = file.Read();
}
//对象将自身数据写入到文件.
WriteFile(file: CADFile)
{
super.WriteFile(file);
file.Write(1);
file.Write(this.name);
file.Write(this.wrapS);
file.Write(this.wrapT);
file.Write(this.repeatX);
file.Write(this.repeatY);
file.Write(this.rotate);
file.Write(this.imageMd5);
}
//#endregion
}

@ -1,8 +1,9 @@
// import { Command_DrawBoard } from '../Add-on/DrawBoard';
import { DrawFloor } from '../Add-on/DrawFloor';
import { Union } from '../Add-on/CSGUnion';
import { DrawFloor } from '../Add-on/DrawFloor';
import { DrawGripStretch } from '../Add-on/DrawGripStretch';
import { DrawCircle, DrawLine, DrawRect, DrawSphere, DrawTest, ZoomE } from '../Add-on/DrawLine';
import { DrawSky } from '../Add-on/DrawSky';
import { DrawCircle0 } from '../Add-on/DrawZeroCircle';
import { Entsel } from '../Add-on/Entsel';
import { Command_Erase } from '../Add-on/Erase';
@ -68,6 +69,8 @@ export function registerCommand()
commandMachine.RegisterCommand("loadf", new LoadImg());
commandMachine.RegisterCommand("sky", new DrawSky());
// commandMachine.RegisterCommand("st", new SaveTarget())
// commandMachine.RegisterCommand("rt", new RevTarget())
}

@ -33,9 +33,9 @@ export class CameraControl
constructor()
{
this.m_CameraArray.set(THREE.OrthographicCamera, new THREE.OrthographicCamera(-2, 2, 2, -2,
-100, 100));
-1000, 1000));
this.m_CameraArray.set(THREE.PerspectiveCamera, new THREE.PerspectiveCamera(50, 1, 0.1, 100));
this.m_CameraArray.set(THREE.PerspectiveCamera, new THREE.PerspectiveCamera(50, 1, 0.1, 1000));
this.m_CurCamera = this.m_CameraArray.get(THREE.OrthographicCamera);

@ -5,8 +5,7 @@ var ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
function getpath(fileName)
{
function getpath(fileName) {
return path.resolve(__dirname, fileName);
}
module.exports = {
@ -46,8 +45,14 @@ module.exports = {
module: {
loaders: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" },
{ test: /\.[(png)|(jpg)|(obj)]$/, loader: "file-loader" },
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
{
test: /\.[(png)|(jpg)|(obj)]$/,
loader: "file-loader"
},
//样式加载 css
{
test: /\.css$/,
@ -59,22 +64,20 @@ module.exports = {
//样式加载 less
{
test: /\.less$/,
use:
[
{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader", options:
{
strictMath: true,
noIeCompat: true
}
use: [{
loader: "style-loader"
},
{
loader: "css-loader"
},
{
loader: "less-loader",
options: {
strictMath: true,
noIeCompat: true
}
]
}
]
},
//字体加载 blueprint
{
@ -98,6 +101,15 @@ module.exports = {
}
}
},
{
test: /\.(glsl|vs|fs)$/,
loader: 'shader-loader',
options: {
glsl: {
// chunkPath: resolve("/glsl/chunks")
}
}
}
]
},
// Other options...
@ -107,18 +119,19 @@ module.exports = {
hot: false
},
plugins: [
new HtmlWebPackPlugin(
{
title: "webCAD",
template: 'index.html'
}),
new HtmlWebPackPlugin({
title: "webCAD",
template: 'index.html'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.DllReferencePlugin({
context: '.',
manifest: require(getpath("./manifest.json"))
}),
new AddAssetHtmlPlugin({ filepath: getpath("./dist/dll.js") }),
new AddAssetHtmlPlugin({
filepath: getpath("./dist/dll.js")
}),
// new ExtractTextPlugin({ filename: 'styles.css' }),
new webpack.ProvidePlugin({
$: "jquery",

Loading…
Cancel
Save