logo
down
shadow

Add opacity to chromakey shader in aframe


Add opacity to chromakey shader in aframe

By : Jason Pittard
Date : November 20 2020, 03:01 PM
I wish this help you When you update the value of the uniform (function update), the you have to set the value property and you have to set the notification, that the uniforms of the material needs to be updated (needsUpdate):
code :
 this.material.uniforms.opacity.value = data.opacity
 this.material.needsUpdate = true
uniform float     opacity;
uniform sampler2D texture;
uniform vec3      color;
varying vec2      vUv;

void main(void)
{
    vec3 tColor = texture2D( texture, vUv ).rgb;
    float a = (length(tColor - color) - 0.5) * 7.0;
    gl_FragColor = vec4(tColor, a * opacity);
}


Share : facebook icon twitter icon
How do you set opacity of an AFrame entity using jQuery?

How do you set opacity of an AFrame entity using jQuery?


By : Eric Saline
Date : March 29 2020, 07:55 AM
I wish this helpful for you The opacity property of a text entity (bmfont-text) needs to be included in the "bmfont-text" attribute itself. Example :
code :
textElem.setAttribute("bmfont-text","text: sampleText; color: #000; opacity: 1.0;");
Aframe - Setting opacity to `a-sky` element does not work

Aframe - Setting opacity to `a-sky` element does not work


By : Jesse Forrest
Date : March 29 2020, 07:55 AM
will help you Getting the correct render order for transparency to work as intended is difficult. From the material component documentation page:
code :
render() {
    return (
      <Scene>
        <Entity id="sky2-wrapper" rotation="0 90 0">
          <Entity id="sky2" primitive="a-sky" position="0 0 -1000" />
        </Entity>
        <Entity id="sky1" primitive="a-sky" opacity="1" />
        <Entity
          camera={{
            far: 10000,
            fov: 80,
            near: 0.05,
            active: true
          }}
          id="cam"
          rotation="0 90 0"
          mouse-cursor
          look-controls="reverseMouseDrag:true"
        />
      </Scene>
    );
  }
Shader with threejs material not working in aframe

Shader with threejs material not working in aframe


By : efth
Date : March 29 2020, 07:55 AM
wish of those help The issue here is that your shader in the applied material does not provide the map uniform / texture value.
On the other hand you try to create the material twice:
code :
AFRAME.registerShader('makewaves', {
  schema: {
     ......,
    uMap: {
      type: 'map',
      is: 'uniform'
    }
  }, .....
<a-plane postion="1 1.2 2" width="5" height="5" rotation="-90 0 90" material="shader:makewaves; 
uMap: https://cinemont.com/tutorials/zelda/water.png;"></a-plane>
segments-height="20" segments-width="20"
THREE.ShaderMaterial({
     fragmentShader: this.fragmentShader, // custom fragment shader
     vertexShader: this.vertexShader, // custom vertex shader
     ......
Using watershader.js shader in aframe

Using watershader.js shader in aframe


By : user1939342
Date : March 29 2020, 07:55 AM
this will help I am looking to understand how external shader files can be used inside a-frame without copying the shader code. I know that we can define custom shaders using aframe's registershader but is there a way to point the vertex and fragment shader code to an external URL? , The script contains a global definition for
code :
THREE.ShaderLib[ 'water' ]
THREE.ShaderLib['water'].vertexShader // vertexShader
AFRAME.registerShader('foo', {
  schema: {
    //all uniforms from the water shader lib
  },
  vertexShader: THREE.ShaderLib[ 'water' ].vertexShader,
  fragmentShader: THREE.ShaderLib[ 'water' ].fragmentShader
})
AFrame - sampler3D in fragment shader

AFrame - sampler3D in fragment shader


By : user2952718
Date : March 29 2020, 07:55 AM
wish helps you OK, I made it work (at least it's a milestone).
The problem is the webgl context Aframe initializes the scene with. By default it is webgl, not webgl2. The reserved word "sampler3D" is only available in webgl2, and that is the reason I was getting the error. I had to clone the aframe repository, in the file src\core\scene\a-scene.js modify the method setupCanvas and add the support for webgl2:
code :
canvasEl = document.createElement('canvas');
var contextEl = canvasEl.getContext( 'webgl2' );
sceneEl.context = contextEl;
context: this.context,
shadow
Privacy Policy - Terms - Contact Us © voile276.org