3d – GLSL Shade a box different colors for two ends with one material in Three.js

First, I knew the following basic knowledges,

Then, I can use shader to render 2D graphics on the Shadertoy or GLSL Sandbox Gallery cross-browser online editor through WebGL or with the cross-platform SHADERed IDE. It’s easy to use GLSL to draw 2D objects because 2D coordinates correspond to gl_Position. But I failed to use ShaderMaterial with the GLSL code to render a BoxGeometry I created in three.js. See the following code for my case.

var container;
var camera, scene, renderer;
var mesh;
var uniforms;

var clock = new THREE.Clock();


function init() {
    container = document.getElementById('container');

    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
    camera.position.z = 2.0;
    camera.position.y = 1.0;
    camera.rotation.x = -0.45;

    scene = new THREE.Scene();

    //var boxGeometry = new THREE.PlaneGeometry(0.75, 0.75, 1);
    var boxGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5, 1,1,1);

    uniforms = { u_time: { type: "f", value: 0.0 } };

    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        side: THREE.DoubleSide,
        transparent: true,
        vertexShader: document.getElementById('vertexShader2').textContent,
        fragmentShader: document.getElementById('fragment_shader2').textContent

    mesh = new THREE.Mesh(boxGeometry, material);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xffffff, 1);


    window.addEventListener('resize', onWindowResize, false);


function onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    renderer.setSize(window.innerWidth, window.innerHeight);

function animate() {

function render() {
    var delta = clock.getDelta();
    uniforms.u_time.value += delta;
    mesh.rotation.y += delta * 0.5;
    renderer.render(scene, camera);
window.onerror = function (msg, url, line, col, error) {
    // Note that col & error are new to the HTML 5 spec and may not be 
    // supported in every browser.  It worked for me in Chrome.
    var extra = !col ? '' : 'ncolumn: ' + col;
    extra += !error ? '' : 'nerror: ' + error;

    // You can view the information in an alert to see things working like this:
    alert("Error: " + msg + "nurl: " + url + "nline: " + line + extra);

    // TODO: Report this error via ajax so you can keep track of what pages have JS issues

    var suppressErrorAlert = true;
    // If you return true, then error alerts (like in older versions of 
    // Internet Explorer) will be suppressed.
    return suppressErrorAlert;
    <!-- <script src="https://threejs.org/build/three.min.js"></script> -->
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.130.1/build/three.min.js"></script>

    <div id="container"></div>

<script id="fragment_shader2" type="x-shader/x-fragment">
varying vec3 v_color;

void main( void ) {
    gl_FragColor = vec4(v_color, 1.);    
<script id="vertexShader2" type="x-shader/x-vertex">
varying vec3 v_color;
void main()
    v_color = vec3(position.z < 0.25, 0, position.z >= 0.25);
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;

<script id="fragment_shader" type="x-shader/x-fragment">
varying vec2 v_uv;

void main( void ) {
    vec2 uv = v_uv;
    // Zooms out by a factor of 2.0
    uv *= 2.0;
    // Shifts every axis by -1.0
    uv -= 1.0;
    // Base color for the effect
    vec3 color = vec3 ( .2, 1., 0. );

    // specify size of border. 0.0 - no border, 1.0 - border occupies the entire space
    vec2 borderSize = vec2(0.3); 

    // size of rectangle in terms of uv 
    vec2 rectangleSize = vec2(1.0) - borderSize; 

    // distance field, 0.0 - point is inside rectangle, 1.0 point is on the far edge of the border.
    float distanceField = length(max(abs(uv)-rectangleSize,0.0) / borderSize);
    // calculate alpha accordingly to the value of the distance field
    float alpha = 1.0 - distanceField;

    gl_FragColor = vec4(color, alpha);    

<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 v_uv;
void main()
    v_uv = uv;
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;

    <div id="info">
        <a href="https://threejs.org/examples/#webgl_postprocessing_outline">WebGL Postprocessing Outline</a>
    <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Outline Pass by 
    <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and
    <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a>
<script type="module" src="index.js"></script>

I guessed that it was because it could distinguish between vertexes in the same middle position of the +x sides and -x sides for v_color = vec3(position.x < 0.25, 0, position.x >= 0.25);.

Finally, I also knew that I can Split the geometry into groups with different materials, but I just want to use one ShaderMaterial to do this.

var geo = new THREE.BoxGeometry(48, 48, 48, 2);
var magnetMaterial = ('red', 'blue', 'green', 'purple', 'cyan', 'white', 'black', 'pink', 'orange', 'gray').map(it =>
    new THREE.MeshPhongMaterial({
        color: it, side: THREE.DoubleSide,
        polygonOffset: true, polygonOffsetFactor: 1

//Initializes the magnetic orientation to +x, red on the left side and blue on the right side.
//faces().materialIndex: -x,-x, +x,+x, +z,+z,+z,+z, -y,-y,-y,-y, -z,-z,-z,-z, +y,+y,+y,+y
// var faceColors = (1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0);
// console.log('faceColors', geo.faces.map((it, idx) => it.materialIndex = faceColors(idx))); // for Three.js 1.20

// let's regroup materialIndex of five faces of the two ends of the Cuboid (x+,x-,y+,y-,z+,z-)
console.log(geo.getIndex().count, geo.groups.slice(0));
(0, 1, 1, 0, 1, 0, 1, 0, 0, 1).forEach((val, idx) => geo.addGroup(6 * idx, 6, val));

Anyone could help me to explain and solve this problem because the gradient is not what I want?

dungeons and dragons – Where in D&D published material did the nomenclature “ability check” first appear?

Looking through the Redbox and the Bluebox I noticed that there are abilities and there are checks. But there is no cohesive concept of an “ability check”. Then I looked in Gygax’ AD&D Dungeon Masters Guide and did not find the term “ability check” there either.

I did however find the term “Ability Check” prominent and repeated often in the 1991 “Rules Cyclopedia” (ex. chapter 13).

Where in D&D published material did the term “Ability Check” first appear?

dnd 5e – Can artificer subclasses be in (third-party) material published under the OGL?

If I were to publish my own campaign setting for D&D 5e under the OGL, can I include new subclasses for the artificer in the material I publish?

Would any restrictions/workarounds allow me to do so, such as using euphemisms instead of proper nouns?
For example, I assume I can’t use the term “Artificer” or refer to class features like “Flash of Genius.” But what if I just say something like, “when you use the feature you gained from your base class at 7th level, you…”? Or refer to the Artificer as “A class I am not legally allowed to reference by name, but whom is a crafter of magical devices, which casts spells through tools,” and so on. Would this allow me to publish new artificer subclasses under the OGL?

dnd 5e – Artificer Subclasses in OGL material

If I were to publish my own campaign setting for D&D 5e under the OGL, would it be possible to include new subclasses for the Artificer as long as I use euphemisms instead of proper nouns?

For example, I assume I can’t use the term “Artificer” or refer to class features like “Flash of Genius.” But what if I just say something like, “when you use the feature you gained from your base class at 7th level, you…”

Or refer to the Artificer as “A class I am not legally allowed to reference by name, but whom is a crafter of magical devices, which casts spells through tools,” and so on.

react native – Is it possible to recognize the material with google vision api?

The following is a list of object recognition supported by google vision api.

 - Table of contents.
 - Face detection 1.
 - Landmark detection 2.
 - Logo detection 3.
 - Label detection 4.
 - Text detection.
 - Document text detection (dense text / handwriting)
 - Image properties 5

I want to recognize the material of scanned product in React-Native.

Is it possible to detect material also? Like “Paper cup“, “glass bottle“, “zink key” etc.

dnd 5e – Can you cast spells that do not require material components through an arcane focus?

The PHB states:

Casting some spells requires particular objects, specified in parentheses in the component entry. A character can use a component pouch or a spellcasting focus (found in chapter 5, “Equipment”) in place of the components specified for a spell.

However, even when looking at the Spellcasting feature of the various casters, nothing seems to indicate that spells with no material components cannot be cast through an arcane focus.

From my understanding it seems to mostly be a widely accepted assumption that one cannot do so, but no rule really prevents you from doing so…

When an item/arcane focus says you gain a bonus when casting through it (ex. Artillerist Artificer’s Arcane Firearm feature), are you really only limited to spells with an M component by RAW?

How can I recreate a material from blender in Unreal engine

I’m new to unreal and I am having trouble finding a way to reproduce the materials for a mesh in blender in unreal. It’s a simple material but I can’t find a way to reproduce the color ramp specifically. Is there any unreal alternative or just some way i can reproduce it. the way I’m using the color ramp is so that light is so the material is affected by the light.

(here’s what I mean)


dnd 5e – Does a level 20 druid bypass the costless but consumed mistletoe material component of the spell Druid Grove?

The spell Druid Grove has an oddly specific material component that is consumed but is otherwise costless: “A mistletoe harvested with a golden sickle under the light of a full moon” (XGE, p.154).

At level 20, an Arcdruid can ignore material components that don’t have a cost and aren’t consumed (PHB, p.64).

Does that mean that the druid can ignore material components that have no cost but are consumed?

Just have this idea of a high-level naked druid wandering in the forests creating temporary sanctuaries all over. But I don’t know whether the druid itself has to have the component for Druid Grove on hand, or can just be completely naked.

material design – When should i use a mask behind a FAB button?

This question is unrelated to FAB, you use a scrim whenever appropriate, specifically when you load a modal, dialog or a new sheet of material. Whether it’s launched by a FAB, a link or a button, is irrelevant.

If you want an example of this behavior triggered by a FAB, take a look to https://material-design.storage.googleapis.com/publish/material_v_8/material_ext_publish/0B8v7jImPsDi-Mk9EVk5DRVN1cmc/components-buttons-fab-transition_card_01.mp4


All in all, it will also depend on your needs, not everything needs a FAB, not everything needs a pop-up or modal, so this is a generic answer to your specific question

dnd 5e – What are the material components for the Enhance Ability spell?

Any fur or feather from any beast. Compare to the spell creation.

The material component for enhance ability is:

fur or a feather from a beast

No further specificity is given, so no further specificity is needed. Any fur or feather from a beast will work for any of the spell’s options. For the spell’s particular options to require a particular material component, we would need to have that explained to us in the spell description.

For example, the spell creation has different durations depending on what material component you use. The material component is:

a tiny piece of matter of the same type of the item you plan to create

And the description says:

The duration depends on the object’s material. If the object is composed of multiple materials, use the shortest duration.

So we have an example of a spell referencing its material components and giving a different effect based on what is used. Since we do not have similar explanation given in enhance ability, any fur or feather from any beast is appropriate for any of the spell’s options.

Alternatively, a spellcasting focus or component pouch can provide the M component for enhance ability, since the component os not consumed and has no cost.