takahirox / aframe-outline Goto Github PK
View Code? Open in Web Editor NEWTwo-pass Outline effect component for A-Frame
Home Page: https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.0/index.html
License: MIT License
Two-pass Outline effect component for A-Frame
Home Page: https://cdn.rawgit.com/takahirox/aframe-outline/v1.1.0/index.html
License: MIT License
i get this error in chrome and firefox when i add the outline property.
i'm on an AMD r9 390 -- curious as to whether you developed it on Nvidia.
thanks!
THREE.WebGLShader: Shader couldn't compile.aframe-master.min.js:30:338THREE.WebGLShader: gl.getShaderInfoLog() vertex ERROR: 0:67: 'transformed' : undeclared identifier
ERROR: 0:67: 'constructor' : not enough data provided for construction
1: precision highp float;
2: precision highp int;
3: #define SHADER_NAME ShaderMaterial
4: #define VERTEX_TEXTURES
5: #define GAMMA_FACTOR 2
6: #define MAX_BONES 1019
7: #define FLIP_SIDED
8: #define NUM_CLIPPING_PLANES 0
9: uniform mat4 modelMatrix;
10: uniform mat4 modelViewMatrix;
11: uniform mat4 projectionMatrix;
12: uniform mat4 viewMatrix;
13: uniform mat3 normalMatrix;
14: uniform vec3 cameraPosition;
15: attribute vec3 position;
16: attribute vec3 normal;
17: attribute vec2 uv;
18: #ifdef USE_COLOR
19: attribute vec3 color;
20: #endif
21: #ifdef USE_MORPHTARGETS
22: attribute vec3 morphTarget0;
23: attribute vec3 morphTarget1;
24: attribute vec3 morphTarget2;
25: attribute vec3 morphTarget3;
26: #ifdef USE_MORPHNORMALS
27: attribute vec3 morphNormal0;
28: attribute vec3 morphNormal1;
29: attribute vec3 morphNormal2;
30: attribute vec3 morphNormal3;
31: #else
32: attribute vec3 morphTarget4;
33: attribute vec3 morphTarget5;
34: attribute vec3 morphTarget6;
35: attribute vec3 morphTarget7;
36: #endif
37: #endif
38: #ifdef USE_SKINNING
39: attribute vec4 skinIndex;
40: attribute vec4 skinWeight;
41: #endif
42:
43: varying vec3 vWorldPosition;
44: uniform float outlineThickness;
45: vec4 calculateOutline( vec4 pos, vec3 objectNormal, vec4 skinned ) {
46: float thickness = outlineThickness;
47: float ratio = 1.0;
48: vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + objectNormal, 1.0 );
49: vec4 norm = normalize( pos - pos2 );
50: return pos + norm * thickness * pos.w * ratio;
51: }
52: void main() {
53: vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
54: vWorldPosition = worldPosition.xyz;
55: gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
56: #if ! defined( LAMBERT ) && ! defined( PHONG ) && ! defined( TOON ) && ! defined( PHYSICAL )
57: #ifndef USE_ENVMAP
58: vec3 objectNormal = normalize( normal );
59: #ifdef FLIP_SIDED
60: objectNormal = -objectNormal;
61: #endif
62: #endif
63: #endif
64: #ifdef USE_SKINNING
65: gl_Position = calculateOutline( gl_Position, objectNormal, skinned );
66: #else
67: gl_Position = calculateOutline( gl_Position, objectNormal, vec4( transformed, 1.0 ) );
68: #endif
69: }aframe-master.min.js:30:427THREE.WebGLProgram: shader error: 0 gl.VALIDATE_STATUS false gl.getProgramInfoLog Must have a compiled vertex shader attached. ERROR: 0:67: 'transformed' : undeclared identifier
ERROR: 0:67: 'constructor' : not enough data provided for construction
THREE.OutlineEffect
used in aframe-outline
has the same issue
for close camera, simple object, and bold thickness.
http://www.spiria.com/en/blog/desktop-software/outline-shader-techniques-unity
Hey there, it seems like this component doesn't work with versions 0.8.0
and up of A-Frame. I copied over your demo and bumped the A-Frame version number up to the latest one and no outlines seem to be appearing regardless of my settings.
remove()
method? If I remove the outline
attribute, can we remove the effect?play()
method. .play()
gets called after update, and there's no need to do anything on scene resume. https://github.com/takahirox/aframe-outline/blob/master/index.js#L27aframe-deferred-renderer
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.