Skip to content
Snippets Groups Projects
Commit f34ce8eb authored by Alexander Rose's avatar Alexander Rose
Browse files

improved normals and transparency

parent 8ec1f63c
Branches
Tags
No related merge requests found
...@@ -40,8 +40,13 @@ export type ColorTheme = keyof typeof ColorTheme ...@@ -40,8 +40,13 @@ export type ColorTheme = keyof typeof ColorTheme
export default class State { export default class State {
viewer: Viewer viewer: Viewer
pdbId = '5ire' pdbId = ''
// pdbId = '5ire'
emdId = '8116' emdId = '8116'
// pdbId = '6G1K'
// emdId = '4339'
// pdbId = '4cup'
// emdId = ''
model = new BehaviorSubject<Model | undefined>(undefined) model = new BehaviorSubject<Model | undefined>(undefined)
volume = new BehaviorSubject<Volume | undefined>(undefined) volume = new BehaviorSubject<Volume | undefined>(undefined)
initialized = new BehaviorSubject<boolean>(false) initialized = new BehaviorSubject<boolean>(false)
...@@ -154,7 +159,10 @@ export default class State { ...@@ -154,7 +159,10 @@ export default class State {
if (this.surfaceRepr) this.viewer.remove(this.surfaceRepr) if (this.surfaceRepr) this.viewer.remove(this.surfaceRepr)
this.surfaceRepr = VolumeRepresentation(Surface) this.surfaceRepr = VolumeRepresentation(Surface)
await Run(this.surfaceRepr.create(v.volume, { isoValue: VolumeIsoValue.relative(v.volume.dataStats, 1.5) }), log, 500) await Run(this.surfaceRepr.create(v.volume, {
isoValue: VolumeIsoValue.relative(v.volume.dataStats, 3.0),
alpha: 0.3
}), log, 500)
viewer.add(this.surfaceRepr) viewer.add(this.surfaceRepr)
viewer.requestDraw() viewer.requestDraw()
......
...@@ -61,7 +61,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> { ...@@ -61,7 +61,7 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
position: mesh.vertexBuffer, position: mesh.vertexBuffer,
normal: mesh.normalBuffer, normal: mesh.normalBuffer,
id: ValueCell.create(fillSerial(new Float32Array(mesh.vertexCount / 3))), id: ValueCell.create(fillSerial(new Float32Array(mesh.vertexCount / 3))),
color: createUniformColor({ value: 0x999999 }), color: createUniformColor({ value: 0x7ec0ee }),
transform: ValueCell.create(new Float32Array(Mat4.identity())), transform: ValueCell.create(new Float32Array(Mat4.identity())),
index: mesh.indexBuffer, index: mesh.indexBuffer,
...@@ -70,7 +70,9 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> { ...@@ -70,7 +70,9 @@ export default function Surface(): VolumeElementRepresentation<SurfaceProps> {
elementCount: mesh.triangleCount, elementCount: mesh.triangleCount,
positionCount: mesh.vertexCount / 3, positionCount: mesh.vertexCount / 3,
flatShaded: true flatShaded: true,
doubleSided: true,
flipSided: true
}) })
renderObjects.push(surface) renderObjects.push(surface)
}) })
......
...@@ -29,8 +29,12 @@ export function transformPositionArray (t: Mat4, array: Helpers.NumberArray, off ...@@ -29,8 +29,12 @@ export function transformPositionArray (t: Mat4, array: Helpers.NumberArray, off
} }
} }
export function transformDirectionArray (t: Mat3, array: Helpers.NumberArray, offset: number, count: number) { export function transformDirectionArray (n: Mat3, array: Helpers.NumberArray, offset: number, count: number) {
// TODO for (let i = 0, il = count * 3; i < il; i += 3) {
Vec3.fromArray(tmpV, array, offset + i)
Vec3.transformMat3(tmpV, tmpV, n)
Vec3.toArray(tmpV, array, offset + i)
}
} }
export function setArrayZero(array: Helpers.NumberArray) { export function setArrayZero(array: Helpers.NumberArray) {
......
...@@ -35,12 +35,14 @@ namespace Mesh { ...@@ -35,12 +35,14 @@ namespace Mesh {
flatShaded?: boolean flatShaded?: boolean
doubleSided?: boolean doubleSided?: boolean
flipSided?: boolean
} }
export function create(ctx: Context, props: Props): Renderable<Props> { export function create(ctx: Context, props: Props): Renderable<Props> {
const defines = getBaseDefines(props) const defines = getBaseDefines(props)
if (props.flatShaded) defines.FLAT_SHADED = '' if (props.flatShaded) defines.FLAT_SHADED = ''
if (props.doubleSided) defines.DOUBLE_SIDED = '' if (props.doubleSided) defines.DOUBLE_SIDED = ''
if (props.flipSided) defines.FLIP_SIDED = ''
const defs: RenderItemProps = { const defs: RenderItemProps = {
...getBaseDefs(props), ...getBaseDefs(props),
......
...@@ -24,7 +24,7 @@ type ShaderDefine = ( ...@@ -24,7 +24,7 @@ type ShaderDefine = (
'UNIFORM_COLOR' | 'ATTRIBUTE_COLOR' | 'INSTANCE_COLOR' | 'ELEMENT_COLOR' | 'ELEMENT_INSTANCE_COLOR' | 'UNIFORM_COLOR' | 'ATTRIBUTE_COLOR' | 'INSTANCE_COLOR' | 'ELEMENT_COLOR' | 'ELEMENT_INSTANCE_COLOR' |
'UNIFORM_SIZE' | 'ATTRIBUTE_SIZE' | 'UNIFORM_SIZE' | 'ATTRIBUTE_SIZE' |
'POINT_SIZE_ATTENUATION' | 'POINT_SIZE_ATTENUATION' |
'FLAT_SHADED' | 'DOUBLE_SIDED' 'FLAT_SHADED' | 'DOUBLE_SIDED' | 'FLIP_SIDED'
) )
export type ShaderDefines = { export type ShaderDefines = {
[k in ShaderDefine]?: number|string [k in ShaderDefine]?: number|string
......
...@@ -65,6 +65,7 @@ void main() { ...@@ -65,6 +65,7 @@ void main() {
vec3 finalColor = material * (diffuse + ambient) + specular; vec3 finalColor = material * (diffuse + ambient) + specular;
// gl_FragColor.rgb = N; // gl_FragColor.rgb = N;
// gl_FragColor.a = 1.0;
// gl_FragColor.rgb = vec3(1.0, 0.0, 0.0); // gl_FragColor.rgb = vec3(1.0, 0.0, 0.0);
gl_FragColor.rgb = finalColor; gl_FragColor.rgb = finalColor;
gl_FragColor.a = alpha; gl_FragColor.a = alpha;
......
...@@ -39,6 +39,10 @@ void main(){ ...@@ -39,6 +39,10 @@ void main(){
#ifndef FLAT_SHADED #ifndef FLAT_SHADED
mat3 normalMatrix = transpose(inverse(mat3(modelView))); mat3 normalMatrix = transpose(inverse(mat3(modelView)));
vNormal = normalize(normalMatrix * normal); vec3 transformedNormal = normalize(normalMatrix * normal);
#ifdef FLIP_SIDED
transformedNormal = -transformedNormal;
#endif
vNormal = transformedNormal;
#endif #endif
} }
\ No newline at end of file
...@@ -17,6 +17,8 @@ ...@@ -17,6 +17,8 @@
* furnished to do so, subject to the following conditions: * furnished to do so, subject to the following conditions:
*/ */
import { Mat4 } from '../3d'
interface Mat3 extends Array<number> { [d: number]: number, '@type': 'mat3', length: 9 } interface Mat3 extends Array<number> { [d: number]: number, '@type': 'mat3', length: 9 }
namespace Mat3 { namespace Mat3 {
...@@ -27,6 +29,33 @@ namespace Mat3 { ...@@ -27,6 +29,33 @@ namespace Mat3 {
return ret as any; return ret as any;
} }
export function identity(): Mat3 {
const out = zero();
out[0] = 1;
out[1] = 0;
out[2] = 0;
out[3] = 0;
out[4] = 1;
out[5] = 0;
out[6] = 0;
out[7] = 0;
out[8] = 1;
return out;
}
export function setIdentity(mat: Mat3): Mat3 {
mat[0] = 1;
mat[1] = 0;
mat[2] = 0;
mat[3] = 0;
mat[4] = 1;
mat[5] = 0;
mat[6] = 0;
mat[7] = 0;
mat[8] = 1;
return mat;
}
export function toArray(a: Mat3, out: Helpers.NumberArray, offset: number) { export function toArray(a: Mat3, out: Helpers.NumberArray, offset: number) {
out[offset + 0] = a[0]; out[offset + 0] = a[0];
out[offset + 1] = a[1]; out[offset + 1] = a[1];
...@@ -37,9 +66,6 @@ namespace Mat3 { ...@@ -37,9 +66,6 @@ namespace Mat3 {
out[offset + 6] = a[6]; out[offset + 6] = a[6];
out[offset + 7] = a[7]; out[offset + 7] = a[7];
out[offset + 8] = a[8]; out[offset + 8] = a[8];
out[offset + 9] = a[9];
out[offset + 10] = a[10];
out[offset + 11] = a[11];
} }
export function fromArray(a: Mat3, array: Helpers.NumberArray, offset: number) { export function fromArray(a: Mat3, array: Helpers.NumberArray, offset: number) {
...@@ -52,11 +78,107 @@ namespace Mat3 { ...@@ -52,11 +78,107 @@ namespace Mat3 {
a[6] = array[offset + 6] a[6] = array[offset + 6]
a[7] = array[offset + 7] a[7] = array[offset + 7]
a[8] = array[offset + 8] a[8] = array[offset + 8]
a[9] = array[offset + 9]
a[10] = array[offset + 10]
a[11] = array[offset + 11]
return a return a
} }
/**
* Copies the upper-left 3x3 values into the given mat3.
*/
export function fromMat4(out: Mat3, a: Mat4) {
out[0] = a[0];
out[1] = a[1];
out[2] = a[2];
out[3] = a[4];
out[4] = a[5];
out[5] = a[6];
out[6] = a[8];
out[7] = a[9];
out[8] = a[10];
return out;
}
/**
* Creates a new Mat3 initialized with values from an existing matrix
*/
export function clone(a: Mat3) {
return Mat3.copy(Mat3.zero(), a);
}
/**
* Copy the values from one Mat3 to another
*/
export function copy(out: Mat3, a: Mat3) {
out[0] = a[0];
out[1] = a[1];
out[2] = a[2];
out[3] = a[3];
out[4] = a[4];
out[5] = a[5];
out[6] = a[6];
out[7] = a[7];
out[8] = a[8];
return out;
}
/**
* Transpose the values of a Mat3
*/
export function transpose(out: Mat3, a: Mat3) {
// If we are transposing ourselves we can skip a few steps but have to cache some values
if (out === a) {
const a01 = a[1], a02 = a[2], a12 = a[5];
out[1] = a[3];
out[2] = a[6];
out[3] = a01;
out[5] = a[7];
out[6] = a02;
out[7] = a12;
} else {
out[0] = a[0];
out[1] = a[3];
out[2] = a[6];
out[3] = a[1];
out[4] = a[4];
out[5] = a[7];
out[6] = a[2];
out[7] = a[5];
out[8] = a[8];
}
return out;
}
/**
* Inverts a Mat3
*/
export function invert(out: Mat3, a: Mat3): Mat3 {
const a00 = a[0], a01 = a[1], a02 = a[2];
const a10 = a[3], a11 = a[4], a12 = a[5];
const a20 = a[6], a21 = a[7], a22 = a[8];
const b01 = a22 * a11 - a12 * a21;
const b11 = -a22 * a10 + a12 * a20;
const b21 = a21 * a10 - a11 * a20;
// Calculate the determinant
let det = a00 * b01 + a01 * b11 + a02 * b21;
if (!det) {
console.warn('non-invertible matrix.', a);
return out;
}
det = 1.0 / det;
out[0] = b01 * det;
out[1] = (-a22 * a01 + a02 * a21) * det;
out[2] = (a12 * a01 - a02 * a11) * det;
out[3] = b11 * det;
out[4] = (a22 * a00 - a02 * a20) * det;
out[5] = (-a12 * a00 + a02 * a10) * det;
out[6] = b21 * det;
out[7] = (-a21 * a00 + a01 * a20) * det;
out[8] = (a11 * a00 - a01 * a10) * det;
return out;
}
} }
export default Mat3 export default Mat3
\ No newline at end of file
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
*/ */
import Mat4 from './mat4'; import Mat4 from './mat4';
import { Quat } from '../3d'; import { Quat, Mat3 } from '../3d';
interface Vec3 extends Array<number> { [d: number]: number, '@type': 'vec3', length: 3 } interface Vec3 extends Array<number> { [d: number]: number, '@type': 'vec3', length: 3 }
...@@ -265,7 +265,18 @@ namespace Vec3 { ...@@ -265,7 +265,18 @@ namespace Vec3 {
return out; return out;
} }
/** Transforms the vec3 with a quat */ /**
* Transforms the Vec3 with a Mat3.
*/
export function transformMat3(out: Vec3, a: Vec3, m: Mat3) {
const x = a[0], y = a[1], z = a[2];
out[0] = x * m[0] + y * m[3] + z * m[6];
out[1] = x * m[1] + y * m[4] + z * m[7];
out[2] = x * m[2] + y * m[5] + z * m[8];
return out;
}
/** Transforms the Vec3 with a quat */
export function transformQuat(out: Vec3, a: Vec3, q: Quat) { export function transformQuat(out: Vec3, a: Vec3, q: Quat) {
// benchmarks: http://jsperf.com/quaternion-transform-vec3-implementations // benchmarks: http://jsperf.com/quaternion-transform-vec3-implementations
......
...@@ -65,7 +65,7 @@ namespace Viewer { ...@@ -65,7 +65,7 @@ namespace Viewer {
}) })
const gl = getWebGLContext(canvas, { const gl = getWebGLContext(canvas, {
alpha: true, alpha: false,
antialias: true, antialias: true,
depth: true, depth: true,
preserveDrawingBuffer: true preserveDrawingBuffer: true
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment