Importing threejs shader example to OF

hi i try to translate a threejs shader implementation to a OF im managed to make it work mostly but i have a small issue i can’t see why it is
this is the example


from here

this is what i have managed to accomplish so far


colors
the code for this is here
any idea what am i missing ??

Hi @cyrstem!

By the looks of your screen capture, it looks like it’s related to size/scale. The ThreeJS example sets a 1 unit radius sphere. You are setting a 100 unit radius one in OF.

Either you scale everything down or, better yet to avoid working with small numbers, pass a float uniform into your vertex shader and multiply the displacement by that uniform. Since you are working with sin/cos and noise, and probably with intervals between -1 and 1, start with a number like 100 and see what that gets you.

Have fun!

heyy thanks thats was it i complete missed that
thanks!

hey @cyrstem, do you have the missing ofApp.h file on the gist link? I would like to test this as a guide to get shaders from other three.js sources. Thanks for sharing.

yup sure here you go

#pragma once

#include "ofMain.h"
#include "ofxAutoReloadedShader.h"
#include "ofxImGui.h"
class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();
		void exit();
		void keyPressed(int key);
		ofxAutoReloadedShader shader;
		
		ofMesh mesh;
		ofIcoSpherePrimitive ico;
		ofCamera cam;
		//ofEasyCam cam;

		ofImage imgSave;
		ofLight ambient, point;


	private:	
	bool imGui();
	ofxImGui::Gui gui;
	bool mouseOverGui;
	bool guiVisible;
	//save data
		string XML_path ="settings.xml";
		void XML_load_app(ofParameterGroup &g, string path);
		void XML_save_app(ofParameterGroup &g, string path);
	//end save data

	ofParameterGroup init{"Setup"};

	ofParameter<float>speed{"speed",0.1,0.001,1};
	ofParameter<float>zoom{"zoom",7.6,-10.0,100};

	ofParameterGroup perlin{"Perlin"};
	ofParameter<float>decay{"decay",0.35,0,1.0};
	ofParameter<float>waves{"waves",2,0,100};

	ofParameterGroup color{"Color"};
	ofParameter<float>eqcolor{"eqColor",3.0,0.0,50.0};
	ofParameter<float>red{"Red",0.4,0.0,1.0};
	ofParameter<float>green{"Green",0.4,0.0,1.0};
	ofParameter<float>blue{"Blue",0.4,0.0,1.0};
};

1 Like